Drops all remaining usages of useDispatch

ohcnetwork · Oct 7, 2024 · e68a637 · e68a637
1 parent 06c2876
commit e68a637
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 378 deletions.
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -1,8 +1,6 @@
 import { GENDER_TYPES } from "../../../Common/constants";
 import { ConsultationModel } from "../models";
-import { getConsultation, getPatient } from "../../../Redux/actions";
-import { statusType, useAbortableEffect } from "../../../Common/utils";
-import { lazy, useCallback, useState } from "react";
+import { lazy, useCallback, useEffect, useState } from "react";
 import DoctorVideoSlideover from "../DoctorVideoSlideover";
 import { PatientModel } from "../../Patient/models";
 import {
@@ -13,7 +11,6 @@ import {
 } from "../../../Utils/utils";
 
 import { Link, navigate, useQueryParams } from "raviger";
-import { useDispatch } from "react-redux";
 import { triggerGoal } from "../../../Integrations/Plausible";
 import useAuthUser from "../../../Common/hooks/useAuthUser";
 import { ConsultationUpdatesTab } from "./ConsultationUpdatesTab";
@@ -40,6 +37,7 @@ import request from "../../../Utils/request/request";
 import { CameraFeedPermittedUserTypes } from "../../../Utils/permissions";
 import Error404 from "../../ErrorPages/404";
 import { useTranslation } from "react-i18next";
+import useQuery from "../../../Utils/request/useQuery";
 
 const Loading = lazy(() => import("../../Common/Loading"));
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
@@ -76,18 +74,11 @@ export const ConsultationDetails = (props: any) => {
   if (Object.keys(TABS).includes(props.tab.toUpperCase())) {
     tab = props.tab.toUpperCase() as keyof typeof TABS;
   }
-  const dispatch: any = useDispatch();
-  const [isLoading, setIsLoading] = useState(false);
   const [showDoctors, setShowDoctors] = useState(false);
   const [qParams, _] = useQueryParams();
-
-  const [consultationData, setConsultationData] = useState<ConsultationModel>(
-    {} as ConsultationModel,
-  );
   const [patientData, setPatientData] = useState<PatientModel>({});
   const [abhaNumberData, setAbhaNumberData] = useState<AbhaNumberModel>();
   const [activeShiftingData, setActiveShiftingData] = useState<Array<any>>([]);
-  const [isCameraAttached, setIsCameraAttached] = useState(false);
 
   const getPatientGender = (patientData: any) =>
     GENDER_TYPES.find((i) => i.id === patientData.gender)?.text;
@@ -108,98 +99,86 @@ export const ConsultationDetails = (props: any) => {
 
   const authUser = useAuthUser();
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatch(getConsultation(consultationId));
-      if (!status.aborted) {
-        if (res?.data) {
-          const data: ConsultationModel = {
-            ...res.data,
-            symptoms_text: "",
-          };
-          if (facilityId != data.facility || patientId != data.patient) {
-            navigate(
-              `/facility/${data.facility}/patient/${data.patient}/consultation/${data?.id}`,
-            );
-          }
-          setConsultationData(data);
+  const consultationQuery = useQuery(routes.getConsultation, {
+    pathParams: { id: consultationId },
+    onResponse: ({ data }) => {
+      if (!data) {
+        navigate("/not-found");
+        return;
+      }
+      if (facilityId != data.facility || patientId != data.patient) {
+        navigate(
+          `/facility/${data.facility}/patient/${data.patient}/consultation/${data?.id}`,
+        );
+      }
+    },
+  });
 
-          setIsCameraAttached(
-            await (async () => {
-              const bedId = data?.current_bed?.bed_object?.id;
-              if (!bedId) {
-                return false;
-              }
-              const { data: assetBeds } = await request(routes.listAssetBeds, {
-                query: { bed: bedId },
-              });
-              if (!assetBeds) {
-                return false;
-              }
-              return assetBeds.results.some(
-                (a) => a.asset_object.asset_class === "ONVIF",
-              );
-            })(),
-          );
+  const consultationData = consultationQuery.data;
+  const bedId = consultationData?.current_bed?.bed_object?.id;
 
-          // Get patient data
-          const id = res.data.patient;
-          const patientRes = await dispatch(getPatient({ id }));
-          if (patientRes?.data) {
-            const patientGender = getPatientGender(patientRes.data);
-            const patientAddress = getPatientAddress(patientRes.data);
-            const patientComorbidities = getPatientComorbidities(
-              patientRes.data,
-            );
-            const data = {
-              ...patientRes.data,
-              gender: patientGender,
-              address: patientAddress,
-              comorbidities: patientComorbidities,
-              is_declared_positive: patientRes.data.is_declared_positive
-                ? "Yes"
-                : "No",
-              is_vaccinated: patientData.is_vaccinated ? "Yes" : "No",
-            };
+  const isCameraAttached = useQuery(routes.listAssetBeds, {
+    prefetch: !!bedId,
+    query: { bed: bedId },
+  }).data?.results.some((a) => a.asset_object.asset_class === "ONVIF");
 
-            setPatientData(data);
-          }
+  const patientDataQuery = useQuery(routes.getPatient, {
+    pathParams: { id: consultationQuery.data?.patient ?? "" },
+    prefetch: !!consultationQuery.data?.patient,
+    onResponse: ({ data }) => {
+      if (!data) {
+        return;
+      }
+      setPatientData({
+        ...data,
+        gender: getPatientGender(data),
+        address: getPatientAddress(data),
+        comorbidities: getPatientComorbidities(data),
+        is_declared_positive: data.is_declared_positive ? "Yes" : "No",
+        is_vaccinated: patientData.is_vaccinated ? "Yes" : "No",
+      } as any);
+    },
+  });
 
-          // Get abha number data
-          const { data: abhaNumberData } = await request(
-            routes.abha.getAbhaNumber,
-            {
-              pathParams: { abhaNumberId: id ?? "" },
-              silent: true,
-            },
-          );
-          setAbhaNumberData(abhaNumberData);
+  const fetchData = useCallback(
+    async (id: string) => {
+      // Get abha number data
+      const { data: abhaNumberData } = await request(
+        routes.abha.getAbhaNumber,
+        {
+          pathParams: { abhaNumberId: id ?? "" },
+          silent: true,
+        },
+      );
+      setAbhaNumberData(abhaNumberData);
 
-          // Get shifting data
-          const shiftRequestsQuery = await request(routes.listShiftRequests, {
-            query: { patient: id },
-          });
-          if (shiftRequestsQuery.data?.results) {
-            setActiveShiftingData(shiftRequestsQuery.data.results);
-          }
-        } else {
-          navigate("/not-found");
-        }
-        setIsLoading(false);
+      // Get shifting data
+      const shiftRequestsQuery = await request(routes.listShiftRequests, {
+        query: { patient: id },
+      });
+      if (shiftRequestsQuery.data?.results) {
+        setActiveShiftingData(shiftRequestsQuery.data.results);
       }
     },
-    [consultationId, dispatch, patientData.is_vaccinated],
+    [consultationId, patientData.is_vaccinated],
   );
 
-  useAbortableEffect((status: statusType) => {
-    fetchData(status);
+  useEffect(() => {
+    const id = patientDataQuery.data?.id;
+    if (!id) {
+      return;
+    }
+    fetchData(id);
     triggerGoal("Patient Consultation Viewed", {
       facilityId: facilityId,
       consultationId: consultationId,
       userId: authUser.id,
     });
-  }, []);
+  }, [patientDataQuery.data?.id]);
+
+  if (!consultationData || patientDataQuery.loading) {
+    return <Loading />;
+  }
 
   const consultationTabProps: ConsultationTabProps = {
     consultationId,
@@ -215,10 +194,6 @@ export const ConsultationDetails = (props: any) => {
 
   const SelectedTab = TABS[tab];
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   const tabButtonClasses = (selected: boolean) =>
     `capitalize min-w-max-content cursor-pointer font-bold whitespace-nowrap ${
       selected === true
@@ -308,7 +283,7 @@ export const ConsultationDetails = (props: any) => {
               patient={patientData}
               abhaNumber={abhaNumberData}
               consultation={consultationData}
-              fetchPatientData={fetchData}
+              fetchPatientData={() => patientDataQuery.refetch()}
               consultationId={consultationId}
               activeShiftingData={activeShiftingData}
               showAbhaProfile={qParams["show-abha-profile"] === "true"}

diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
@@ -20,8 +20,6 @@ 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 { useDispatch } from "react-redux";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
 import useQuery from "../../Utils/request/useQuery";
 import { useTranslation } from "react-i18next";
@@ -31,6 +29,7 @@ import routes from "../../Redux/api";
 import { EditDiagnosesBuilder } from "../Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder";
 import Loading from "../Common/Loading";
 import careConfig from "@careConfig";
+import request from "../../Utils/request/request";
 
 interface PreDischargeFormInterface {
   new_discharge_reason: number | null;
@@ -64,8 +63,6 @@ const DischargeModal = ({
   death_datetime = dayjs().format("YYYY-MM-DDTHH:mm"),
 }: IProps) => {
   const { t } = useTranslation();
-
-  const dispatch: any = useDispatch();
   const [preDischargeForm, setPreDischargeForm] =
     useState<PreDischargeFormInterface>({
       new_discharge_reason,
@@ -175,19 +172,17 @@ const DischargeModal = ({
 
   const submitAction = useConfirmedAction(async () => {
     setIsSendingDischargeApi(true);
-    const dischargeResponse = await dispatch(
-      dischargePatient(
-        {
-          ...preDischargeForm,
-          new_discharge_reason: discharge_reason,
-          discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
-        },
-        { id: consultationData.id },
-      ),
-    );
+    const { res } = await request(routes.dischargePatient, {
+      pathParams: { id: consultationData.id },
+      body: {
+        ...preDischargeForm,
+        new_discharge_reason: discharge_reason,
+        discharge_date: dayjs(preDischargeForm.discharge_date).toISOString(),
+      },
+    });
     setIsSendingDischargeApi(false);
 
-    if (dischargeResponse?.status === 200) {
+    if (res?.ok) {
       Notification.Success({ msg: "Patient Discharged Successfully" });
       afterSubmit?.();
     }

diff --git a/src/Components/Facility/FacilityFilter/DistrictSelect.tsx b/src/Components/Facility/FacilityFilter/DistrictSelect.tsx
@@ -1,6 +1,5 @@
-import { useCallback } from "react";
-import { useDispatch } from "react-redux";
-import { getDistrictByName } from "../../../Redux/actions";
+import routes from "../../../Redux/api";
+import request from "../../../Utils/request/request";
 import AutoCompleteAsync from "../../Form/AutoCompleteAsync";
 
 interface DistrictSelectProps {
@@ -13,29 +12,22 @@ interface DistrictSelectProps {
 }
 
 function DistrictSelect(props: DistrictSelectProps) {
-  const { name, errors, className, multiple, selected, setSelected } = props;
-  const dispatchAction: any = useDispatch();
-
-  const districtSearch = useCallback(
-    async (text: string) => {
-      const params = { limit: 50, offset: 0, district_name: text };
-      const res = await dispatchAction(getDistrictByName(params));
-      return res?.data?.results;
-    },
-    [dispatchAction],
-  );
-
   return (
     <AutoCompleteAsync
-      name={name}
-      multiple={multiple}
-      selected={selected}
-      fetchData={districtSearch}
-      onChange={setSelected}
-      optionLabel={(option: any) => option.name}
+      name={props.name}
+      multiple={props.multiple}
+      selected={props.selected}
+      fetchData={async (search) => {
+        const { data } = await request(routes.getDistrictByName, {
+          query: { limit: 50, offset: 0, district_name: search },
+        });
+        return data?.results;
+      }}
+      onChange={props.setSelected}
+      optionLabel={(option) => option.name}
       compareBy="id"
-      error={errors}
-      className={className}
+      error={props.errors}
+      className={props.className}
     />
   );
 }

diff --git a/src/Redux/Reducer.tsx b/src/Redux/Reducer.tsx
diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx