Migrate useDisaptch to useQuery/request in Discharge Summary popup and Consultation Updates Tab

src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx

@@ -1,8 +1,6 @@
-import { lazy, useEffect, useState } from "react";
+import { lazy, useState } from "react";
 import { ConsultationTabProps } from "./index";
 import { AssetBedModel, AssetClass, AssetData } from "../../Assets/AssetTypes";
-import { useDispatch } from "react-redux";
-import { listAssetBeds } from "../../../Redux/actions";
 import { BedModel } from "../models";
 import HL7PatientVitalsMonitor from "../../VitalsMonitor/HL7PatientVitalsMonitor";
 import VentilatorPatientVitalsMonitor from "../../VitalsMonitor/VentilatorPatientVitalsMonitor";
@@ -28,12 +26,13 @@ import EventsList from "./Events/EventsList";
 import SwitchTabs from "../../Common/components/SwitchTabs";
 import { getVitalsMonitorSocketUrl } from "../../VitalsMonitor/utils";
 import { FileUpload } from "../../Patient/FileUpload";
+import useQuery from "../../../Utils/request/useQuery";
+import routes from "../../../Redux/api";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
 
 export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
-  const dispatch: any = useDispatch();
   const [hl7SocketUrl, setHL7SocketUrl] = useState<string>();
   const [ventilatorSocketUrl, setVentilatorSocketUrl] = useState<string>();
   const [monitorBedData, setMonitorBedData] = useState<AssetBedModel>();
@@ -49,21 +48,18 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
     "3xl": 23 / 11,
   });
 
