Adds eslint and linted files

Hajoppi · Sep 15, 2023 · 0a8571d · 0a8571d
1 parent 059cff0
commit 0a8571d
Show file tree

Hide file tree

Showing 14 changed files with 242 additions and 25 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,15 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier" //Prettier should be placed last, so it gets the chance to override other configs
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true,
+  "rules": {
+    "no-unused-vars": "off", //Base rule is disabled as it can report incorrect errors
+    "@typescript-eslint/no-unused-vars": "error"
+  }
 }
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# editors
+.idea
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/app/[locale]/callback/Result.tsx b/app/[locale]/callback/Result.tsx
@@ -4,12 +4,13 @@ import { useContext, useEffect, useRef } from "react";
 import { AppContext } from "@/context/AppContext";
 import Link from "next/link";
 import { useTranslation } from "@/context/useTranslation";
+import { StrapiBaseType } from "@/utils/models";
 
 type Props = {
   locale: string;
   isValid: boolean;
   paymentStatus: string;
-  content: any;
+  content?: StrapiBaseType<{onError: string; onCancel: string; onSuccess: string}>;
 }
 
 const CallbackResult = ({ locale, isValid, paymentStatus, content}: Props) => {
@@ -22,6 +23,7 @@ const CallbackResult = ({ locale, isValid, paymentStatus, content}: Props) => {
       reset();
     }
   },[isValid, paymentStatus, reset]);
+  if(!content) return <div>Error on rendering callback page</div>
   let result = <p>{content.attributes.onSuccess}</p>
   if(isValid === undefined) return <p>Loading...</p>
   if (!isValid) result = <div>

diff --git a/app/[locale]/callback/page.tsx b/app/[locale]/callback/page.tsx
@@ -25,7 +25,7 @@ type Props = {
   params: {
     locale: string
   },
-  searchParams: Record<string, any>;
+  searchParams: Record<string, string>;
 }
 
 const CallbackPage = async ({params: {locale}, searchParams}: Props) => {

diff --git a/app/[locale]/contact/ContactForm.tsx b/app/[locale]/contact/ContactForm.tsx
@@ -3,7 +3,7 @@
 import { ChangeEvent, FormEvent, useContext, useEffect, useState } from 'react';
 import { fetchAPI } from '@/lib/api';
 import { AppContext } from '@/context/AppContext';
-import { ContactForm} from '@/utils/models';
+import { ContactForm, Customer} from '@/utils/models';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { getContactForm } from '@/utils/helpers';
@@ -23,7 +23,7 @@ const Form = ({locale}: Props) => {
     populate: ['contactForm','itemTypes']
   }))
   const {customer, refreshFields, isEmpty, items} = useContext(AppContext);
-  const [inputFields, setInputFields] = useState<Record<string,any>>(customer.attributes);
+  const [inputFields, setInputFields] = useState<Customer["attributes"]>(customer.attributes);
   useEffect(() => {
     setInputFields(customer.attributes);
   },[customer]);
