refactored hcx api calls to use use query or request

ohcnetwork · Aug 25, 2024 · ae5ecdf · ae5ecdf
1 parent 2e106d1
commit ae5ecdf
Show file tree

Hide file tree

Showing 13 changed files with 259 additions and 304 deletions.
diff --git a/src/Common/hooks/useAsyncOptions.ts b/src/Common/hooks/useAsyncOptions.ts
@@ -1,6 +1,6 @@
-import { debounce } from "lodash-es";
 import { useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
+
+import { debounce } from "lodash-es";
 import { mergeQueryOptions } from "../../Utils/utils";
 
 interface IUseAsyncOptionsArgs {
@@ -25,7 +25,7 @@ interface IUseAsyncOptionsArgs {
  *     ...
  *     options={options(props.value)}
  *     isLoading={isLoading}
- *     onQuery={(query) => fetchOptions(action({ query }))}
+ *     onQuery={(query) => fetchOptions(async () => { ... })}
  *     optionValue={(option) => option}
  *     ...
  *   />
@@ -36,22 +36,18 @@ export function useAsyncOptions<T extends Record<string, unknown>>(
   uniqueKey: keyof T,
   args?: IUseAsyncOptionsArgs,
 ) {
-  const dispatch = useDispatch<any>();
   const [queryOptions, setQueryOptions] = useState<T[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   const fetchOptions = useMemo(
     () =>
-      debounce(async (action: any) => {
+      debounce(async (fetchFn: () => Promise<T[]>) => {
         setIsLoading(true);
-        const res = await dispatch(action);
-        if (res?.data)
-          setQueryOptions(
-            args?.queryResponseExtractor?.(res.data) ?? (res.data as T[]),
-          );
+        const data = await fetchFn();
+        if (data) setQueryOptions(args?.queryResponseExtractor?.(data) ?? data);
         setIsLoading(false);
       }, args?.debounceInterval ?? 300),
-    [dispatch, args?.debounceInterval],
+    [args?.debounceInterval],
   );
 
   const mergeValueWithQueryOptions = (selected?: T[]) => {

diff --git a/src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx b/src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx
@@ -1,13 +1,15 @@
-import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
-import { listPMJYPackages } from "../../Redux/actions";
-import { Autocomplete } from "../Form/FormFields/Autocomplete";
-import FormField from "../Form/FormFields/FormField";
 import {
   FormFieldBaseProps,
   useFormFieldPropsResolver,
 } from "../Form/FormFields/Utils";
 
-type PMJAYPackageItem = {
+import { Autocomplete } from "../Form/FormFields/Autocomplete";
+import FormField from "../Form/FormFields/FormField";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
+
+export type PMJAYPackageItem = {
   name?: string;
   code?: string;
   price?: number;
@@ -41,7 +43,20 @@ export default function PMJAYProcedurePackageAutocomplete(props: Props) {
         optionLabel={optionLabel}
         optionDescription={optionDescription}
         optionValue={(option) => option}
-        onQuery={(query) => fetchOptions(listPMJYPackages(query))}
+        onQuery={(query) =>
+          fetchOptions(async () => {
+            const { res, data } = await request(
+              routes.hcx.claims.listPMJYPackages,
+              { query: { query, limit: 10 } },
+            );
+
+            if (res?.ok && data) {
+              return data;
+            }
+
+            return [];
+          })
+        }
         isLoading={isLoading}
       />
     </FormField>

diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
@@ -1,33 +1,34 @@
 import * as Notification from "../../Utils/Notifications";
 
 import { Cancel, Submit } from "../Common/components/ButtonV2";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import CircularProgress from "../Common/components/CircularProgress";
 import ClaimCard from "../HCX/ClaimCard";
+import ConfirmDialog from "../Common/ConfirmDialog";
 import { ConsultationModel } from "./models";
 import CreateClaimCard from "../HCX/CreateClaimCard";
 import { DISCHARGE_REASONS } from "../../Common/constants";
 import DialogModal from "../Common/Dialog";
+import { FacilityModel } from "./models";
+import { FacilitySelect } from "../Common/FacilitySelect";
+import { FieldError } from "../Form/FieldValidators";
 import { FieldLabel } from "../Form/FormFields/FormField";
-import { HCXActions } from "../../Redux/actions";
 import { HCXClaimModel } from "../HCX/models";
+import PrescriptionBuilder from "../Medicine/PrescriptionBuilder";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
+import dayjs from "../../Utils/dayjs";
 import { dischargePatient } from "../../Redux/actions";
+import routes from "../../Redux/api";
 import useConfig from "../../Common/hooks/useConfig";
+import useConfirmedAction from "../../Common/hooks/useConfirmedAction";
 import { useDispatch } from "react-redux";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
-import PrescriptionBuilder from "../Medicine/PrescriptionBuilder";
-import CircularProgress from "../Common/components/CircularProgress";
-import { FacilitySelect } from "../Common/FacilitySelect";
-import { FacilityModel } from "./models";
-import dayjs from "../../Utils/dayjs";
-import { FieldError } from "../Form/FieldValidators";
+import useQuery from "../../Utils/request/useQuery";
 import { useTranslation } from "react-i18next";
-import useConfirmedAction from "../../Common/hooks/useConfirmedAction";
-import ConfirmDialog from "../Common/ConfirmDialog";
 
 interface PreDischargeFormInterface {
   new_discharge_reason: number | null;
@@ -82,6 +83,28 @@ const DischargeModal = ({
   const [facility, setFacility] = useState<FacilityModel | null>(referred_to);
   const [errors, setErrors] = useState<any>({});
 
+  const { refetch: refetchLatestClaim } = useQuery(routes.hcx.claims.list, {
+    query: {
+      consultation: consultationData.id,
+      ordering: "-modified_date",
+      use: "claim",
+      outcome: "complete",
+      limit: 1,
+    },
+    onResponse: (res) => {
+      if (res?.res?.ok && res?.data?.results?.length !== 0) {
+        setLatestClaim(res?.data?.results[0]);
+        if (isCreateClaimLoading)
+          Notification.Success({ msg: "Fetched Claim Approval Results" });
+      } else {
+        setLatestClaim(undefined);
+        if (isCreateClaimLoading)
+          Notification.Success({ msg: "Error Fetched Claim Approval Results" });
+      }
+      setIsCreateClaimLoading(false);
+    },
+  });
+
   useEffect(() => {
     setPreDischargeForm((prev) => ({
       ...prev,
@@ -98,38 +121,13 @@ const DischargeModal = ({
   const discharge_reason =
     new_discharge_reason ?? preDischargeForm.new_discharge_reason;
 
-  const fetchLatestClaim = useCallback(async () => {
-    const res = await dispatch(
-      HCXActions.claims.list({
-        ordering: "-modified_date",
-        use: "claim",
-        consultation: consultationData.id,
-      }),
-    );
-
-    if (res?.data?.results?.length > 0) {
-      setLatestClaim(res.data.results[0]);
-      if (isCreateClaimLoading)
-        Notification.Success({ msg: "Fetched Claim Approval Results" });
-    } else {
-      setLatestClaim(undefined);
-      if (isCreateClaimLoading)
-        Notification.Success({ msg: "Error Fetched Claim Approval Results" });
-    }
-    setIsCreateClaimLoading(false);
-  }, [consultationData.id, dispatch]);
-
-  useEffect(() => {
-    fetchLatestClaim();
-  }, [fetchLatestClaim]);
-
   useMessageListener((data) => {
     if (
       data.type === "MESSAGE" &&
       (data.from === "claim/on_submit" || data.from === "preauth/on_submit") &&
       data.message === "success"
     ) {
-      fetchLatestClaim();
+      refetchLatestClaim();
     }
   });
 

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -1,3 +1,9 @@
+import { AssetData, AssetLocationType } from "../Assets/AssetTypes";
+import {
+  AssignedToObjectModel,
+  DailyRoundsModel,
+  FileUploadModel,
+} from "../Patient/models";
 import {
   CONSENT_PATIENT_CODE_STATUS_CHOICES,
   CONSENT_TYPE_CHOICES,
@@ -6,18 +12,13 @@ import {
   PATIENT_NOTES_THREADS,
   UserRole,
 } from "../../Common/constants";
-import { AssetData, AssetLocationType } from "../Assets/AssetTypes";
-import { RouteToFacility } from "../Common/RouteToFacilitySelect";
-import { InvestigationType } from "../Common/prescription-builder/InvestigationBuilder";
-import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
 import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
-import {
-  AssignedToObjectModel,
-  DailyRoundsModel,
-  FileUploadModel,
-} from "../Patient/models";
+
 import { EncounterSymptom } from "../Symptoms/types";
+import { InvestigationType } from "../Common/prescription-builder/InvestigationBuilder";
+import { ProcedureType } from "../Common/prescription-builder/ProcedureBuilder";
+import { RouteToFacility } from "../Common/RouteToFacilitySelect";
 import { UserBareMinimum } from "../Users/models";
 
 export interface LocalBodyModel {
@@ -270,8 +271,6 @@ export interface CurrentBed {
   meta: Record<string, any>;
 }
 
-// Voluntarily made as `type` for it to achieve type-safety when used with
-// `useAsyncOptions<ICD11DiagnosisModel>`
 export type ICD11DiagnosisModel = {
   id: string;
   label: string;

diff --git a/src/Components/HCX/ClaimCreatedModal.tsx b/src/Components/HCX/ClaimCreatedModal.tsx
@@ -1,12 +1,13 @@
-import { useState } from "react";
-import { useDispatch } from "react-redux";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import { HCXActions } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications";
-import { Submit } from "../Common/components/ButtonV2";
+
+import CareIcon from "../../CAREUI/icons/CareIcon";
 import DialogModal from "../Common/Dialog";
 import { FileUpload } from "../Files/FileUpload";
 import { HCXClaimModel } from "./models";
+import { Submit } from "../Common/components/ButtonV2";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
+import { useState } from "react";
 
 interface Props {
   claim: HCXClaimModel;
@@ -15,16 +16,18 @@ interface Props {
 }
 
 export default function ClaimCreatedModal({ claim, ...props }: Props) {
-  const dispatch = useDispatch<any>();
   const [isMakingClaim, setIsMakingClaim] = useState(false);
 
   const { use } = claim;
 
   const handleSubmit = async () => {
     setIsMakingClaim(true);
 
-    const res = await dispatch(HCXActions.makeClaim(claim.id ?? ""));
-    if (res.data) {
+    const { res } = await request(routes.hcx.claims.makeClaim, {
+      body: { claim: claim.id },
+    });
+
+    if (res?.ok) {
       Notification.Success({ msg: `${use} requested` });
       props.onClose();
     }