upgraded eslint and fixed errors

zalexa19 · zalexa19 · commit deb3ed552cc4 · 2026-02-07T15:28:54.000+01:00
diff --git a/client/eslint.config.js b/client/eslint.config.js
@@ -1,27 +1,33 @@
-import js from '@eslint/js';
+import { globalIgnores } from 'eslint/config';
 import globals from 'globals';
+import js from '@eslint/js';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import tseslint from 'typescript-eslint';
-import { globalIgnores } from 'eslint/config';
 
 export default tseslint.config([
   globalIgnores(['dist', 'node_modules']),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
     languageOptions: {
       ecmaVersion: 2020,
       globals: {
         ...globals.browser,
       },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
     },
     rules: {
+      ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     },
   },
diff --git a/client/src/features/trainee-profile/education/strikes/StrikeDetailsModal.tsx b/client/src/features/trainee-profile/education/strikes/StrikeDetailsModal.tsx
@@ -15,10 +15,10 @@ import {
   Typography,
 } from '@mui/material';
 import { Strike, StrikeReason } from '../../../../data/types/Trainee';
-import { useEffect, useState } from 'react';
 
 import { LoadingButton } from '@mui/lab';
 import { formatDate } from '../../utils/dateHelper';
+import { useState } from 'react';
 
 interface StrikeDetailsModalProps {
   isOpen: boolean;
@@ -27,7 +27,7 @@ interface StrikeDetailsModalProps {
   onClose: () => void;
   onConfirmAdd: (strike: Strike) => void;
   onConfirmEdit: (strike: Strike) => void;
-  strikeToEdit: Strike | null;
+  initialStrike: Strike | null;
 }
 
 export const StrikeDetailsModal = ({
@@ -37,47 +37,22 @@ export const StrikeDetailsModal = ({
   onClose,
   onConfirmAdd,
   onConfirmEdit,
-  strikeToEdit,
+  initialStrike,
 }: StrikeDetailsModalProps) => {
   const [strikeFields, setStrikeFields] = useState<Strike>({
-    id: '',
-    date: new Date(),
-    reporterID: '',
-    comments: '',
-    reason: null,
+    id: initialStrike?.id || '',
+    date: initialStrike?.date || new Date(),
+    reporterID: initialStrike?.reporterID || '',
+    comments: initialStrike?.comments || '',
+    reason: initialStrike?.reason || null,
   } as Strike);
 
   const [commentsRequiredError, setCommentsRequiredError] = useState<boolean>(false);
   const [reasonRequiredError, setReasonRequiredError] = useState<boolean>(false);
-  const [isEditMode, setIsEditMode] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (strikeToEdit) {
-      setStrikeFields(strikeToEdit);
-      setIsEditMode(true);
-      return;
-    } else {
-      setIsEditMode(false);
-    }
-    resetForm();
-  }, [strikeToEdit]);
-
-  const resetForm = () => {
-    setStrikeFields({
-      id: '',
-      date: new Date(),
-      reporterID: '',
-      reason: null,
-      comments: '',
-    } as Strike);
-
-    setCommentsRequiredError(false);
-    setReasonRequiredError(false);
-  };
+  const isEditMode = Boolean(initialStrike);
 
   const handleClose = () => {
     onClose();
-    resetForm();
   };
   const handleStrikeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -109,11 +84,10 @@ export const StrikeDetailsModal = ({
       return;
     }
 
-    if (strikeToEdit) {
+    if (initialStrike) {
       onConfirmEdit(strikeFields);
     } else {
       onConfirmAdd(strikeFields);
-      resetForm();
     }
   };
 
diff --git a/client/src/features/trainee-profile/education/strikes/StrikesComponent.tsx b/client/src/features/trainee-profile/education/strikes/StrikesComponent.tsx
@@ -41,6 +41,7 @@ export const StrikesComponent = () => {
   };
 
   const onConfirmAdd = async (strike: Strike) => {
+    if (modalError) setModalError('');
     addStrike(strike, {
       onSuccess: handleSuccess,
       onError: (e) => {
@@ -50,6 +51,7 @@ export const StrikesComponent = () => {
   };
 
   const onConfirmEdit = (strike: Strike) => {
+    if (modalError) setModalError('');
     editStrike(strike, {
       onSuccess: handleSuccess,
       onError: (e) => {
@@ -128,13 +130,14 @@ export const StrikesComponent = () => {
           <StrikesList strikes={strikes || []} onClickEdit={onClickEdit} onClickDelete={onClickDelete} />
         )}
         <StrikeDetailsModal
+          key={strikeToEdit?.id || `add-strike-${isModalOpen}`} // Use strike ID for edit mode, and a unique key for add mode to force remounting
           isLoading={addStrikeLoading || editStrikeLoading}
           error={modalError}
           isOpen={isModalOpen}
           onClose={closeModal}
           onConfirmAdd={onConfirmAdd}
           onConfirmEdit={onConfirmEdit}
-          strikeToEdit={strikeToEdit}
+          initialStrike={strikeToEdit}
         />
       </div>
     </>
diff --git a/client/src/features/trainee-profile/education/tests/TestDetailsModal.tsx b/client/src/features/trainee-profile/education/tests/TestDetailsModal.tsx
@@ -15,10 +15,10 @@ import {
   Typography,
 } from '@mui/material';
 import { Test, TestResult, TestType } from '../../../../data/types/Trainee';
-import { useEffect, useState } from 'react';
 
 import { LoadingButton } from '@mui/lab';
 import { formatDate } from '../../utils/dateHelper';
+import { useState } from 'react';
 
 type TestDetailsModalProps = {
   isOpen: boolean;
@@ -27,7 +27,7 @@ type TestDetailsModalProps = {
   onClose: () => void;
   onConfirmAdd: (t: Test) => void;
   onConfirmEdit: (t: Test) => void;
-  testToEdit: Test | null;
+  initialTest: Test | null;
 };
 
 export const TestDetailsModal = ({
@@ -37,48 +37,25 @@ export const TestDetailsModal = ({
   onClose,
   onConfirmAdd,
   onConfirmEdit,
-  testToEdit,
+  initialTest,
 }: TestDetailsModalProps) => {
   const [testFields, setTestFields] = useState<Partial<Test>>({
-    id: '',
-    date: new Date(),
-    type: undefined,
-    score: undefined,
-    result: undefined,
-    comments: '',
+    id: initialTest?.id || '',
+    date: initialTest?.date || new Date(),
+    type: initialTest?.type || undefined,
+    score: initialTest?.score || undefined,
+    result: initialTest?.result || undefined,
+    comments: initialTest?.comments || '',
   });
 
   const [typeError, setTypeError] = useState(false);
   const [resultError, setResultError] = useState(false);
   const [scoreError, setScoreError] = useState(false);
 
-  const isEditMode = Boolean(testToEdit);
-
-  useEffect(() => {
-    if (testToEdit) {
-      setTestFields(testToEdit);
-    } else {
-      resetForm();
-    }
-  }, [testToEdit]);
-
-  const resetForm = () => {
-    setTestFields({
-      id: '',
-      date: new Date(),
-      type: undefined,
-      score: undefined,
-      result: undefined,
-      comments: '',
-    });
-    setTypeError(false);
-    setResultError(false);
-    setScoreError(false);
-  };
+  const isEditMode = Boolean(initialTest);
 
   const handleClose = () => {
     onClose();
-    resetForm();
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -121,7 +98,6 @@ export const TestDetailsModal = ({
 
     if (isEditMode) onConfirmEdit(testFields as Test);
     else onConfirmAdd(testFields as Test);
-    resetForm();
   };
 
   return (
diff --git a/client/src/features/trainee-profile/education/tests/TestsComponent.tsx b/client/src/features/trainee-profile/education/tests/TestsComponent.tsx
@@ -14,7 +14,7 @@ export const TestsComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   const [modalError, setModalError] = useState<string>('');
-  const [testToEdit, setTestToEdit] = useState<Test | null>(null);
+  const [initialTest, setInitialTest] = useState<Test | null>(null);
   const { traineeId } = useTraineeProfileContext();
   const { mutate: addTest, isPending: addTestLoading } = useAddTest(traineeId);
   const { mutate: deleteTest, isPending: deleteTestLoading, error: deleteTestError } = useDeleteTest(traineeId);
@@ -27,7 +27,7 @@ export const TestsComponent = () => {
   const handleSuccess = () => {
     queryClient.invalidateQueries({ queryKey: ['tests', traineeId] });
     setIsModalOpen(false);
-    setTestToEdit(null);
+    setInitialTest(null);
   };
 
   const getErrorMessage = (error: Error | unknown) => {
@@ -37,11 +37,13 @@ export const TestsComponent = () => {
   const onClickEdit = (id: string) => {
     const test = tests?.find((test) => test.id === id) || null;
 
-    setTestToEdit(test);
+    setInitialTest(test);
     setIsModalOpen(true);
   };
 
   const onConfirmAdd = async (test: Test) => {
+    if (modalError) setModalError('');
+
     addTest(test, {
       onSuccess: handleSuccess,
       onError: (e) => {
@@ -51,6 +53,7 @@ export const TestsComponent = () => {
   };
 
   const onConfirmEdit = (test: Test) => {
+    if (modalError) setModalError('');
     editTest(test, {
       onSuccess: handleSuccess,
       onError: (e) => {
@@ -76,7 +79,7 @@ export const TestsComponent = () => {
    */
   const closeModal = () => {
     setIsModalOpen(false);
-    setTestToEdit(null);
+    setInitialTest(null);
     setModalError('');
   };
 
@@ -127,13 +130,14 @@ export const TestsComponent = () => {
         )}
 
         <TestDetailsModal
+          key={initialTest?.id || `add-test-${isModalOpen}`} // Force remount to reset internal state when opening for a new test
           isLoading={addTestLoading || editTestLoading}
           error={modalError}
           isOpen={isModalOpen}
           onClose={closeModal}
           onConfirmAdd={onConfirmAdd}
           onConfirmEdit={onConfirmEdit}
-          testToEdit={testToEdit}
+          initialTest={initialTest}
         />
       </div>
     </>
diff --git a/client/src/features/trainee-profile/interactions/InteractionsInfo.tsx b/client/src/features/trainee-profile/interactions/InteractionsInfo.tsx
@@ -38,6 +38,7 @@ const InteractionsInfo = () => {
   };
 
   const onConfirmAdd = async (interaction: Interaction) => {
+    if (modalError) setModalError('');
     addInteraction(interaction, {
       onSuccess: handleSuccess,
       onError: (e) => {
@@ -47,6 +48,7 @@ const InteractionsInfo = () => {
   };
 
   const onConfirmEdit = (interaction: Interaction) => {
+    if (modalError) setModalError('');
     editInteraction(interaction, {
       onSuccess: handleSuccess,
       onError: (e) => {
@@ -90,13 +92,14 @@ const InteractionsInfo = () => {
         )}
 
         <InteractionDetailsModal
+          key={interactionToEdit?.id || `add-interaction-${isModalOpen}`} // Use interaction ID for edit mode, and a unique key for add mode to force remounting
           isLoading={addInteractionLoading || editInteractionLoading}
           error={modalError}
           isOpen={isModalOpen}
           onClose={closeModal}
           onConfirmAdd={onConfirmAdd}
           onConfirmEdit={onConfirmEdit}
-          interactionToEdit={interactionToEdit}
+          initialInteraction={interactionToEdit}
         />
       </Box>
     </>
diff --git a/client/src/features/trainee-profile/interactions/components/InteractionDetailsModal.tsx b/client/src/features/trainee-profile/interactions/components/InteractionDetailsModal.tsx