@@ -35,7 +35,7 @@ const Form = ({locale}: Props) => {
   const contactForm = getContactForm(contactForms || [], items);
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    const updateFields: any = {...inputFields};
+    const updateFields: Partial<Customer["attributes"]> = {...inputFields};
     updateFields.locale = locale;
     delete updateFields.createdAt;
     delete updateFields.updatedAt;
@@ -72,8 +72,8 @@ const Form = ({locale}: Props) => {
               className='tx-input mt-2'
               type={field.type}
               onChange={(event: ChangeEvent<HTMLInputElement>) => handleChange(event, field.fieldName, field.type)}
-              value={inputFields[field.fieldName] || ''}
-              checked={inputFields[field.fieldName] || false}
+              value={String(inputFields[field.fieldName]) || ''}
+              checked={!!inputFields[field.fieldName] || false}
               required={field.required}
             />
           </label>

diff --git a/app/[locale]/edit/[orderUid]/Component.tsx b/app/[locale]/edit/[orderUid]/Component.tsx
@@ -5,7 +5,6 @@ import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 import { fetchAPI } from '@/lib/api';
 import { initialCustomer } from '@/context/AppContext';
 import { ContactForm,Customer, Order, StrapiBaseType } from '@/utils/models';
-import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { getContactForm } from '@/utils/helpers';
 import { useTranslation } from "@/context/useTranslation";
@@ -26,11 +25,10 @@ type Props = {
 
 const Form = ({contactForms, global, locale, orderUid}: Props) => {
   const { translation } = useTranslation(locale);
-  const router = useRouter();
   const [isLoading, setLoading] = useState(false);
   const {data: customer, mutate: refreshFields} = useSWR<Customer>(`/customers/findByOrderUid/${orderUid}`, fetchAPI);
-  const {data: orders, mutate: mutateOrders} = useSWR<Order[]>(customer ? `/orders/findByCustomerUid/${customer.attributes.uid}` : null, fetchAPI);
-  const [inputFields, setInputFields] = useState<Record<string,any>>(customer?.attributes || initialCustomer);
+  const {data: orders} = useSWR<Order[]>(customer ? `/orders/findByCustomerUid/${customer.attributes.uid}` : null, fetchAPI);
+  const [inputFields, setInputFields] = useState<Customer["attributes"]>(customer?.attributes || initialCustomer.attributes);
   const updateHasEnded = new Date(global.attributes.updateEnd) <= new Date();
   useEffect(() => {
     if(!customer) return;
@@ -42,7 +40,7 @@ const Form = ({contactForms, global, locale, orderUid}: Props) => {
   const handleSubmit = async (e: FormEvent) => {
     setLoading(true);
     e.preventDefault();
-    const updateFields: any = {...inputFields};
+    const updateFields: Partial<Customer["attributes"]> = {...inputFields};
     updateFields.locale = locale;
     delete updateFields.createdAt;
     delete updateFields.updatedAt;
@@ -57,7 +55,7 @@ const Form = ({contactForms, global, locale, orderUid}: Props) => {
         }),
       });
     } catch(error) {
-
+      // Error in updating the field
     }
     refreshFields();
     setLoading(false);
@@ -84,8 +82,8 @@ const Form = ({contactForms, global, locale, orderUid}: Props) => {
               className='tx-input mt-2'
               type={field.type}
               onChange={(event: ChangeEvent<HTMLInputElement>) => handleChange(event, field.fieldName, field.type)}
-              value={inputFields[field.fieldName] || ''}
-              checked={inputFields[field.fieldName] || false}
+              value={String(inputFields[field.fieldName]) || ''}
+              checked={!!inputFields[field.fieldName] || false}
               required={field.required}
             />
           </label>

diff --git a/app/[locale]/edit/[orderUid]/page.tsx b/app/[locale]/edit/[orderUid]/page.tsx
@@ -23,14 +23,16 @@ const getData = async (locale: string) => {
 
 type Props = {
   params: {
-    locale: string
+    locale: string;
+    orderUid: string;
   }
 }
 
 
-const EditPage = async ({params: {locale}}: Props) => {
+const EditPage = async ({params: {locale, orderUid}}: Props) => {
   const data = await getData(locale)
   return <Component
+    orderUid={orderUid}
     contactForms={data.contactForms}
     global={data.global}
     locale={locale}

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -18,7 +18,7 @@ type PropType = {
 }
 
 
-const RootLayout = async ({children, ...rest}: PropType) => {
+const RootLayout = async ({children}: PropType) => {
   return (
     <html lang='fi' className='dark w-full h-full'>
       <head />

diff --git a/components/Group.tsx b/components/Group.tsx
@@ -18,7 +18,7 @@ const GroupComponent = ({onChange}: PropTypes) => {
   const {data: groupData} = useSWR<Group[]>('/groups', fetchAPI);
   const groups = useMemo(() => (groupData ||[]).map(group => group.attributes.name),[groupData])
   const [dropdownIndex, setDropdownIndex] = useState(-1);
-  const [isFocused, setFocused] = useState(false);
+  const [, setFocused] = useState(false);
   const filteredGroups = useMemo(() => {
     const g = groups.filter(group => {
       if(newGroupName.length === 0) return false;

diff --git a/context/AppContext.tsx b/context/AppContext.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import {
-  createContext, useState, useEffect, FC, useCallback, useRef, useMemo
+  createContext, useState, useEffect, FC, useCallback, useMemo
 } from "react";
 import useSWR from "swr";
 import { fetchAPI } from "../lib/api";
@@ -33,7 +33,7 @@ export const initialCustomer =  {
     startYear: '',
     updatedAt: '',
     uid: '',
-  }
+  },
 };
 const appContextDefault: Required<AppContextType> = {
   customer: initialCustomer,
@@ -124,6 +124,7 @@ const AppProvider: FC<Props> = ({ children }) => {
       newOrder.attributes.items = {data:filteredItems};
       mutateOrder(newOrder);
     } catch(error) {
+      // Error in deleting an item
     }
   };
 
@@ -144,6 +145,7 @@ const AppProvider: FC<Props> = ({ children }) => {
       newOrder.attributes.items = {data: newItems};
       mutateOrder(newOrder);
     } catch(error) {
+      // Error in adding an item
     }
   }
   const refreshFields = async () => {