Pakettien päivittäminen | antti/update-packages

.eslintrc.json

@@ -2,19 +2,31 @@
   "root": true,
   "extends": [
     "eslint:recommended",
-    "plugin:node/recommended",
+    "plugin:n/recommended",
     "plugin:import/recommended",
     "next/core-web-vitals",
     "plugin:prettier/recommended"
   ],
   "rules": {
     // Without 'modules' ignored would get 'Import and export declarations are
     // not supported yet' error in all ts files
+    /*
     "node/no-unsupported-features/es-syntax": [
       "error",
       { "ignores": ["modules"] }
     ],
+    */
 
+    // didn't get this working for now. I tried to allow "styles/globals.css" and make everything
+    // else throw an error. Added a couple eslint-disable-next-line lines to fix the problem for now 
+
+
+    /*
+    "n/no-extraneous-import": ["error", {
+      "allowModules": ["@styles/globals.css"]
+    }],
+    */ 
+
     // No React component definitions allowed inside components
     "react/no-unstable-nested-components": "warn",
 
@@ -40,10 +52,12 @@
         "sourceType": "module",
         "ecmaFeatures": { "jsx": true }
       },
+      "plugins": ["@tanstack/query"],
       "extends": [
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "plugin:import/typescript"
+        "plugin:import/typescript",
+        "plugin:@tanstack/eslint-plugin-query/recommended"
       ],
       "rules": {
         // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/291)
@@ -52,7 +66,8 @@
         "no-undef": "off",
 
         // Handled by import/typescript
-        "node/no-missing-import": "off",
+        //"node/no-missing-import": "off",
+        "n/no-missing-import": "off",
 
         // Disable some rules which are difficult for beginners
         "@typescript-eslint/no-unsafe-assignment": "warn",

TODO.md

@@ -8,11 +8,19 @@
 
 # Jokin sivu (esimerkiksi asetuksiin), joka näyttää kaikki aktiiviset (miksei epäaktiiviset) Sessionit. Myöskin Sessionin poistomahdollisuus voitaisiin lisätä
 
-# Enter-näppäimellä EditModalin ja DeleteModalin hyväksyminen
+# Enter-näppäimellä EditModalin (DONE) ja DeleteModalin hyväksyminen
 
 ### </IDEOITA>
 
 TODO:
 
-Laitetaan nappulat yms käyttämään tanstack-kirjastoa. Ratkaisee samalla yhden ideoista
-https://www.npmjs.com/package/@tanstack/react-query
+Jos tulee virhe vaikka lahjoja hakiessa, ehkä jokin nappula olisi hyvä tehdä, jolla voisi mahdollisesti kokeilla hakea uudestaan lahjoja
+
+Kun lisää uuden lahjan / kun lahjoja haetaan, järjestetään ne uusin -> vanhin. Myöhemmin voidaan lisätä käyttäjälle mahdollisuus valita miten lahjat haluaa järjestää (vaikka vanhin -> uusin, aakkosjärjestys, ymsyms)
+
+Tässä toteutustapa:
+
+const sortedArrayNewestToOldest = gifts.sort(
+(a, b) =>
+new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+);

api.rest

@@ -30,6 +30,7 @@ Content-Type: application/json
 
 
 # GIFT REQUESTS
+###
 
 @giftUUID = cba86307-8f50-4038-bc79-c05cef4fafc1
 
@@ -72,6 +73,7 @@ DELETE {{baseUrl}}/gifts/{{giftUUID}}
 
 # USER REQUESTS
 
+###
 @userUUID = 26ab195c-5f56-4831-bedd-07725e8012ff
 
 ###

components/DeleteModal.tsx

@@ -1,29 +1,30 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Gift } from '~/shared/types';
+import { Gift, QueryKeys } from '~/shared/types';
 import { Modal } from './Modal';
 import { Button } from './Button';
 import { deleteGift } from '~/utils/apiRequests';
 import { handleError } from '~/utils/handleError';
 import { handleErrorToast } from '~/utils/handleToasts';
+import { useQueryClient } from '@tanstack/react-query';
 
 type DeleteModal = {
   gift: Gift;
-  refreshGiftList: () => void;
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export function DeleteModal({
-  gift,
-  refreshGiftList,
-  setIsModalOpen,
-}: DeleteModal) {
+export function DeleteModal({ gift, setIsModalOpen }: DeleteModal) {
+  const queryClient = useQueryClient();
+
   async function handleDeletion() {
     try {
       await deleteGift(gift.uuid);
     } catch (e) {
       handleErrorToast(handleError(e));
     }
-    refreshGiftList();
+    await queryClient.invalidateQueries({
+      queryKey: QueryKeys.GIFTS,
+    });
+
     setIsModalOpen(false);
   }
 

components/EditModal.tsx

@@ -1,34 +1,32 @@
 import { Dispatch, FormEvent, SetStateAction, useState } from 'react';
-import { Gift } from '~/shared/types';
+import { Gift, QueryKeys } from '~/shared/types';
 import { Modal } from './Modal';
 import { Button } from './Button';
 import { updateGift } from '~/utils/apiRequests';
 import { Input } from './Input';
 import { handleError } from '~/utils/handleError';
 import { handleErrorToast } from '~/utils/handleToasts';
+import { useQueryClient } from '@tanstack/react-query';
 
 type EditModal = {
   gift: Gift;
-  refreshGiftList: () => void;
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export function EditModal({
-  gift,
-  refreshGiftList,
-  setIsModalOpen,
-}: EditModal) {
+export function EditModal({ gift, setIsModalOpen }: EditModal) {
   const [giftReceiver, setGiftReceiver] = useState(gift.receiver);
   const [giftName, setGiftName] = useState(gift.gift);
 
+  const queryClient = useQueryClient();
+
   async function handleEdit(e: FormEvent<HTMLElement>) {
     e.preventDefault();
     try {
       await updateGift(gift.uuid, { receiver: giftReceiver, gift: giftName });
     } catch (e) {
       handleErrorToast(handleError(e));
     }
-    refreshGiftList();
+    await queryClient.invalidateQueries({ queryKey: QueryKeys.GIFTS });
     setIsModalOpen(false);
   }
   return (

hooks/useCatchQueryErrors.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { handleError } from '~/utils/handleError';
+import { handleErrorToast } from '~/utils/handleToasts';
+
+export function useCatchQueryErrors(error: Error | null) {
+  // Otetaan isError-parametri pois ja jätetään vain error-parametri ja tehdään seuraava tarkistus:
+  /*
+    if(!error) return
+
+    handleErrorToast(handleError(error))
+    return
+    */
+  // tai jotain vastaavaa
+
+  useEffect(() => {
+    if (!error) return;
+
+    handleErrorToast(handleError(error));
+  }, [error]);
+}