Antti/json server

components/DeleteModal.tsx

@@ -1,14 +1,14 @@
 import { TitleText } from './TitleText';
 import React, { Dispatch, SetStateAction } from 'react';
-import { FullLocalStorage } from '~/pages';
+import { Gifts } from '~/pages';
 import { Modal } from './Modal';
-import jsonServerFunctions from '~/utils/jsonServerFunctions';
 import SvgAcceptButtonIcon from '~/icons/accept_button_icon';
 import SvgDeclineButtonIcon from '~/icons/decline_button_icon';
 import { Button } from './Button';
+import { getGift, removeGift } from '~/utils/jsonServerFunctions';
 
 type ModalType = {
-  gift: FullLocalStorage;
+  gift: Gifts;
   giftListRefreshFunction: () => void;
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
@@ -19,13 +19,9 @@ export function DeleteModal({
   setIsModalOpen,
 }: ModalType) {
   async function handleDeletion() {
-    const giftToBeDeleted: any[] = await jsonServerFunctions.getOne(
-      `id=${gift.id}`,
-    );
-    if (giftToBeDeleted.length != 0) {
-      await jsonServerFunctions
-        .remove(`${gift.id}`)
-        .catch(() => giftListRefreshFunction());
+    const giftToBeDeleted = await getGift(gift.id);
+    if (giftToBeDeleted !== null) {
+      await removeGift(gift.id);
     }
     giftListRefreshFunction();
     setIsModalOpen(false);

components/InfoModal.tsx

@@ -1,4 +1,3 @@
-import { Container } from './Container';
 import { Modal } from './Modal';
 import { TitleText } from './TitleText';
 
@@ -9,7 +8,7 @@ type InfoModalType = {
 
 export function InfoModal({ title, info }: InfoModalType) {
   return (
-    <Container>
+    <div>
       <Modal>
         <TitleText className="row-start-1 row-end-1 ps-5 font-bold">
           {title}
@@ -18,6 +17,6 @@ export function InfoModal({ title, info }: InfoModalType) {
           {info}
         </p>
       </Modal>
-    </Container>
+    </div>
   );
 }

db.json

@@ -1,7 +1,7 @@
 {
   "gifts": [
     {
-      "name": "Matti Virtanen",
+      "name": "Matti Meikäläinen",
       "gift": "Kortti",
       "id": "ad674e17-6643-423f-8517-70fbd3ec1df8",
       "createdDate": 1702975113280

package.json

@@ -15,6 +15,7 @@
     "lint": "(next lint || true) && npm run check-types",
     "lint:fix": "next lint --fix",
     "start-json-server": "json-server -p3001 --watch db.json",
+    "prepush": "next lint --max-warnings=0 && npm run check-types",
     "svgr": "svgr --out-dir icons --typescript --jsx-runtime automatic --no-dimensions --silent --filename-case snake -- public/images/icons"
   },
   "dependencies": {

pages/index.tsx

@@ -4,11 +4,11 @@ import { Button } from '~/components/Button';
 import { TitleText } from '~/components/TitleText';
 import { Input } from '../components/Input';
 import { DeleteModal } from '~/components/DeleteModal';
-import jsonServerFunctions from '~/utils/jsonServerFunctions';
+import { createGift, getAllGifts } from '~/utils/jsonServerFunctions';
 
 const inter = Inter({ subsets: ['latin'] });
 
-export type FullLocalStorage = {
+export type Gifts = {
   name: string;
   gift: string;
   id: string;
@@ -23,22 +23,22 @@ export type isGiftDeletedAlreadyType = {
 };
 
 export default function Home() {
-  const [giftData, setGiftData] = useState<FullLocalStorage[]>([]);
+  const [giftData, setGiftData] = useState<Gifts[]>([]);
   const [giftNameError, setGiftNameError] = useState(false);
   const [receiverError, setReceiverError] = useState(false);
   const [newReceiver, setNewReceiver] = useState('');
   const [newGiftName, setNewGiftName] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalGiftData, setModalGiftData] = useState<FullLocalStorage>();
+  const [modalGiftData, setModalGiftData] = useState<Gifts>();
 
   useEffect(() => {
     console.log('effect');
-    async function fetchData() {
-      const gifts = await (await jsonServerFunctions.getAll()).data;
+    async function fetchGifts() {
+      const gifts = await getAllGifts();
       setGiftData(gifts);
     }
-    fetchData().catch((e) => {
-      throw new Error(e);
+    fetchGifts().catch((e) => {
+      console.error(e);
     });
   }, []);
 
@@ -47,7 +47,7 @@ export default function Home() {
     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 input. Only the first invalid input.
+    // 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) {
@@ -63,26 +63,24 @@ export default function Home() {
     }
 
     const generatedUUID = crypto.randomUUID();
-    const JSON_OBJECT: FullLocalStorage = {
+    const newGift: Gifts = {
       name: newReceiver,
       gift: newGiftName,
       id: generatedUUID,
       createdDate: new Date().getTime(),
     };
 
-    const currentGiftList: FullLocalStorage[] = (
-      await jsonServerFunctions.getAll()
-    ).data;
-    const updatedGiftList = currentGiftList.concat(JSON_OBJECT);
+    const currentGiftList = await getAllGifts();
+    const updatedGiftList = currentGiftList.concat(newGift);
 
-    await jsonServerFunctions.create(JSON_OBJECT);
+    await createGift(newGift);
     setGiftData(updatedGiftList);
     setNewGiftName('');
     setNewReceiver('');
   }
 
   async function refreshGiftList() {
-    setGiftData(await (await jsonServerFunctions.getAll()).data);
+    setGiftData(await getAllGifts());
   }
 
   return (

utils/jsonServerFunctions.ts

@@ -1,45 +1,51 @@
 import axios from 'axios';
+import { Gifts } from '~/pages';
 
-const baseURL = 'http://localhost:3001/gifts';
+//const baseURL = 'http://localhost:3001/gifts'; // localhost url
+const baseURL = 'https://my-json-server.typicode.com/samuliasmala/lahjalista/gifts'; // external url
 
-async function getAll() {
-  return await axios.get(baseURL);
+/**
+ *
+ * @returns an array that contains all the gifts as objects
+ */
+export async function getAllGifts() {
+  return (await axios.get(baseURL)).data as Gifts[];
 }
 
 /**
  *
- * @param searchParameters should be given a string that contains search parameters as query strings.
- * @example name=Foo&gift=Bar
- * @returns an array of JavaScript objects if found. Else an empty array
+ * @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
  */
-async function getOne(searchParameters: string) {
-  return (await axios.get(`${baseURL}?${searchParameters}`)).data;
+export async function getGift(id: string) {
+  const gifts = (await axios.get(`${baseURL}?id=${id}`)).data;
+  if (gifts.length != 0) {
+    return gifts[0];
+  }
+  return null;
 }
 
-async function create(newObject: object) {
-  return (await axios.post(baseURL, newObject)).data;
+/**
+ *
+ * @param newObject a new object of a gift that will added to the server
+ */
+export async function createGift(newObject: object) {
+  await axios.post(baseURL, newObject);
 }
 
 /**
  *
- * @param searchParameters should be given a string that contains search parameters as query strings.
- * @example name=Foo&gift=Bar
- * @param newObject a new object that will be replacing the old object
- * @returns an array of JavaScript objects after the update
+ * @param id should be given a string that contains search parameters as query strings.
+ * @param newObject a new object of Gifts that will be replacing the old object
  */
-async function update(searchParameters: string, newObject: object) {
-  return (await axios.put(`${baseURL}?${searchParameters}`, newObject)).data;
+export async function updateGift(id: string, newObject: Gifts) {
+  await axios.put(`${baseURL}/${id}`, newObject);
 }
 
 /**
  *
  * @param id should be given the id that is wanted to be removed
- * @returns
  */
-async function remove(id: string) {
-  return (await axios.delete(`${baseURL}/${id}`)).data;
+export async function removeGift(id: string) {
+  await axios.delete(`${baseURL}/${id}`);
 }
-
-const exportableModules = { getAll, getOne, create, update, remove };
-
-export default exportableModules;

utils/sortGiftsOldestFirst.ts

@@ -1,10 +1,10 @@
-import { FullLocalStorage } from '~/pages';
+import { Gifts } from '~/pages';
 /**
  *
  * @param giftArray an array of objects
  * @returns an array of objects that is sorted from lowest createdDate to highest
  */
 
-export function sortGiftsOldestFirst(giftArray: readonly FullLocalStorage[]) {
+export function sortGiftsOldestFirst(giftArray: readonly Gifts[]) {
   return [...giftArray].sort((a, b) => a.createdDate - b.createdDate);
 }