From be67cf31e5b8cb0a0d9fbe61d83e0c0618d0b14c Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Wed, 28 Jun 2023 06:44:20 +0000
Subject: [PATCH] Removes usages of Legacy Components that are not covered by
 #5006 (#5763)

* deletes unused component: `DiagnosisSelect`

* updates SwitchV2 to use new components

* updates consultationform to use new fielderror

* replaces error component in doctor capacity

* deletes unused externalresultbodyselector

* use new user select field in shift details update form
---
 src/Components/Common/DiagnosisSelect.tsx     | 84 -------------------
 .../Common/UserAutocompleteFormField.tsx      |  9 +-
 src/Components/Common/components/Switch.tsx   |  5 +-
 .../ExternalResultLocalbodySelector.tsx       | 61 --------------
 src/Components/Facility/ConsultationForm.tsx  |  9 +-
 src/Components/Facility/DoctorCapacity.tsx    |  5 +-
 .../Shifting/ShiftDetailsUpdate.tsx           | 39 ++++-----
 7 files changed, 32 insertions(+), 180 deletions(-)
 delete mode 100644 src/Components/Common/DiagnosisSelect.tsx
 delete mode 100644 src/Components/ExternalResult/ExternalResultLocalbodySelector.tsx

diff --git a/src/Components/Common/DiagnosisSelect.tsx b/src/Components/Common/DiagnosisSelect.tsx
deleted file mode 100644
index 1440b70e6b0..00000000000
--- a/src/Components/Common/DiagnosisSelect.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useState, useMemo } from "react";
-import { useDispatch } from "react-redux";
-import { listICD11Diagnosis } from "../../Redux/actions";
-import { LegacyAutoCompleteAsyncField } from "./HelperInputFields";
-import { debounce } from "lodash";
-import { ICD11DiagnosisModel } from "../Facility/models";
-
-interface DiagnosisSelectProps {
-  name: string;
-  margin?: string;
-  errors?: string;
-  className?: string;
-  searchAll?: boolean;
-  multiple?: boolean;
-  facility?: string;
-  location?: string;
-  showAll?: boolean;
-  selected: ICD11DiagnosisModel[] | null;
-  setSelected: (selected: ICD11DiagnosisModel[] | null) => void;
-}
-
-export const DiagnosisSelect = (props: DiagnosisSelectProps) => {
-  const { name, selected, setSelected, margin, errors, className = "" } = props;
-  const dispatchAction: any = useDispatch();
-  const [isLoading, setIsLoading] = useState(false);
-  const [diagnosisList, setDiagnosisList] = useState<
-    Array<ICD11DiagnosisModel>
-  >([]);
-
-  const handleValueChange = (current: ICD11DiagnosisModel[] | null) => {
-    if (!current) {
-      setDiagnosisList([]);
-      setIsLoading(false);
-    }
-    setSelected(current);
-  };
-
-  const handelSearch = (e: any) => {
-    setIsLoading(true);
-    fetchDiagnosis(e.target.value);
-    setIsLoading(false);
-  };
-
-  const fetchDiagnosis = useMemo(
-    () =>
-      debounce(async (text: string) => {
-        const res = await dispatchAction(
-          listICD11Diagnosis({ query: text }, "")
-        );
-
-        if (res && res.data) {
-          setDiagnosisList(res.data);
-        }
-      }, 300),
-    [dispatchAction]
-  );
-
-  return (
-    <LegacyAutoCompleteAsyncField
-      name={name}
-      multiple={true}
-      variant="outlined"
-      margin={margin}
-      defaultValue={selected}
-      options={diagnosisList}
-      onSearch={handelSearch}
-      onChange={(e: object, selected: ICD11DiagnosisModel[]) =>
-        handleValueChange(selected)
-      }
-      loading={isLoading}
-      placeholder="Search diagnosis"
-      noOptionsText="No results found"
-      renderOption={(option: ICD11DiagnosisModel) => <div>{option.label}</div>}
-      getOptionSelected={(
-        option: ICD11DiagnosisModel,
-        value: ICD11DiagnosisModel
-      ) => option.id === value.id}
-      getOptionLabel={(option: ICD11DiagnosisModel) => option?.label || ""}
-      filterOptions={(options: ICD11DiagnosisModel[]) => options}
-      errors={errors}
-      className={className}
-    />
-  );
-};
diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
index ba2e2cd19e6..ceb7d6a3045 100644
--- a/src/Components/Common/UserAutocompleteFormField.tsx
+++ b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -1,5 +1,5 @@
 import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
