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

INFO.md

@@ -1,11 +1,24 @@
 package.json
 
-PACKAGES NOT UPDATED, NOT WORKING AT THE MOMENT 19.09.2024
-
-Minor Backwards-compatible features
-❯ ◯ typescript 5.4.5 → 5.6.2
+Seuraavia paketteja ei ole päivitetty
 
 Major Potentially breaking API changes
-◯ @types/node 20.12.4 → 22.5.5
-◯ @typescript-eslint/eslint-plugin 7.5.0 → 8.6.0
-◯ eslint 8.57.0 → 9.10.0
+❯ ◯ @prisma/client 5.20.0 → 6.2.1
+◯ @types/node 20.12.4 → 22.10.6
+◯ prisma 5.20.0 → 6.2.1
+
+`@prisma/client`iä ja `prisma`a ei ole päivitetty, koska `lucia-auth`in peer-dependency ei tue vielä Prisma v6:sta. Kyseisestä asiasta on tehty PR https://github.com/lucia-auth/lucia/pull/1760 jos tuota ei ole korjattu helmikuuhun mennessä, korjataan itse tai keksitään jokin muu ratkaisu
+
+`@types/node`a ei ole päivitetty, koska pitänee seurata package.json:in node-versiota
+
+#########################################################################
+
+**Testaa näitä päivittämisen yhteydessä**
+
+- [] poista oma testaustietokanta ja lisää tietokanta uudelleen `npm run prisma db push`
+
+- [] kokeile ESLint ettei heitä virheitä
+
+- [] testaa sivu että normaalikäyttö toimii (rekistöröinti, kirjautuminen, lahjan (lisääminen, poistaminen, muokkaaminen), palaute)
+
+- [] API-endpointtien testaaminen

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 (

eslint.config.mjs

@@ -0,0 +1,174 @@
+import { fixupConfigRules } from '@eslint/compat';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { FlatCompat } from '@eslint/eslintrc';
+import { configs as tsConfigs } from 'typescript-eslint';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: tsConfigs.recommendedTypeChecked,
+  allConfig: tsConfigs.all,
+});
+
+const eslintConfig = [
+  ...fixupConfigRules([
+    ...compat.config({
+      root: true,
+      extends: [
+        'plugin:n/recommended',
+        'plugin:import/recommended',
+        'next/core-web-vitals',
+        'plugin:prettier/recommended',
+      ],
+
+      // espree (default parser) set here to prevent following error: Cannot serialize key "parse" in parser: Function values are not supported.
+      parser: 'espree',
+      // parserOptions added so import.meta.url can be used. Reference: https://github.com/eslint/eslint/discussions/16037#discussioncomment-2998062
+      parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 'latest',
+      },
+
+      rules: {
+        // No React component definitions allowed inside components
+        'react/no-unstable-nested-components': 'warn',
+
+        // Additional import rules
+        'import/no-dynamic-require': 'error',
+        'import/no-absolute-path': 'error',
+        'import/no-useless-path-segments': 'warn',
+        'import/newline-after-import': 'warn',
+
+        // Use warn instead of error for prettier issues and some other rules
+        'prettier/prettier': 'warn',
+        'prefer-const': 'warn',
+        'no-unused-vars': 'warn',
+        'no-debugger': 'warn',
+        'no-console': 'off',
+      },
+
+      overrides: [
+        {
+          files: ['**/*.ts?(x)'],
+          parser: '@typescript-eslint/parser',
+          parserOptions: {
+            project: './tsconfig.json',
+            sourceType: 'module',
+            ecmaFeatures: {
+              jsx: true,
+            },
+          },
+          plugins: ['@tanstack/query'],
+          extends: [
+            'plugin:@typescript-eslint/recommended',
+            'plugin:@typescript-eslint/recommended-requiring-type-checking',
+            'plugin:import/typescript',
+            'plugin:@tanstack/eslint-plugin-query/recommended',
+          ],
+
+          rules: {
+            // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/291)
+            'no-dupe-class-members': 'off',
+            // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
+            'no-undef': 'off',
+
+            // Handled by import/typescript
+            // n/no-missing-import is used here instead of node/no-missing-import because seems like eslint-plugin-node is not updated frequently
+            // node/no-missing-import: https://github.com/mysticatea/eslint-plugin-node | n/no-missing-import: https://github.com/eslint-community/eslint-plugin-n
+            'n/no-missing-import': 'off',
+
+            // Disable some rules which are difficult for beginners
+            '@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',
+            '@typescript-eslint/restrict-plus-operands': 'warn',
+            '@typescript-eslint/no-unused-vars': 'warn',
+            '@typescript-eslint/require-await': 'warn',
+          },
+        },
+      ],
+    }),
+    {
+      // .next folder added to ignores. This is otherwise being ESLinted
+      ignores: ['**/.next/'],
+    },
+  ]),
+];
+export default eslintConfig;
+/*
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+);
+*/
+/*
+export default [
+  ...fixupConfigRules(
+    compat.extends(
+      // section 1
+      'eslint:recommended',
+      'plugin:n/recommended',
+      'plugin:import/recommended',
+      'next/core-web-vitals',
+      'plugin:prettier/recommended',
+
+      // section 2
+      'plugin:@typescript-eslint/recommended',
+      'plugin:@typescript-eslint/recommended-requiring-type-checking',
+      'plugin:import/typescript',
+      'plugin:@tanstack/eslint-plugin-query/recommended',
+    ),
+  ),
+  {
+    rules: {
+      'n/no-extraneous-import': [
+        'error',
+        {
+          allowModules: ['@styles/globals.css'],
+        },
+      ],
+
+      // section 1
+
+      'react/no-unstable-nested-components': 'warn',
+      'import/no-dynamic-require': 'error',
+      'import/no-absolute-path': 'error',
+      'import/no-useless-path-segments': 'warn',
+      'import/newline-after-import': 'warn',
+      'prettier/prettier': 'warn',
+      'no-unused-vars': 'warn',
+      'prefer-const': 'warn',
+      'no-debugger': 'warn',
+      'no-console': 'off',
+
+      // section 2
+
+      'no-dupe-class-members': 'off',
+      'no-undef': 'off',
+      'n/no-missing-import': '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',
+      'prefer-const': 'warn',
+      '@typescript-eslint/restrict-plus-operands': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/require-await': 'warn',
+    },
+    /*
+    plugins: {
+      '@tanstack/query': tanstackQuery,
+    },
+},
+];
+*/