-  useEffect(() => {
-    if (
-      !props.consultationData.facility ||
-      !props.consultationData.current_bed?.bed_object.id
-    )
-      return;
-
-    const fetchData = async () => {
-      const assetBedRes = await dispatch(
-        listAssetBeds({
-          facility: props.consultationData.facility as any,
-          bed: props.consultationData.current_bed?.bed_object.id,
-        }),
-      );
-      const assetBeds = assetBedRes?.data?.results as AssetBedModel[];
+  useQuery(routes.listAssetBeds, {
+    prefetch: !!(
+      props.consultationData.facility &&
+      props.consultationData.current_bed?.bed_object.id
+    ),
+    query: {
+      facility: props.consultationData.facility as any,
+      bed: props.consultationData.current_bed?.bed_object.id,
+    },
+    onResponse({ data }) {
+      if (!data) return;
+      const assetBeds = data.results;
 
       const monitorBedData = assetBeds?.find(
         (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR,
@@ -99,10 +95,8 @@ export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
           getVitalsMonitorSocketUrl(ventilatorBedData?.asset_object),
         );
       }
-    };
-
-    fetchData();
-  }, [props.consultationData]);
+    },
+  });
 
   return (
     <div className="flex flex-col gap-2">

src/Components/Facility/DischargeSummaryModal.tsx

@@ -9,15 +9,11 @@ import {
   MultiValidator,
   RequiredFieldValidator,
 } from "../Form/FieldValidators";
-import { useDispatch } from "react-redux";
-import {
-  emailDischargeSummary,
-  generateDischargeSummary,
-} from "../../Redux/actions";
 import { Error, Success } from "../../Utils/Notifications";
-import { previewDischargeSummary } from "../../Redux/actions";
 import { useTranslation } from "react-i18next";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
+import request from "../../Utils/request/request";
+import routes from "../../Redux/api";
 
 interface Props {
   show: boolean;
@@ -27,7 +23,6 @@ interface Props {
 
 export default function DischargeSummaryModal(props: Props) {
   const { t } = useTranslation();
-  const dispatch = useDispatch<any>();
   const [email, setEmail] = useState<string>("");
   const [emailError, setEmailError] = useState<string>("");
   const [emailing, setEmailing] = useState(false);
@@ -48,12 +43,12 @@ export default function DischargeSummaryModal(props: Props) {
     setTimeout(async () => {
       setGenerating(false);
 
-      const res = await dispatch(
-        previewDischargeSummary({ external_id: props.consultation.id }),
-      );
+      const { res, data } = await request(routes.dischargeSummaryPreview, {
+        pathParams: { external_id: props.consultation.id },
+      });
 
-      if (res.status === 200) {
-        popup(res.data.read_signed_url);
+      if (res?.status === 200 && data) {
+        popup(data.read_signed_url);
         return;
       }
 
@@ -66,13 +61,13 @@ export default function DischargeSummaryModal(props: Props) {
 
   const handleRegenDischargeSummary = async () => {
     setDownloading(true);
-    const res = await dispatch(
-      generateDischargeSummary({ external_id: props.consultation.id }),
-    );
-    if (res.status === 406) {
+    const { res, error } = await request(routes.dischargeSummaryGenerate, {
+      pathParams: { external_id: props.consultation.id },
+    });
+    if (res?.status === 406) {
       Error({
         msg:
-          res.data?.message ||
+          error?.message ||
           t("discharge_summary_not_ready") + " " + t("try_again_later"),
       });
       setDownloading(false);
@@ -84,18 +79,18 @@ export default function DischargeSummaryModal(props: Props) {
 
   const downloadDischargeSummary = async () => {
     // returns summary or 202 if new create task started
-    const res = await dispatch(
-      previewDischargeSummary({ external_id: props.consultation.id }),
-    );
+    const { res, data } = await request(routes.dischargeSummaryPreview, {
+      pathParams: { external_id: props.consultation.id },
+    });
 
-    if (res.status === 202) {
+    if (res?.status === 202) {
       // wait for the automatic task to finish
       waitForDischargeSummary();
       return;
     }
 
-    if (res.status === 200) {
-      popup(res.data.read_signed_url);
+    if (res?.status === 200 && data) {
+      popup(data.read_signed_url);
       return;
     }
 
@@ -130,11 +125,11 @@ export default function DischargeSummaryModal(props: Props) {
       return;
     }
 
-    const res = await dispatch(
-      emailDischargeSummary({ email }, { external_id: props.consultation.id }),
-    );
+    const { res } = await request(routes.dischargeSummaryEmail, {
+      pathParams: { external_id: props.consultation.id },
+    });
 
-    if (res.status === 202) {
+    if (res?.status === 202) {
       Success({ msg: t("email_success") });
       props.onClose();
     }

src/Redux/actions.tsx

@@ -79,22 +79,6 @@ export const getConsultation = (id: string) => {
   return fireRequest("getConsultation", [], {}, { id: id });
 };
 
-export const generateDischargeSummary = (pathParams: object) => {
-  return fireRequest("dischargeSummaryGenerate", [], {}, pathParams);
-};
-export const previewDischargeSummary = (pathParams: object) => {
-  return fireRequest(
-    "dischargeSummaryPreview",
-    [],
-    {},
-    pathParams,
-    undefined,
-    true,
-  );
-};
-export const emailDischargeSummary = (params: object, pathParams: object) => {
-  return fireRequest("dischargeSummaryEmail", [], params, pathParams);
-};
 export const dischargePatient = (params: object, pathParams: object) => {
   return fireRequest("dischargePatient", [], params, pathParams);
 };

src/Redux/api.tsx

@@ -958,14 +958,17 @@ const routes = {
   dischargeSummaryGenerate: {
     path: "/api/v1/consultation/{external_id}/generate_discharge_summary/",
     method: "POST",
+    TRes: Type<never>(),
   },
   dischargeSummaryPreview: {
     path: "/api/v1/consultation/{external_id}/preview_discharge_summary/",
     method: "GET",
+    TRes: Type<{ read_signed_url: string }>(),
   },
   dischargeSummaryEmail: {
     path: "/api/v1/consultation/{external_id}/email_discharge_summary/",
     method: "POST",
+    TRes: Type<never>(),
   },
   dischargePatient: {
     path: "/api/v1/consultation/{id}/discharge_patient/",