-import { getUserList } from "../../Redux/actions";
+import { getFacilityUsers, getUserList } from "../../Redux/actions";
 import { Autocomplete } from "../Form/FormFields/Autocomplete";
 import FormField from "../Form/FormFields/FormField";
 import {
@@ -10,6 +10,7 @@ import { UserModel } from "../Users/models";
 
 type Props = FormFieldBaseProps<UserModel> & {
   placeholder?: string;
+  facilityId?: string;
 };
 
 export default function UserAutocompleteFormField(props: Props) {
@@ -32,7 +33,11 @@ export default function UserAutocompleteFormField(props: Props) {
         optionDescription={(option) => `${option.user_type}`}
         optionValue={(option) => option}
         onQuery={(query) =>
-          fetchOptions(getUserList({ limit: 5, offset: 0, search_text: query }))
+          fetchOptions(
+            props.facilityId
+              ? getFacilityUsers(props.facilityId)
+              : getUserList({ limit: 5, offset: 0, search_text: query })
+          )
         }
         isLoading={isLoading}
       />
diff --git a/src/Components/Common/components/Switch.tsx b/src/Components/Common/components/Switch.tsx
index 70b311f7fd4..f20b4c29d41 100644
--- a/src/Components/Common/components/Switch.tsx
+++ b/src/Components/Common/components/Switch.tsx
@@ -1,5 +1,4 @@
-import { FieldLabel } from "../../Form/FormFields/FormField";
-import { LegacyErrorHelperText } from "../HelperInputFields";
+import { FieldErrorText, FieldLabel } from "../../Form/FormFields/FormField";
 
 type SwitchProps<T> = {
   name?: string;
@@ -51,7 +50,7 @@ export default function SwitchV2<T>(props: SwitchProps<T>) {
           );
         })}
       </ul>
-      <LegacyErrorHelperText error={props.error} />
+      <FieldErrorText error={props.error} />
     </div>
   );
 }
diff --git a/src/Components/ExternalResult/ExternalResultLocalbodySelector.tsx b/src/Components/ExternalResult/ExternalResultLocalbodySelector.tsx
deleted file mode 100644
index 5600dffafa2..00000000000
--- a/src/Components/ExternalResult/ExternalResultLocalbodySelector.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useState } from "react";
-import { LegacySelectField } from "../Common/HelperInputFields";
-import { useTranslation } from "react-i18next";
-import { FieldLabel } from "../Form/FormFields/FormField";
-
-export const ExternalResultLocalbodySelector = (props: any) => {
-  const [localBody, setLocalBody] = useState(0);
-  const { t } = useTranslation();
-  const selectedLocalBody = props.lsgs?.find(
-    (item: any) => item.id == localBody
-  );
-
-  const wards = selectedLocalBody?.wards;
-  return (
-    <div className="pb-2">
-      <div className="space-y-1">
-        <label
-          id="listbox-label"
-          className="block text-sm leading-5 font-medium text-gray-700"
-        >
-          {t("assigned_to")}
-        </label>
-
-        <div className="md:col-span-2">
-          <FieldLabel id="local_body-label" required={true}>
-            {t("local_body")}
-          </FieldLabel>
-          <LegacySelectField
-            name="local_body"
-            variant="outlined"
-            margin="dense"
-            value={localBody}
-            options={props.lsgs}
-            optionValue="name"
-            onChange={(e) => {
-              setLocalBody(e.target.value);
-            }}
-          />
-        </div>
-        <div className="md:col-span-2">
-          <FieldLabel id="ward-label" required={true}>
-            {t("Ward")}
-          </FieldLabel>
-          {wards && (
-            <LegacySelectField
-              name="ward"
-              variant="outlined"
-              margin="dense"
-              options={wards
-                ?.sort((a: any, b: any) => a.number - b.number)
-                .map((e: any) => {
-                  return { id: e.id, name: e.number + ": " + e.name };
-                })}
-              optionValue="name"
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index b744a9c01ce..fa141aae059 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -19,7 +19,6 @@ import {
 } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import { FacilitySelect } from "../Common/FacilitySelect";
-import { LegacyErrorHelperText } from "../Common/HelperInputFields";
 import { BedModel, FacilityModel } from "./models";
 import { OnlineUsersSelect } from "../Common/OnlineUsersSelect";
 import { UserModel } from "../Users/models";
@@ -36,7 +35,7 @@ import { ICD11DiagnosisModel } from "./models";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { FieldChangeEventHandler } from "../Form/FormFields/Utils";
-import { FieldLabel } from "../Form/FormFields/FormField";
+import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField";
 import PatientCategorySelect from "../Patient/PatientCategorySelect";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
@@ -1140,7 +1139,7 @@ export const ConsultationForm = (props: any) => {
                                 });
                               }}
                             />
-                            <LegacyErrorHelperText
+                            <FieldErrorText
                               error={state.errors.investigation}
                             />
                           </div>
@@ -1159,9 +1158,7 @@ export const ConsultationForm = (props: any) => {
                                 });
                               }}
                             />
