diff --git a/src/Components/Common/DiagnosisSelectFormField.tsx b/src/Components/Common/DiagnosisSelectFormField.tsx index 29e7c1277a4..ae3162ea21b 100644 --- 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) // uncomment when single select form field is required and implemented. + // | ({ multiple?: false | undefined } & FormFieldBaseProps) // uncomment when single select form field is required and implemented. { multiple: true } & FormFieldBaseProps; export function DiagnosisSelectFormField(props: Props) { const { name } = props; const handleChange = resolveFormFieldChangeEventHandler(props); - const { - fetchOptions, - isLoading, - selectedOptions, - options, - setSelectedOptions, - } = useAsyncOptions(); - - useEffect(() => { - handleChange({ name, value: selectedOptions }); - }, [selectedOptions]); + const { fetchOptions, isLoading, options } = + useAsyncOptions("id"); if (!props.multiple) { return ( @@ -43,17 +32,13 @@ export function DiagnosisSelectFormField(props: Props) { option.label} optionValue={(option) => option} onQuery={(query) => fetchOptions(listICD11Diagnosis({ query }, ""))} - dropdownIcon={ - isLoading && ( - - ) - } - onChange={setSelectedOptions} + isLoading={isLoading} + onChange={(value) => handleChange({ name, value })} /> ); diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx index e3084710536..259d17d15c7 100644 --- 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) => { /> diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx index 87fc3bb1d15..8acafb2a323 100644 --- a/src/Components/Facility/models.tsx +++ b/src/Components/Facility/models.tsx @@ -201,8 +201,10 @@ export interface CurrentBed { meta: Record; } -export interface ICD11DiagnosisModel { +// Voluntarily made as `type` for it to achieve type-safety when used with +// `useAsyncOptions` +export type ICD11DiagnosisModel = { id: string; label: string; parentId: string | null; -} +};