BN-84 | Use Zustand Store for DiagnosesForm (#24)

* Add. Zustand package for state management

* BN-84 | Refactor. Use Zustand store for diagnoses form

* BN-84 | Refactor. Remove additional id attribute from diagnosis input entry

* BN-84 | Refactor. Rename title as display in diagnosisinput store

Author: mohan-13

.storybook/main.ts

@@ -54,6 +54,7 @@ const config: StorybookConfig = {
         '@styles': path.resolve(__dirname, '../src/styles'),
         '@types': path.resolve(__dirname, '../src/types'),
         '@utils': path.resolve(__dirname, '../src/utils'),
+        '@stores': path.resolve(__dirname, '../src/stores'),
       };
     }
 

jest.config.ts

@@ -23,6 +23,7 @@ const config: Config.InitialOptions = {
     '@services/(.*)$': ['<rootDir>/src/services/$1'],
     '@types/(.*)$': ['<rootDir>/src/types/$1'],
     '@utils/(.*)$': ['<rootDir>/src/utils/$1'],
+    '@stores/(.*)$': ['<rootDir>/src/stores/$1'],
     '@__mocks__/(.*)$': ['<rootDir>/src/__mocks__/$1'],
   },
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],

package.json

@@ -37,7 +37,8 @@
     "workbox-expiration": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0"
+    "workbox-strategies": "^7.0.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.22.15",

public/locales/locale_en.json

@@ -47,6 +47,7 @@
   "DIAGNOSES_CERTAINTY_ARIA_LABEL": "Diagnoses Certainty",
   "DIAGNOSES_DUPLICATE_ERROR": "This diagnosis has already been added. Please select a different diagnosis.",
   "DIAGNOSES_FORM_TITLE": "Diagnoses",
+  "DROPDOWN_VALUE_REQUIRED": "Please select a value",
   "DIAGNOSES_SEARCH_ARIA_LABEL": "Search for diagnoses",
   "DIAGNOSES_SEARCH_PLACEHOLDER": "Search to add new diagnosis",
   "DIAGNOSES_SELECT_CERTAINTY": "Select Certainty",

public/locales/locale_es.json

@@ -47,6 +47,7 @@
   "DIAGNOSES_CERTAINTY_ARIA_LABEL": "Certeza del Diagnóstico",
   "DIAGNOSES_DUPLICATE_ERROR": "Este diagnóstico ya ha sido agregado. Por favor seleccione un diagnóstico diferente.",
   "DIAGNOSES_FORM_TITLE": "Diagnósticos",
+  "DROPDOWN_VALUE_REQUIRED": "Por favor seleccione un valor",
   "DIAGNOSES_SEARCH_ARIA_LABEL": "Buscar diagnósticos",
   "DIAGNOSES_SEARCH_PLACEHOLDER": "Buscar para agregar un diagnóstico",
   "DIAGNOSES_SELECT_CERTAINTY": "Seleccionar Certeza",

src/components/clinical/consultationPad/ConsultationPad.tsx

@@ -9,9 +9,7 @@ import { Column, Grid, Loading } from '@carbon/react';
 import * as styles from './styles/ConsultationPad.module.scss';
 import BasicForm from '@components/clinical/basicForm/BasicForm';
 import DiagnosesForm from '@components/clinical/diagnosesForm/DiagnosesForm';
-import { SelectedDiagnosisItemProps } from '@components/clinical/diagnosesForm/SelectedDiagnosisItem';
 import { Concept } from '@types/encounterConcepts';
-import { ConceptSearch } from '@types/concepts';
 import { ConsultationBundle } from '@types/consultationBundle';
 import {
   postConsultationBundle,
@@ -24,9 +22,8 @@ import {
   createBundleEntry,
   createConsultationBundle,
 } from '@utils/fhir/consultationBundleCreator';
-import { CERTAINITY_CONCEPTS } from '@constants/concepts';
 import { ERROR_TITLES } from '@constants/errors';
-import { Coding } from 'fhir/r4';
+import { useDiagnosisStore } from '@stores/diagnosisStore';
 
 interface ConsultationPadProps {
   patientUUID: string;
@@ -38,46 +35,13 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
   onClose,
 }) => {
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [selectedDiagnoses, setSelectedDiagnoses] = React.useState<
-    SelectedDiagnosisItemProps[]
-  >([]);
 
   const { t } = useTranslation();
   const { addNotification } = useNotification();
 
-  const handleResultSelection = (selectedItem: ConceptSearch) => {
-    // Create new diagnosis with certainty handler
-    const newDiagnosis: SelectedDiagnosisItemProps = {
-      id: selectedItem.conceptUuid,
-      title: selectedItem.conceptName,
-      certaintyConcepts: CERTAINITY_CONCEPTS,
-      selectedCertainty: null,
-      handleCertaintyChange: (data) => {
-        handleCertaintyChange(selectedItem.conceptUuid, data.selectedItem);
-      },
-    };
-
-    setSelectedDiagnoses([...selectedDiagnoses, newDiagnosis]);
-  };
-
-  const handleRemoveDiagnosis = (index: number) => {
-    setSelectedDiagnoses((prevDiagnoses) =>
-      prevDiagnoses.filter((_, i) => i !== index),
-    );
-  };
-
-  const handleCertaintyChange = (
-    diagnosisId: string,
-    selectedCertainty: Coding | null | undefined,
-  ) => {
-    setSelectedDiagnoses((prevDiagnoses) =>
-      prevDiagnoses.map((diagnosis) =>
-        diagnosis.id === diagnosisId
-          ? { ...diagnosis, selectedCertainty: selectedCertainty || null }
-          : diagnosis,
-      ),
-    );
-  };
+  // Use the diagnosis store
+  const { selectedDiagnoses, validateAllDiagnoses, reset } =
+    useDiagnosisStore();
 
   const {
     locations,
@@ -158,10 +122,16 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
 
   const handleOnPrimaryButtonClick = async () => {
     if (!isSubmitting && canSubmitConsultation) {
+      const isDiagnosesValid = validateAllDiagnoses();
+      if (!isDiagnosesValid) {
+        return;
+      }
+
       try {
         setIsSubmitting(true);
         await submitConsultation();
         setIsSubmitting(false);
+        reset();
         addNotification({
           title: t('CONSULTATION_SUBMITTED_SUCCESS_TITLE'),
           message: t('CONSULTATION_SUBMITTED_SUCCESS_MESSAGE'),
@@ -269,11 +239,7 @@ const ConsultationPad: React.FC<ConsultationPadProps> = ({
             locationSelected={locations[0]}
             defaultDate={formattedDate.formattedResult}
           />
-          <DiagnosesForm
-            handleResultSelection={handleResultSelection}
-            selectedDiagnoses={selectedDiagnoses}
-            handleRemoveDiagnosis={handleRemoveDiagnosis}
-          />
+          <DiagnosesForm />
         </>
       }
     />