-                            <LegacyErrorHelperText
-                              error={state.errors.procedure}
-                            />
+                            <FieldErrorText error={state.errors.procedure} />
                           </div>
                           <div
                             className="col-span-6"
diff --git a/src/Components/Facility/DoctorCapacity.tsx b/src/Components/Facility/DoctorCapacity.tsx
index fd9800da516..794f846ab2f 100644
--- a/src/Components/Facility/DoctorCapacity.tsx
+++ b/src/Components/Facility/DoctorCapacity.tsx
@@ -4,12 +4,11 @@ import { DOCTOR_SPECIALIZATION } from "../../Common/constants";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { createDoctor, getDoctor, listDoctor } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-import { LegacyErrorHelperText } from "../Common/HelperInputFields";
 import { DoctorModal, OptionsType } from "./models";
 import ButtonV2, { Cancel } from "../Common/components/ButtonV2";
 import SelectMenuV2 from "../Form/SelectMenuV2";
 import TextFormField from "../Form/FormFields/TextFormField";
-import { FieldLabel } from "../Form/FormFields/FormField";
+import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField";
 import { FieldChangeEventHandler } from "../Form/FormFields/Utils";
 
 interface DoctorCapacityProps extends DoctorModal {
@@ -230,7 +229,7 @@ export const DoctorCapacity = (props: DoctorCapacityProps) => {
               }
               disabled={!!id}
             />
-            <LegacyErrorHelperText error={state.errors.area} />
+            <FieldErrorText error={state.errors.area} />
           </div>
           <div>
             <TextFormField
diff --git a/src/Components/Shifting/ShiftDetailsUpdate.tsx b/src/Components/Shifting/ShiftDetailsUpdate.tsx
index 02fa1811f2d..1008340db16 100644
--- a/src/Components/Shifting/ShiftDetailsUpdate.tsx
+++ b/src/Components/Shifting/ShiftDetailsUpdate.tsx
@@ -23,7 +23,6 @@ import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField.js";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
-import { UserSelect } from "../Common/UserSelect";
 import loadable from "@loadable/component";
 import { parsePhoneNumberFromString } from "libphonenumber-js";
 import useAppHistory from "../../Common/hooks/useAppHistory";
@@ -34,6 +33,8 @@ import CircularProgress from "../Common/components/CircularProgress.js";
 import Card from "../../CAREUI/display/Card";
 import RadioFormField from "../Form/FormFields/RadioFormField.js";
 import Page from "../Common/components/Page.js";
+import UserAutocompleteFormField from "../Common/UserAutocompleteFormField.js";
+import { UserModel } from "../Users/models.js";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -47,7 +48,7 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
   const dispatchAction: any = useDispatch();
   const [qParams, _] = useQueryParams();
   const [isLoading, setIsLoading] = useState(true);
-  const [assignedUser, SetAssignedUser] = useState(null);
+  const [assignedUser, SetAssignedUser] = useState<UserModel>();
   const [assignedUserLoading, setAssignedUserLoading] = useState(false);
   const [consultationData, setConsultationData] = useState<ConsultationModel>(
     {} as ConsultationModel
@@ -158,7 +159,8 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
     return !isInvalidForm;
   };
 
-  const handleOnSelect = (user: any) => {
+  const handleAssignedUserSelect = (event: FieldChangeEvent<UserModel>) => {
+    const user = event.value;
     const form = { ...state.form };
     form["assigned_to"] = user?.id;
     SetAssignedUser(user);
@@ -320,24 +322,19 @@ export const ShiftDetailsUpdate = (props: patientShiftProps) => {
             className="bg-white w-full md:leading-5 mt-2 md:col-span-1"
           />
 
-          {wartime_shifting && (
-            <div>
-              <FieldLabel>{t("assigned_to")}</FieldLabel>
-              {assignedUserLoading ? (
-                <CircularProgress />
-              ) : (
-                <UserSelect
-                  multiple={false}
-                  selected={assignedUser}
-                  setSelected={handleOnSelect}
-                  errors={""}
-                  facilityId={
-                    state.form?.shifting_approving_facility_object?.id
-                  }
-                />
-              )}
-            </div>
-          )}
+          {wartime_shifting &&
+            (assignedUserLoading ? (
+              <CircularProgress />
+            ) : (
+              <UserAutocompleteFormField
+                name="assigned_to"
+                label={t("assigned_to")}
+                value={assignedUser}
+                onChange={handleAssignedUserSelect}
+                facilityId={state.form?.shifting_approving_facility_object?.id}
+                error={state.errors.assigned_to}
+              />
+            ))}
 
           {wartime_shifting && (
             <div>