Antti/json server

components/DeleteModal.tsx

@@ -1,17 +1,14 @@
 import { TitleText } from './TitleText';
 import React, { Dispatch, SetStateAction } from 'react';
-import { FullLocalStorage } from '~/pages';
-import {
-  getLocalStorage,
-  setLocalStorage,
-} from '~/utils/localStorageFunctions';
+import { Gift } from '~/pages';
 import { Modal } from './Modal';
-import SvgAcceptButtonIcon from '~/icons/accept_button_icon';
-import SvgDeclineButtonIcon from '~/icons/decline_button_icon';
 import { Button } from './Button';
+import { getGift, removeGift } from '~/utils/jsonServerFunctions';
+import { SvgCheckMarkIcon } from '~/icons/CheckMarkIcon';
+import { SvgDeclineIcon } from '~/icons/DeclineIcon';
 
 type ModalType = {
-  gift: FullLocalStorage;
+  gift: Gift;
   giftListRefreshFunction: () => void;
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
@@ -21,14 +18,11 @@ export function DeleteModal({
   giftListRefreshFunction,
   setIsModalOpen,
 }: ModalType) {
-  function handleDeletion() {
-    let localStorageGifts: FullLocalStorage[] = JSON.parse(
-      getLocalStorage('giftData'),
-    );
-    localStorageGifts = localStorageGifts.filter(
-      (localStorageGift) => localStorageGift.id !== gift.id,
-    );
-    setLocalStorage('giftData', JSON.stringify(localStorageGifts));
+  async function handleDeletion() {
+    const giftToBeDeleted = await getGift(gift.id);
+    if (giftToBeDeleted !== null) {
+      await removeGift(gift.id);
+    }
     giftListRefreshFunction();
     setIsModalOpen(false);
   }
@@ -41,15 +35,20 @@ export function DeleteModal({
       <p className="row-start-2 row-end-2 ps-5 pt-5 text-lg w-full h-full font-bold">
         {gift.name} - {gift.gift}
       </p>
-      <Button className="border border-yellow-500 mt-3 p-0 row-start-3 row-end-3 col-start-1 col-end-1 w-[64px] h-[64px] bg-gray-300 text-black hover:bg-gray-600 hover:text-yellow-400">
-        <SvgAcceptButtonIcon
+      <Button className="border border-yellow-500 mt-3 p-0 row-start-3 row-end-3 col-start-1 col-end-1 w-[66px] h-[66px]">
+        <SvgCheckMarkIcon
+          className="bg-gray-300 hover:bg-gray-600 group/checkMarkIcon"
+          backgroundClassName="fill-black group-hover/checkMarkIcon:fill-yellow-400"
+          checkMarkClassName="fill-gray-300 group-hover/checkMarkIcon:fill-gray-600"
           width={64}
           height={64}
-          onClick={() => handleDeletion()}
+          onClick={() => void handleDeletion()}
         />
       </Button>
-      <Button className="border border-yellow-500 relative mt-3 p-0 left-32 sm:left-28 row-start-3 row-end-3 col-start-1 col-end-1 w-[64px] h-[64px] bg-gray-300 text-black hover:bg-gray-600 hover:text-yellow-400">
-        <SvgDeclineButtonIcon
+      <Button className="border border-yellow-500 relative mt-3 p-0 left-32 sm:left-28 row-start-3 row-end-3 col-start-1 col-end-1 w-[66px] h-[66px] ">
+        <SvgDeclineIcon
+          className="group/declineIcon bg-gray-300 hover:bg-gray-600"
+          backgroundClassName="fill-black group-hover/declineIcon:fill-yellow-400"
           width={64}
           height={64}
           onClick={() => setIsModalOpen(false)}

components/InfoModal.tsx

@@ -0,0 +1,22 @@
+import { Modal } from './Modal';
+import { TitleText } from './TitleText';
+
+type InfoModalType = {
+  title: string;
+  info: string;
+};
+
+export function InfoModal({ title, info }: InfoModalType) {
+  return (
+    <div>
+      <Modal>
+        <TitleText className="row-start-1 row-end-1 ps-5 font-bold">
+          {title}
+        </TitleText>
+        <p className="row-start-2 row-end-2 ps-5 pt-5 text-lg w-full h-full font-bold">
+          {info}
+        </p>
+      </Modal>
+    </div>
+  );
+}

icons/accept_button_icon.tsx → icons/CheckMarkIcon.tsx

@@ -1,24 +1,23 @@
 import type { SVGProps } from 'react';
 
-type AcceptButtonType = SVGProps<SVGSVGElement> & {
-  backgroundFill?: string;
-  checkmarkFill?: string;
+type CheckMarkIcon = SVGProps<SVGSVGElement> & {
+  backgroundClassName?: string;
+  checkMarkClassName?: string;
 };
 
-const SvgAcceptButtonIcon = ({
-  backgroundFill,
-  checkmarkFill,
+export const SvgCheckMarkIcon = ({
+  backgroundClassName,
+  checkMarkClassName,
   ...rest
-}: AcceptButtonType) => (
+}: CheckMarkIcon) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" {...rest}>
     <path
-      fill={backgroundFill || 'currentColor'}
+      className={backgroundClassName}
       d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm-2 19.59-5-5L10.59 15 14 18.41 21.41 11l1.596 1.586Z"
     />
     <path
-      fill={checkmarkFill || 'none'}
+      className={checkMarkClassName}
       d="m14 21.591-5-5L10.591 15 14 18.409 21.41 11l1.595 1.585L14 21.591z"
     />
   </svg>
 );
-export default SvgAcceptButtonIcon;

icons/decline_button_icon.tsx → icons/DeclineIcon.tsx

@@ -1,18 +1,17 @@
 import type { SVGProps } from 'react';
 
-type DeclineButtonType = SVGProps<SVGSVGElement> & {
-  backgroundFill?: string;
+type DeclineIcon = SVGProps<SVGSVGElement> & {
+  backgroundClassName?: string;
 };
 
-const SvgDeclineButtonIcon = ({
-  backgroundFill,
+export const SvgDeclineIcon = ({
+  backgroundClassName,
   ...rest
-}: DeclineButtonType) => (
+}: DeclineIcon) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...rest}>
     <path
-      fill={backgroundFill || 'currentColor'}
+      className={backgroundClassName}
       d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6 8.4 17Zm3.6 5q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"
     />
   </svg>
 );
-export default SvgDeclineButtonIcon;

package.json

@@ -14,6 +14,7 @@
     "check-types": "tsc --noemit",
     "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"
   },
@@ -22,6 +23,7 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "axios": "1.5.1",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "json-server": "0.17.3",