upgraded eslint and fixed errors

zalexa19 · zalexa19 · commit 1e89e8573155 · 2026-02-06T23:38:56.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;
@@ -40,44 +40,19 @@ export const StrikeDetailsModal = ({
   strikeToEdit,
 }: StrikeDetailsModalProps) => {
   const [strikeFields, setStrikeFields] = useState<Strike>({
-    id: '',
-    date: new Date(),
-    reporterID: '',
-    comments: '',
-    reason: null,
+    id: strikeToEdit?.id || '',
+    date: strikeToEdit?.date || new Date(),
+    reporterID: strikeToEdit?.reporterID || '',
+    comments: strikeToEdit?.comments || '',
+    reason: strikeToEdit?.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(strikeToEdit);
 
   const handleClose = () => {
     onClose();
-    resetForm();
   };
   const handleStrikeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -113,7 +88,6 @@ export const StrikeDetailsModal = ({
       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
@@ -12,6 +12,7 @@ import { useTraineeProfileContext } from '../../context/useTraineeProfileContext
 
 export const StrikesComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [modalKeyCounter, setModalKeyCounter] = useState(0); //unique key to force remounting of the modal
 
   const [modalError, setModalError] = useState<string>('');
   const [strikeToEdit, setStrikeToEdit] = useState<Strike | null>(null);
@@ -67,6 +68,7 @@ export const StrikesComponent = () => {
    * Function to enable adding strikes.
    */
   const onClickAdd = () => {
+    setModalKeyCounter((prevKey) => prevKey + 1); // Increment the key to force remount
     setStrikeToEdit(null);
     setIsModalOpen(true);
   };
@@ -128,6 +130,7 @@ export const StrikesComponent = () => {
           <StrikesList strikes={strikes || []} onClickEdit={onClickEdit} onClickDelete={onClickDelete} />
         )}
         <StrikeDetailsModal
+          key={strikeToEdit ? strikeToEdit.id : modalKeyCounter} // Use strike ID for edit mode, counter for add mode
           isLoading={addStrikeLoading || editStrikeLoading}
           error={modalError}
           isOpen={isModalOpen}
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;
@@ -40,12 +40,12 @@ export const TestDetailsModal = ({
   testToEdit,
 }: TestDetailsModalProps) => {
   const [testFields, setTestFields] = useState<Partial<Test>>({
-    id: '',
-    date: new Date(),
-    type: undefined,
-    score: undefined,
-    result: undefined,
-    comments: '',
+    id: testToEdit?.id || '',
+    date: testToEdit?.date || new Date(),
+    type: testToEdit?.type || undefined,
+    score: testToEdit?.score || undefined,
+    result: testToEdit?.result || undefined,
+    comments: testToEdit?.comments || '',
   });
 
   const [typeError, setTypeError] = useState(false);
@@ -54,31 +54,8 @@ export const TestDetailsModal = ({
 
   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 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
@@ -12,6 +12,7 @@ import { useTraineeProfileContext } from '../../context/useTraineeProfileContext
 
 export const TestsComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [modalKeyCounter, setModalKeyCounter] = useState(0);
 
   const [modalError, setModalError] = useState<string>('');
   const [testToEdit, setTestToEdit] = useState<Test | null>(null);
@@ -68,6 +69,7 @@ export const TestsComponent = () => {
    * Function to enable adding tests.
    */
   const onClickAdd = () => {
+    setModalKeyCounter((prev) => prev + 1);
     setIsModalOpen(true);
   };
 
@@ -127,6 +129,7 @@ export const TestsComponent = () => {
         )}
 
         <TestDetailsModal
+          key={testToEdit ? testToEdit.id : `newTest-${modalKeyCounter}`} // Force remount to reset internal state when opening for a new test
           isLoading={addTestLoading || editTestLoading}
           error={modalError}
           isOpen={isModalOpen}
diff --git a/client/src/features/trainee-profile/interactions/InteractionsInfo.tsx b/client/src/features/trainee-profile/interactions/InteractionsInfo.tsx
@@ -9,6 +9,7 @@ import { useState } from 'react';
 import { useTraineeProfileContext } from '../context/useTraineeProfileContext';
 
 const InteractionsInfo = () => {
+  const [modalKeyCounter, setModalKeyCounter] = useState(0); //unique key to force remounting of the modal
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [modalError, setModalError] = useState<string>('');
   const [interactionToEdit, setInteractionToEdit] = useState<Interaction | null>(null);
@@ -56,6 +57,7 @@ const InteractionsInfo = () => {
   };
 
   const onClickAdd = () => {
+    setModalKeyCounter((prev) => prev + 1); // Force remounting of the modal to reset its internal state
     setIsModalOpen(true);
   };
 
@@ -90,6 +92,7 @@ const InteractionsInfo = () => {
         )}
 
         <InteractionDetailsModal
+          key={interactionToEdit ? `edit-${interactionToEdit.id}` : `addInteraction-${modalKeyCounter}`}
           isLoading={addInteractionLoading || editInteractionLoading}
           error={modalError}
           isOpen={isModalOpen}
diff --git a/client/src/features/trainee-profile/interactions/components/InteractionDetailsModal.tsx b/client/src/features/trainee-profile/interactions/components/InteractionDetailsModal.tsx
@@ -12,12 +12,12 @@ import {
   Typography,
 } from '@mui/material';
 import { Interaction, InteractionType } from '../Interactions';
-import { useEffect, useState } from 'react';
 
 import FormSelect from './FormSelect';
 import FormTextField from './FormTextField';
 import { LoadingButton } from '@mui/lab';
 import { formatDate } from '../../utils/dateHelper';
+import { useState } from 'react';
 
 const types = Object.values(InteractionType);
 
@@ -41,48 +41,22 @@ export const InteractionDetailsModal = ({
   interactionToEdit,
 }: InteractionDetailsModalProps) => {
   const [interactionFields, setInteractionFields] = useState<Partial<Interaction>>({
-    id: '',
-    date: new Date(),
-    type: undefined,
-    title: '',
-    details: '',
-    reporter: undefined,
+    id: interactionToEdit?.id || '',
+    date: interactionToEdit?.date || new Date(),
+    type: interactionToEdit?.type || undefined,
+    title: interactionToEdit?.type || '',
+    details: interactionToEdit?.details || '',
+    reporter: interactionToEdit?.reporter || undefined,
   });
 
   const [typeError, setTypeError] = useState(false);
   const [detailsError, setDetailsError] = useState(false);
   const [titleError, setTitleError] = useState(false);
 
-  const [isEditMode, setIsEditMode] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (interactionToEdit) {
-      setInteractionFields(interactionToEdit);
-      setIsEditMode(true);
-      return;
-    } else {
-      setIsEditMode(false);
-    }
-    resetForm();
-  }, [interactionToEdit]);
-
-  const resetForm = () => {
-    setInteractionFields({
-      id: '',
-      date: new Date(),
-      type: undefined,
-      title: '',
-      details: '',
-      reporter: undefined,
-    });
-    setTypeError(false);
-    setDetailsError(false);
-    setTitleError(false);
-  };
+  const isEditMode = Boolean(interactionToEdit);
 
   const handleClose = () => {
     onClose();
-    resetForm();
   };
 
   const handleChange = (field: keyof Interaction) => (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -132,7 +106,6 @@ export const InteractionDetailsModal = ({
       onConfirmEdit(interactionFields as Interaction);
     } else {
       onConfirmAdd(interactionFields as Interaction);
-      resetForm();
     }
   };
 
