Migrate ICD11 and Medibase Medicine search to use useQuery (#7381)

* Migrate ICD11 search to useQuery * Migrate Medicine search to useQuery * remove unused redux actions * remove unused redux actions * fix medibase tests * fix-cypress
ohcnetwork · Apr 2, 2024 · 1cc1ed6 · 1cc1ed6
1 parent 2b71cd3
commit 1cc1ed6
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 109 deletions.
diff --git a/cypress/e2e/patient_spec/patient_consultation.cy.ts b/cypress/e2e/patient_spec/patient_consultation.cy.ts
@@ -99,9 +99,8 @@ describe("Patient Consultation in multiple combination", () => {
     cy.verifyNotification("Consultation created successfully");
     // Below code for the prescription module only present while creating a new consultation
     patientPrescription.clickAddPrescription();
-    patientPrescription.interceptMediaBase();
+    patientPrescription.interceptMedibase();
     patientPrescription.selectMedicinebox();
-    patientPrescription.waitForMediabaseStatusCode();
     patientPrescription.selectMedicine(medicineOne);
     patientPrescription.enterDosage("3");
     patientPrescription.selectDosageFrequency("Twice daily");

diff --git a/cypress/e2e/patient_spec/patient_manage.cy.ts b/cypress/e2e/patient_spec/patient_manage.cy.ts
@@ -49,9 +49,8 @@ describe("Patient", () => {
     patientPage.visitPatient("Dummy Patient 4");
     patientPrescription.visitEditPrescriptionPage();
     patientPrescription.clickAddPrescription();
-    patientPrescription.interceptMediaBase();
+    patientPrescription.interceptMedibase();
     patientPrescription.selectMedicinebox();
-    patientPrescription.waitForMediabaseStatusCode();
     patientPrescription.selectMedicine("DOLO");
     patientPrescription.enterDosage("4");
     patientPrescription.selectDosageFrequency("Twice daily");

diff --git a/cypress/pageobject/Patient/PatientPrescription.ts b/cypress/pageobject/Patient/PatientPrescription.ts
@@ -5,8 +5,8 @@ export class PatientPrescription {
       .click();
   }
 
-  interceptMediaBase() {
-    cy.intercept("GET", "**/api/v1/medibase/**").as("getMediaBase");
+  interceptMedibase() {
+    cy.intercept("GET", "**/api/v1/medibase/**").as("getMedibase");
   }
 
   selectMedicine(medicine: string) {
@@ -22,8 +22,8 @@ export class PatientPrescription {
     ).click();
   }
 
-  waitForMediabaseStatusCode() {
-    cy.wait("@getMediaBase").its("response.statusCode").should("eq", 200);
+  waitForMedibaseStatusCode() {
+    cy.wait("@getMedibase").its("response.statusCode").should("eq", 200);
   }
 
   enterDosage(doseAmount: string) {

diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
@@ -6,10 +6,10 @@ import {
   CreateDiagnosis,
   ICD11DiagnosisModel,
 } from "../types";
-import { useAsyncOptions } from "../../../Common/hooks/useAsyncOptions";
-import { listICD11Diagnosis } from "../../../Redux/actions";
 import ConditionVerificationStatusMenu from "../ConditionVerificationStatusMenu";
-import { classNames } from "../../../Utils/utils";
+import { classNames, mergeQueryOptions } from "../../../Utils/utils";
+import useQuery from "../../../Utils/request/useQuery";
+import routes from "../../../Redux/api";
 
 interface AddICD11DiagnosisProps {
   className?: string;
@@ -24,8 +24,7 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
   const [adding, setAdding] = useState(false);
   const hasError = !!props.disallowed.find((d) => d?.id === selected?.id);
 
-  const { fetchOptions, isLoading, options } =
-    useAsyncOptions<ICD11DiagnosisModel>("id");
+  const { data, loading, refetch } = useQuery(routes.listICD11Diagnosis);
 
   const handleAdd = async (status: CreateDiagnosis["verification_status"]) => {
     if (!selected) return;
@@ -56,11 +55,15 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
         placeholder={t("search_icd11_placeholder")}
         value={selected}
         onChange={(e) => setSelected(e.value)}
-        options={options(selected ? [selected] : undefined)}
+        options={mergeQueryOptions(
+          selected ? [selected] : [],
+          data ?? [],
+          (obj) => obj.id
+        )}
         optionLabel={(option) => option.label}
         optionValue={(option) => option}
-        onQuery={(query) => fetchOptions(listICD11Diagnosis({ query }))}
-        isLoading={isLoading}
+        onQuery={(query) => refetch({ query: { query } })}
+        isLoading={loading}
         error={hasError ? t("diagnosis_already_added") : undefined}
       />
       <ConditionVerificationStatusMenu

diff --git a/src/Components/Medicine/MedibaseAutocompleteFormField.tsx b/src/Components/Medicine/MedibaseAutocompleteFormField.tsx
@@ -1,28 +1,27 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Switch from "../../CAREUI/interactive/Switch";
-import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
-import { listMedibaseMedicines } from "../../Redux/actions";
 import { Autocomplete } from "../Form/FormFields/Autocomplete";
 import FormField from "../Form/FormFields/FormField";
 import {
   FormFieldBaseProps,
   useFormFieldPropsResolver,
 } from "../Form/FormFields/Utils";
 import { MedibaseMedicine } from "./models";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { mergeQueryOptions } from "../../Utils/utils";
 
 export default function MedibaseAutocompleteFormField(
   props: FormFieldBaseProps<MedibaseMedicine>
 ) {
   const field = useFormFieldPropsResolver(props);
-  const { isLoading, options, fetchOptions } =
-    useAsyncOptions<MedibaseMedicine>("id");
 
   const [query, setQuery] = useState("");
   const [type, setType] = useState<MedibaseMedicine["type"]>();
 
-  useEffect(() => {
-    fetchOptions(listMedibaseMedicines(query, type));
-  }, [query, type]);
+  const { data, loading } = useQuery(routes.listMedibaseMedicines, {
+    query: { query, type },
+  });
 
   return (
     <FormField
@@ -49,7 +48,11 @@ export default function MedibaseAutocompleteFormField(
         value={field.value}
         required
         onChange={field.handleChange}
-        options={options(field.value && !query && [field.value])}
+        options={mergeQueryOptions(
+          field.value && !query ? [field.value] : [],
+          data ?? [],
+          (obj) => obj.id
+        )}
         optionLabel={(option) => option.name.toUpperCase()}
         optionDescription={(option) => <OptionDescription medicine={option} />}
         optionValue={(option) => option}
@@ -61,7 +64,7 @@ export default function MedibaseAutocompleteFormField(
           )
         }
         onQuery={setQuery}
-        isLoading={isLoading}
+        isLoading={loading}
       />
     </FormField>
   );

diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
@@ -1,16 +1,11 @@
 import { HCXClaimModel, HCXPolicyModel } from "../Components/HCX/models";
-import { MedibaseMedicine } from "../Components/Medicine/models";
 import { fireRequest } from "./fireRequest";
 
 // Facility
 export const getUserList = (params: object, key?: string) => {
   return fireRequest("userList", [], params, null, key);
 };
 
-export const getAnyFacility = (id: number | string, key?: string) => {
-  return fireRequest("getAnyFacility", [], {}, { id: id }, key);
-};
-
 export const getFacilityUsers = (id: string, params?: object) => {
   return fireRequest(
     "getFacilityUsers",
@@ -68,9 +63,6 @@ export const getAllPatient = (params: object, altKey: string) => {
 export const getPatient = (pathParam: object) => {
   return fireRequest("getPatient", [], {}, pathParam);
 };
-export const patchPatient = (params: object, pathParam: object) => {
-  return fireRequest("patchPatient", [], params, pathParam);
-};
 
 // District/State/Local body/ward
 export const getDistrictByName = (params: object) => {
@@ -145,80 +137,6 @@ export const externalResultList = (params: object, altKey: string) => {
   return fireRequest("externalResultList", [], params, null, altKey);
 };
 
-export const externalResult = (pathParam: object) => {
-  return fireRequest("externalResult", [], {}, pathParam);
-};
-
-// Investigation
-
-export const listInvestigations = (
-  params: object,
-  altKey = "listInvestigations"
-) => {
-  return fireRequest("listInvestigations", [], params, null, altKey);
-};
-
-export const listInvestigationGroups = (params: object) => {
-  return fireRequest("listInvestigationGroups", [], params);
-};
-
-export const createInvestigation = (
-  params: object,
-  consultation_external_id: string
-) => {
-  return fireRequest("createInvestigation", [], params, {
-    consultation_external_id: consultation_external_id,
-  });
-};
-
-export const getInvestigationSessions = (
-  params: object,
-  consultation_external_id: string
-) => {
-  return fireRequest("getInvestigationSessions", [], params, {
-    consultation_external_id: consultation_external_id,
-  });
-};
-
-export const getInvestigation = (
-  params: object,
-  consultation_external_id: string
-) => {
-  return fireRequest("getInvestigation", [], params, {
-    consultation_external_id: consultation_external_id,
-  });
-};
-
-export const getPatientInvestigation = (
-  params: object,
-  patient_external_id: string
-) => {
-  return fireRequest("getPatientInvestigation", [], params, {
-    patient_external_id: patient_external_id,
-  });
-};
-
-export const editInvestigation = (
-  params: object,
-  consultation_external_id: string
-) => {
-  return fireRequest("editInvestigation", [], params, {
-    consultation_external_id: consultation_external_id,
-  });
-};
-
-// ICD11
-export const listICD11Diagnosis = (params: object) => {
-  return fireRequest("listICD11Diagnosis", [], params, null);
-};
-// Medibase
-export const listMedibaseMedicines = (
-  query: string,
-  type?: MedibaseMedicine["type"]
-) => {
-  return fireRequest("listMedibaseMedicines", [], { query, type });
-};
-
 // Resource
 export const downloadResourceRequests = (params: object) => {
   return fireRequest("downloadResourceRequests", [], params);

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -68,7 +68,7 @@ import {
   StateModel,
   WardModel,
 } from "../Components/Facility/models";
-import { Prescription } from "../Components/Medicine/models";
+import { MedibaseMedicine, Prescription } from "../Components/Medicine/models";
 import {
   NotificationData,
   PNconfigData,
@@ -1120,6 +1120,7 @@ const routes = {
   // Medibase
   listMedibaseMedicines: {
     path: "/api/v1/medibase/",
+    TRes: Type<MedibaseMedicine[]>(),
   },
 
   // Resource