fix issues w. state handling of DiagnosisSelect

ohcnetwork · Dec 21, 2022 · 771e215 · 771e215
1 parent cf2f2be
commit 771e215
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 32 deletions.
diff --git a/src/Components/Common/DiagnosisSelectFormField.tsx b/src/Components/Common/DiagnosisSelectFormField.tsx
@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-import CareIcon from "../../CAREUI/icons/CareIcon";
 import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
 import { listICD11Diagnosis } from "../../Redux/actions";
 import { ICD11DiagnosisModel } from "../Facility/models";
@@ -11,24 +9,15 @@ import {
 } from "../Form/FormFields/Utils";
 
 type Props =
-  // | ({ multiple?: false | undefined } & FormFieldBaseProps<string>) // uncomment when single select form field is required and implemented.
+  // | ({ multiple?: false | undefined } & FormFieldBaseProps<ICD11DiagnosisModel>) // uncomment when single select form field is required and implemented.
   { multiple: true } & FormFieldBaseProps<ICD11DiagnosisModel[]>;
 
 export function DiagnosisSelectFormField(props: Props) {
   const { name } = props;
   const handleChange = resolveFormFieldChangeEventHandler(props);
 
-  const {
-    fetchOptions,
-    isLoading,
-    selectedOptions,
-    options,
-    setSelectedOptions,
-  } = useAsyncOptions<ICD11DiagnosisModel>();
-
-  useEffect(() => {
-    handleChange({ name, value: selectedOptions });
-  }, [selectedOptions]);
+  const { fetchOptions, isLoading, options } =
+    useAsyncOptions<ICD11DiagnosisModel>("id");
 
   if (!props.multiple) {
     return (
@@ -43,17 +32,13 @@ export function DiagnosisSelectFormField(props: Props) {
       <AutocompleteMutliSelect
         id={props.id}
         disabled={props.disabled}
-        value={selectedOptions}
-        options={options}
+        value={props.value || []}
+        options={options(props.value)}
         optionLabel={(option) => option.label}
         optionValue={(option) => option}
         onQuery={(query) => fetchOptions(listICD11Diagnosis({ query }, ""))}
-        dropdownIcon={
-          isLoading && (
-            <CareIcon className="care-l-spinner animate-spin -mb-1.5" />
-          )
-        }
-        onChange={setSelectedOptions}
+        isLoading={isLoading}
+        onChange={(value) => handleChange({ name, value })}
       />
     </FormField>
   );

diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
@@ -78,9 +78,7 @@ type FormDetails = {
   admission_date?: Date;
   discharge_date: null;
   referred_to: string;
-  icd11_diagnoses: string[];
   icd11_diagnoses_object: ICD11DiagnosisModel[];
-  icd11_provisional_diagnoses: string[];
   icd11_provisional_diagnoses_object: ICD11DiagnosisModel[];
   verified_by: string;
   is_kasp: BooleanStrings;
@@ -121,9 +119,7 @@ const initForm: FormDetails = {
   admission_date: new Date(),
   discharge_date: null,
   referred_to: "",
-  icd11_diagnoses: [],
   icd11_diagnoses_object: [],
-  icd11_provisional_diagnoses: [],
   icd11_provisional_diagnoses_object: [],
   verified_by: "",
   is_kasp: "false",
@@ -496,8 +492,9 @@ export const ConsultationForm = (props: any) => {
         prescribed_medication: state.form.prescribed_medication,
         discharge_date: state.form.discharge_date,
         ip_no: state.form.ip_no,
-        icd11_diagnoses: state.form.icd11_diagnoses,
-        icd11_provisional_diagnoses: state.form.icd11_provisional_diagnoses,
+        icd11_diagnoses: state.form.icd11_diagnoses_object.map((o) => o.id),
+        icd11_provisional_diagnoses:
+          state.form.icd11_provisional_diagnoses_object.map((o) => o.id),
         verified_by: state.form.verified_by,
         discharge_advice: dischargeAdvice,
         prn_prescription: PRNAdvice,
@@ -773,13 +770,13 @@ export const ConsultationForm = (props: any) => {
         />
 
         <DiagnosisSelectFormField
-          {...field("icd11_provisional_diagnoses")}
+          {...field("icd11_provisional_diagnoses_object")}
           multiple
           label="Provisional Diagnosis"
         />
 
         <DiagnosisSelectFormField
-          {...field("icd11_diagnoses")}
+          {...field("icd11_diagnoses_object")}
           multiple
           label="Diagnosis"
         />

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -201,8 +201,10 @@ export interface CurrentBed {
   meta: Record<string, any>;
 }
 
-export interface ICD11DiagnosisModel {
+// Voluntarily made as `type` for it to achieve type-safety when used with
+// `useAsyncOptions<ICD11DiagnosisModel>`
+export type ICD11DiagnosisModel = {
   id: string;
   label: string;
   parentId: string | null;
-}
+};