Antti/api

.eslintrc.json

@@ -55,12 +55,12 @@
         "node/no-missing-import": "off",
 
         // Disable some rules which are difficult for beginners
-        "@typescript-eslint/no-unsafe-assignment": "off",
-        "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/no-unsafe-argument": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-unsafe-return": "off",
-        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-assignment": "warn",
+        "@typescript-eslint/no-unsafe-member-access": "warn",
+        "@typescript-eslint/no-unsafe-argument": "warn",
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-unsafe-return": "warn",
+        "@typescript-eslint/no-unsafe-call": "warn",
 
         // Use warn instead of error for some rules
         "prefer-const": "warn",

components/DeleteModal.tsx

@@ -3,9 +3,9 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { Gift } from '~/pages';
 import { Modal } from './Modal';
 import { Button } from './Button';
-import { removeGift } from '~/utils/jsonServerFunctions';
 import { SvgCheckMarkIcon } from '~/icons/CheckMarkIcon';
 import { SvgDeclineIcon } from '~/icons/DeclineIcon';
+import { deleteGift } from '~/utils/giftRequests';
 import { isAxiosError } from 'axios';
 
 type DeleteModal = {
@@ -21,7 +21,7 @@ export function DeleteModal({
 }: DeleteModal) {
   async function handleDeletion() {
     try {
-      await removeGift(gift.id);
+      await deleteGift(gift.id);
     } catch (e) {
       if (isAxiosError(e) && e.response?.status === 404) {
         console.error('Lahjaa ei löytynyt palvelimelta!');

components/EditModal.tsx

@@ -9,7 +9,7 @@ import { Gift } from '~/pages';
 import { Modal } from './Modal';
 import { TitleText } from './TitleText';
 import { Button } from './Button';
-import { updateGift } from '~/utils/jsonServerFunctions';
+import { updateGift } from '~/utils/giftRequests';
 import { Input } from './Input';
 import { SvgCheckMarkIcon } from '~/icons/CheckMarkIcon';
 import { SvgDeclineIcon } from '~/icons/DeclineIcon';

pages/api/gifts/[id].ts

@@ -0,0 +1,80 @@
+import axios, { isAxiosError } from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Gift } from '~/pages';
+
+const baseURL = 'http://localhost:3001/gifts';
+
+type HandlerParams = {
+  req: NextApiRequest;
+  res: NextApiResponse;
+  queryId: string;
+};
+
+const HANDLERS: Record<string, (params: HandlerParams) => Promise<void>> = {
+  GET: handleGET,
+  PATCH: handlePATCH,
+  PUT: handlePUT,
+  DELETE: handleDELETE,
+} as const;
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  try {
+    const reqHandler = req.method !== undefined && HANDLERS[req.method];
+    if (reqHandler) {
+      if (typeof req.query.id !== 'string') {
+        throw new Error('Invalid ID', { cause: 'idError' });
+      }
+      const queryId = req.query.id;
+
+      await reqHandler({ req, res, queryId });
+    } else {
+      return res
+        .status(405)
+        .send(
+          `${req.method} is not a valid method. GET, PATCH, PUT and DELETE request are valid.`,
+        );
+    }
+  } catch (e) {
+    return errorFound(res, e);
+  }
+}
+
+async function handleGET({ res, queryId }: HandlerParams) {
+  const giftRequest = await axios.get(`${baseURL}/${queryId}`);
+  return res.status(giftRequest.status).send(giftRequest.data as Gift);
+}
+
+async function handlePATCH({ req, res, queryId }: HandlerParams) {
+  const patchRequest = await axios.patch(`${baseURL}/${queryId}`, req.body);
+  return res.status(patchRequest.status).json(patchRequest.data as Gift);
+}
+
+async function handlePUT({ req, res, queryId }: HandlerParams) {
+  const putRequest = await axios.put(`${baseURL}/${queryId}`, req.body);
+  return res.status(putRequest.status).json(putRequest.data as Gift);
+}
+
+async function handleDELETE({ res, queryId }: HandlerParams) {
+  const deleteRequest = await axios.delete(`${baseURL}/${queryId}`);
+  res.status(deleteRequest.status).end();
+  return;
+}
+
+export function errorFound(res: NextApiResponse, e: unknown) {
+  if (isAxiosError(e) && e.response?.status === 404) {
+    return res
+      .status(e.response.status)
+      .send('Lahjaa ei löytynyt palvelimelta!');
+  } else if (isAxiosError(e) && e.code === 'ECONNREFUSED') {
+    return res.status(500).send('Palvelin virhe!');
+  } else if (e instanceof Error) {
+    if (e.cause === 'idError') return res.status(400).send('Virheellinen ID!');
+
+    return res.status(500).send('Odottamaton virhe tapahtui!');
+  } else {
+    return res.status(500).send('Odottamaton virhe tapahtui!');
+  }
+}

pages/api/gifts/index.ts

@@ -0,0 +1,44 @@
+import axios from 'axios';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Gift } from '../..';
+import { errorFound } from './[id]';
+
+const baseURL = 'http://localhost:3001/gifts';
+
+const HANDLERS: Record<
+  string,
+  (req: NextApiRequest, res: NextApiResponse) => Promise<void>
+> = {
+  GET: handleGET,
+  POST: handlePOST,
+} as const;
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  try {
+    const reqHandler = req.method !== undefined && HANDLERS[req.method];
+    if (reqHandler) {
+      await reqHandler(req, res);
+    } else {
+      return res
+        .status(405)
+        .send(
+          `${req.method} is not a valid method. Valid methods are: GET and POST`,
+        );
+    }
+  } catch (e) {
+    return errorFound(res, e);
+  }
+}
+
+async function handleGET(req: NextApiRequest, res: NextApiResponse) {
+  const giftRequest = await axios.get(`${baseURL}`);
+  return res.status(giftRequest.status).json(giftRequest.data as Gift[]);
+}
+
+async function handlePOST(req: NextApiRequest, res: NextApiResponse) {
+  const postRequest = await axios.post(baseURL, req.body);
+  return res.status(postRequest.status).json(postRequest.data as Gift);
+}

pages/index.tsx

@@ -5,19 +5,23 @@ import { TitleText } from '~/components/TitleText';
 import { Input } from '../components/Input';
 import { DeleteModal } from '~/components/DeleteModal';
 import { EditModal } from '~/components/EditModal';
-import { createGift, getAllGifts } from '~/utils/jsonServerFunctions';
+import { createGift, getAllGifts } from '~/utils/giftRequests';
+import { isAxiosError } from 'axios';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export type Gift = {
   name: string;
   gift: string;
   id: string;
-  localStorageKeyID?: string;
   createdDate: number;
 };
 
+export type CreateGift = Omit<Gift, 'id'>;
+
 export default function Home() {
+  const [isAnyKindOfError, setIsAnyKindOfError] = useState(false);
+  const [isAnyKindOfErrorMessage, setIsAnyKindOfErrorMessage] = useState('');
   const [giftData, setGiftData] = useState<Gift[]>([]);
   const [giftNameError, setGiftNameError] = useState(false);
   const [receiverError, setReceiverError] = useState(false);
@@ -31,53 +35,81 @@ export default function Home() {
   useEffect(() => {
     console.log('effect');
     async function fetchGifts() {
-      const gifts = await getAllGifts();
-      setGiftData(gifts);
+      try {
+        const gifts = await getAllGifts();
+        setGiftData(gifts);
+      } catch (e) {
+        errorFound(e);
+      }
     }
-    fetchGifts().catch((e) => {
-      console.error(e);
-    });
+    void fetchGifts();
   }, []);
 
   async function handleSubmit(e: FormEvent<HTMLElement>) {
-    e.preventDefault();
-    setGiftNameError(false);
-    setReceiverError(false);
-    // this variable is used for checking both inputs
-    // could use return statement instead of errorFound, but it would not give an error message to all invalid inputs. Only the first invalid input.
-    let errorFound = false;
+    try {
+      e.preventDefault();
+      setGiftNameError(false);
+      setReceiverError(false);
+      // this variable is used for checking both inputs
+      // could use return statement instead of errorFound, but it would not give an error message to all invalid inputs. Only the first invalid input.
+      let errorFound = false;
 
-    if (typeof newGiftName !== 'string' || newGiftName.length === 0) {
-      setGiftNameError(true);
-      errorFound = true;
-    }
-    if (typeof newReceiver !== 'string' || newReceiver.length === 0) {
-      setReceiverError(true);
-      errorFound = true;
-    }
-    if (errorFound) {
-      return;
-    }
+      if (typeof newGiftName !== 'string' || newGiftName.length === 0) {
+        setGiftNameError(true);
+        errorFound = true;
+      }
+      if (typeof newReceiver !== 'string' || newReceiver.length === 0) {
+        setReceiverError(true);
+        errorFound = true;
+      }
+      if (errorFound) {
+        return;
+      }
 
-    const generatedUUID = crypto.randomUUID();
-    const newGift: Gift = {
-      name: newReceiver,
-      gift: newGiftName,
-      id: generatedUUID,
-      createdDate: new Date().getTime(),
-    };
+      const newGift: CreateGift = {
+        name: newReceiver,
+        gift: newGiftName,
+        createdDate: new Date().getTime(),
+      };
 
-    const currentGiftList = await getAllGifts();
-    const updatedGiftList = currentGiftList.concat(newGift);
+      const createdGift = await createGift(newGift);
+      const updatedGiftList = giftData.concat(createdGift);
 
-    await createGift(newGift);
-    setGiftData(updatedGiftList);
-    setNewGiftName('');
-    setNewReceiver('');
+      setGiftData(updatedGiftList);
+      setNewGiftName('');
+      setNewReceiver('');
+    } catch (e) {
+      errorFound(e);
+    }
   }
 
   async function refreshGiftList() {
-    setGiftData(await getAllGifts());
+    try {
+      setGiftData(await getAllGifts());
+    } catch (e) {
+      errorFound(e);
+    }
+  }
+
+  function errorFound(e: unknown) {
+    if (isAxiosError(e) && e.code === 'ERR_BAD_RESPONSE') {
+      if (e.response !== undefined && typeof e.response.data === 'string') {
+        setIsAnyKindOfError(true);
+        setIsAnyKindOfErrorMessage(e.response.data);
+      } else {
+        setIsAnyKindOfError(true);
+        setIsAnyKindOfErrorMessage('Palvelin virhe!');
+      }
+    } else if (isAxiosError(e)) {
+      setIsAnyKindOfError(true);
+      setIsAnyKindOfErrorMessage(e.message);
+    } else if (e instanceof Error) {
+      setIsAnyKindOfError(true);
+      setIsAnyKindOfErrorMessage(e.message);
+    } else {
+      setIsAnyKindOfError(true);
+      setIsAnyKindOfErrorMessage('Odottamaton virhe tapahtui!');
+    }
   }
 
   return (
@@ -176,6 +208,17 @@ export default function Home() {
                 setIsModalOpen={setIsDeleteModalOpen}
               />
             )}
+
+            {isAnyKindOfError && (
+              <>
+                <div className="fixed flex z-[98] justify-center items-center left-0 bottom-0 w-full">
+                  <div className="bg-red-600 text-center p-10 z-[99] w-full" />
+                  <span className="animate-bounce fixed z-[99] text-5xl">
+                    {isAnyKindOfErrorMessage}
+                  </span>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>

utils/giftRequests.ts

@@ -0,0 +1,47 @@
+import axios from 'axios';
+import { CreateGift, Gift } from '~/pages';
+
+const baseURL = '/api/gifts';
+
+/**
+ *
+ * @returns an array that contains all the gifts as objects
+ */
+export async function getAllGifts() {
+  return (await axios.get(baseURL)).data as Gift[];
+}
+
+/**
+ *
+ * @param id should be given a string that contains the id that is wanted to be searched.
+ * @returns an object of a gift if it was found. Else it will return null
+ */
+export async function getGift(id: string) {
+  return (await axios.get(`${baseURL}/${id}`)).data as Gift;
+}
+
+/**
+ *
+ * @param newObject a new object of a gift with type Gift that will added to the server
+ */
+export async function createGift(newObject: CreateGift) {
+  return (await axios.post(`${baseURL}`, newObject)).data as Gift;
+}
+
+/**
+ *
+ * @param id should be given a string that contains the id of the gift that is wanted to be updated
+ * @param newObject should be given parts of Gift object type that are wanted to be updated
+ */
+export async function updateGift(id: string, newObject: Partial<Gift>) {
+  return (await axios.patch(`${baseURL}/${id}`, newObject)).data as Gift;
+}
+
+/**
+ *
+ * @param id should be given the id of the gift that is wanted to be deleted
+ */
+export async function deleteGift(id: string) {
+  await axios.delete(`${baseURL}/${id}`);
+  return;
+}