change all dispatch to useQuery and request hooks

src/Components/Facility/Consultations/ABGPlots.tsx

@@ -1,56 +1,45 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../../Common/utils";
-import { dailyRoundsAnalyse } from "../../../Redux/actions";
+import { useEffect, useState } from "react";
 import { LinePlot } from "./components/LinePlot";
 import Pagination from "../../Common/Pagination";
 import { PAGINATION_LIMIT } from "../../../Common/constants";
 import { formatDateTime } from "../../../Utils/utils";
+import routes from "../../../Redux/api";
+import request from "../../../Utils/request/request";
 
 export const ABGPlots = (props: any) => {
   const { consultationId } = props;
-  const dispatch: any = useDispatch();
   const [results, setResults] = useState({});
   const [currentPage, setCurrentPage] = useState(1);
   const [totalCount, setTotalCount] = useState(0);
 
-  const fetchDailyRounds = useCallback(
-    async (status: statusType) => {
-      const res = await dispatch(
-        dailyRoundsAnalyse(
-          {
-            page: currentPage,
-            fields: [
-              "ph",
-              "pco2",
-              "po2",
-              "hco3",
-              "base_excess",
-              "lactate",
-              "sodium",
-              "potassium",
-              "ventilator_fi02",
-            ],
-          },
-          { consultationId }
-        )
-      );
-      if (!status.aborted) {
-        if (res?.data) {
-          setResults(res.data.results);
-          setTotalCount(res.data.count);
-        }
+  useEffect(() => {
+    const fetchDailyRounds = async (currentPage: number) => {
+      const { res, data } = await request(routes.dailyRoundsAnalyse, {
+        body: {
+          page: currentPage,
+          fields: [
+            "ph",
+            "pco2",
+            "po2",
+            "hco3",
+            "base_excess",
+            "lactate",
+            "sodium",
+            "potassium",
+            "ventilator_fi02",
+          ],
+        },
+        pathParams: {
+          consultationId,
+        },
+      });
+      if (res?.ok && data) {
+        setResults(data.results);
+        setTotalCount(data.count);
       }
-    },
-    [consultationId, dispatch, currentPage]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchDailyRounds(status);
-    },
-    [currentPage]
-  );
+    };
+    fetchDailyRounds(currentPage);
+  }, [currentPage, consultationId]);
 
   const handlePagination = (page: number, _limit: number) => {
     setCurrentPage(page);

src/Components/Facility/Consultations/Beds.tsx

@@ -1,12 +1,10 @@
 import * as Notification from "../../../Utils/Notifications.js";
 
 import { BedModel, CurrentBed } from "../models";
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
-import {
-  createConsultationBed,
-  listConsultationBeds,
-} from "../../../Redux/actions";
-import { statusType, useAbortableEffect } from "../../../Common/utils";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import routes from "../../../Redux/api";
+import request from "../../../Utils/request/request";
+import useQuery from "../../../Utils/request/useQuery";
 
 import { BedSelect } from "../../Common/BedSelect";
 import ButtonV2 from "../../Common/components/ButtonV2";
@@ -16,15 +14,14 @@ import { FieldLabel } from "../../Form/FormFields/FormField";
 import Loading from "../../Common/Loading";
 import TextFormField from "../../Form/FormFields/TextFormField";
 import { formatDateTime } from "../../../Utils/utils";
-import { useDispatch } from "react-redux";
 import dayjs from "../../../Utils/dayjs";
 import { AssetSelect } from "../../Common/AssetSelect.js";
 import DialogModal from "../../Common/Dialog.js";
 import { Link } from "raviger";
 import {
   AssetClass,
-  AssetData,
   assetClassProps,
+  AssetData,
 } from "../../Assets/AssetTypes.js";
 import Chip from "../../../CAREUI/display/Chip.js";
 
@@ -40,7 +37,6 @@ interface BedsProps {
 }
 
 const Beds = (props: BedsProps) => {
-  const dispatch = useDispatch<any>();
   const { facilityId, consultationId, discharged } = props;
   const [bed, setBed] = useState<BedModel>({});
   const [startDate, setStartDate] = useState<string>(
@@ -52,33 +48,30 @@ const Beds = (props: BedsProps) => {
   const [key, setKey] = useState(0);
   const [showBedDetails, setShowBedDetails] = useState<CurrentBed | null>(null);
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const [bedsData]: any = await Promise.all([
-        dispatch(listConsultationBeds({ consultation: consultationId })),
-      ]);
-      if (!status.aborted) {
-        setIsLoading(false);
-        if (!bedsData?.data)
-          Notification.Error({
-            msg: "Something went wrong..!",
-          });
-        else {
-          setConsultationBeds(bedsData.data.results);
-          setBed(bedsData.data.results[0]?.bed_object || {});
-          setAssets(bedsData.data.results[0]?.assets_objects || []);
-        }
-      }
-    },
-    [consultationId, dispatch]
-  );
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [dispatch, fetchData, key]
-  );
+  const {
+    res,
+    data: bedData,
+    refetch,
+  } = useQuery(routes.listConsultationBeds, {
+    pathParams: { consultation: consultationId },
+  });
+
+  useEffect(() => {
+    setIsLoading(true);
+    if (!bedData || !res?.ok) {
+      Notification.Error({
+        msg: "Something went wrong..!",
+      });
+    } else {
+      setConsultationBeds(bedData.results);
+      setBed(bedData.results[0]?.bed_object || {});
+      setAssets(bedData.results[0]?.assets_objects || []);
+    }
+  }, [bedData, res]);
+
+  useEffect(() => {
+    refetch();
+  }, [key, refetch]);
 
   const handleSubmit = async (e: React.SyntheticEvent) => {
     e.preventDefault();
@@ -88,13 +81,14 @@ const Beds = (props: BedsProps) => {
         msg: "Please select a bed first..!",
       });
 
-    const res: any = await dispatch(
-      createConsultationBed(
-        { start_date: startDate, assets: assets.map((asset) => asset.id) },
-        consultationId,
-        bed?.id
-      )
-    );
+    const { res } = await request(routes.createConsultationBed, {
+      body: {
+        start_date: startDate,
+        assets: assets.map((asset) => asset.id),
+        consultation: consultationId,
+        bed: bed?.id,
+      },
+    });
 
     if (res && res.status === 201) {
       Notification.Success({

src/Components/Facility/Consultations/DailyRoundsList.tsx

@@ -1,14 +1,13 @@
 import { navigate } from "raviger";
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../../Common/utils";
-import { getDailyReport } from "../../../Redux/actions";
+import { useEffect, useState } from "react";
 import Pagination from "../../Common/Pagination";
 import { DailyRoundsModel } from "../../Patient/models";
 import VirtualNursingAssistantLogUpdateCard from "./DailyRounds/VirtualNursingAssistantLogUpdateCard";
 import DefaultLogUpdateCard from "./DailyRounds/DefaultLogUpdateCard";
 import { useTranslation } from "react-i18next";
 import LoadingLogUpdateCard from "./DailyRounds/LoadingCard";
+import routes from "../../../Redux/api";
+import useQuery from "../../../Utils/request/useQuery";
 
 export const DailyRoundsList = (props: any) => {
   const { t } = useTranslation();
@@ -19,7 +18,6 @@ export const DailyRoundsList = (props: any) => {
     consultationData,
     showAutomatedRounds,
   } = props;
-  const dispatch: any = useDispatch();
   const [isDailyRoundLoading, setIsDailyRoundLoading] = useState(false);
   const [dailyRoundsListData, setDailyRoundsListData] = useState<
     Array<DailyRoundsModel>
@@ -29,36 +27,27 @@ export const DailyRoundsList = (props: any) => {
   const [currentPage, setCurrentPage] = useState(1);
   const limit = 14;
 
-  const fetchDailyRounds = useCallback(
-    async (status: statusType) => {
-      setIsDailyRoundLoading(true);
-      const res = await dispatch(
-        getDailyReport(
-          {
-            limit,
-            offset,
-            rounds_type: showAutomatedRounds ? "" : "NORMAL,VENTILATOR,ICU",
-          },
-          { consultationId }
-        )
-      );
-      if (!status.aborted) {
-        if (res && res.data) {
-          setDailyRoundsListData(res.data.results);
-          setTotalCount(res.data.count);
-        }
-        setIsDailyRoundLoading(false);
-      }
+  const { res, data, refetch } = useQuery(routes.getDailyReports, {
+    body: {
+      limit,
+      offset,
+      rounds_type: showAutomatedRounds ? "" : "NORMAL,VENTILATOR,ICU",
     },
-    [consultationId, dispatch, offset, showAutomatedRounds]
-  );
+    pathParams: { consultationId },
+  });
 
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchDailyRounds(status);
-    },
-    [currentPage, showAutomatedRounds]
-  );
+  useEffect(() => {
+    setIsDailyRoundLoading(true);
+    if (res?.ok && data) {
+      setDailyRoundsListData(data.results);
+      setTotalCount(data.count);
+    }
+    setIsDailyRoundLoading(false);
+  }, [res, data]);
+
+  useEffect(() => {
+    refetch();
+  }, [currentPage, showAutomatedRounds, refetch]);
 
   const handlePagination = (page: number, limit: number) => {
     const offset = (page - 1) * limit;

src/Components/Facility/Consultations/DialysisPlots.tsx

@@ -1,46 +1,35 @@
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../../Common/utils";
-import { dailyRoundsAnalyse } from "../../../Redux/actions";
+import { useEffect, useState } from "react";
+import routes from "../../../Redux/api";
+import request from "../../../Utils/request/request";
 import { LinePlot } from "./components/LinePlot";
 import Pagination from "../../Common/Pagination";
 import { PAGINATION_LIMIT } from "../../../Common/constants";
 import { formatDateTime } from "../../../Utils/utils";
 
 export const DialysisPlots = (props: any) => {
   const { consultationId } = props;
-  const dispatch: any = useDispatch();
   const [results, setResults] = useState({});
   const [currentPage, setCurrentPage] = useState(1);
   const [totalCount, setTotalCount] = useState(0);
 
-  const fetchDailyRounds = useCallback(
-    async (status: statusType) => {
-      const res = await dispatch(
-        dailyRoundsAnalyse(
-          {
-            page: currentPage,
-            fields: ["dialysis_fluid_balance", "dialysis_net_balance"],
-          },
-          { consultationId }
-        )
-      );
-      if (!status.aborted) {
-        if (res?.data) {
-          setTotalCount(res.data.count);
-          setResults(res.data.results);
-        }
+  useEffect(() => {
+    const fetchDailyRounds = async (currentPage: number) => {
+      const { res, data } = await request(routes.dailyRoundsAnalyse, {
+        body: {
+          page: currentPage,
+          fields: ["dialysis_fluid_balance", "dialysis_net_balance"],
+        },
+        pathParams: {
+          consultationId,
+        },
+      });
+      if (res?.ok && data) {
+        setTotalCount(data.count);
+        setResults(data.results);
       }
-    },
-    [consultationId, dispatch, currentPage]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchDailyRounds(status);
-    },
-    [consultationId, currentPage]
-  );
+    };
+    fetchDailyRounds(currentPage);
+  }, [currentPage, consultationId]);
 
   const handlePagination = (page: number, _limit: number) => {
     setCurrentPage(page);