replace useDispatch with useQuery/request in MinQuantity List

ohcnetwork · Jan 16, 2024 · 019346d · 019346d
1 parent 51b02c2
commit 019346d
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 55 deletions.
diff --git a/src/Components/Facility/MinQuantityList.tsx b/src/Components/Facility/MinQuantityList.tsx
@@ -1,67 +1,41 @@
-import { useCallback, useState, useEffect, lazy } from "react";
-import { useDispatch } from "react-redux";
-
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getMinQuantity, getAnyFacility } from "../../Redux/actions";
+import { useState, lazy } from "react";
 import Pagination from "../Common/Pagination";
 import { MinQuantityRequiredModal } from "./MinQuantityRequiredModal";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import Page from "../Common/components/Page";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 const Loading = lazy(() => import("../Common/Loading"));
 
 export default function MinQuantityList(props: any) {
   const { facilityId }: any = props;
-  const dispatchAction: any = useDispatch();
-  const [isLoading, setIsLoading] = useState(false);
-  const initialInventory: any[] = [];
   let inventoryItem: any = null;
-  const [inventory, setInventory] = useState(initialInventory);
   const [offset, setOffset] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
-  const [totalCount, setTotalCount] = useState(0);
-  const [facilityName, setFacilityName] = useState("");
   const [showMinQuantityRequiredModal, setShowMinQuantityRequiredModal] =
     useState(false);
   const [selectedItem, setSelectedItem] = useState({ id: 0, item_id: 0 });
   const limit = 14;
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatchAction(
-        getMinQuantity(facilityId, { limit, offset })
-      );
-      if (!status.aborted) {
-        if (res && res.data) {
-          setInventory(res.data.results);
-          setTotalCount(res.data.count);
-        }
-        setIsLoading(false);
-      }
-    },
-    [dispatchAction, offset, facilityId]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
+  const { data: minimumQuantityData, refetch: minimumQuantityfetch } = useQuery(
+    routes.getMinQuantity,
+    {
+      pathParams: {
+        facilityId,
+      },
+      query: {
+        limit,
+        offset,
+      },
+      prefetch: !!facilityId,
+    }
   );
 
-  useEffect(() => {
-    async function fetchFacilityName() {
-      if (facilityId) {
-        const res = await dispatchAction(getAnyFacility(facilityId));
-
-        setFacilityName(res?.data?.name || "");
-      } else {
-        setFacilityName("");
-      }
-    }
-    fetchFacilityName();
-  }, [dispatchAction, facilityId]);
+  const { data: facilityObject } = useQuery(routes.getAnyFacility, {
+    pathParams: { id: facilityId },
+    prefetch: !!facilityId,
+  });
 
   const handlePagination = (page: number, limit: number) => {
     const offset = (page - 1) * limit;
@@ -70,8 +44,8 @@ export default function MinQuantityList(props: any) {
   };
 
   let inventoryList: any = [];
-  if (inventory?.length) {
-    inventoryList = inventory.map((inventoryItem: any) => (
+  if (minimumQuantityData?.results.length) {
+    inventoryList = minimumQuantityData.results.map((inventoryItem: any) => (
       <tr key={inventoryItem.id} className="bg-white">
         <td className="cursor-pointer border-b border-gray-200 p-5 hover:bg-gray-200 sm:cursor-default sm:text-sm sm:hover:bg-white">
           <div className="hidden flex-col sm:flex">
@@ -144,7 +118,7 @@ export default function MinQuantityList(props: any) {
         </td>
       </tr>
     ));
-  } else if (inventory && inventory.length === 0) {
+  } else if (minimumQuantityData && minimumQuantityData.results.length === 0) {
     inventoryList = (
       <tr className="bg-white">
         <td
@@ -159,9 +133,9 @@ export default function MinQuantityList(props: any) {
     );
   }
 
-  if (isLoading || !inventory) {
+  if (!minimumQuantityData) {
     inventoryItem = <Loading />;
-  } else if (inventory) {
+  } else if (minimumQuantityData) {
     inventoryItem = (
       <>
         <div className="-mx-4 p-4 sm:-mx-8 sm:px-8">
@@ -188,12 +162,12 @@ export default function MinQuantityList(props: any) {
           </div>
         </div>
 
-        {totalCount > limit && (
+        {minimumQuantityData.count > limit && (
           <div className="mt-4 flex w-full justify-center">
             <Pagination
               cPage={currentPage}
               defaultPerPage={limit}
-              data={{ totalCount }}
+              data={{ totalCount: minimumQuantityData.count }}
               onChange={handlePagination}
             />
           </div>
@@ -206,7 +180,7 @@ export default function MinQuantityList(props: any) {
     <Page
       title="Minimum Quantity Required"
       crumbsReplacements={{
-        [facilityId]: { name: facilityName },
+        [facilityId]: { name: facilityObject?.name },
         min_quantity: {
           name: "Min Quantity",
           uri: `/facility/${facilityId}/inventory/min_quantity/list`,
@@ -238,7 +212,7 @@ export default function MinQuantityList(props: any) {
           show={showMinQuantityRequiredModal}
           handleClose={() => setShowMinQuantityRequiredModal(false)}
           handleUpdate={() => {
-            fetchData({ aborted: false });
+            minimumQuantityfetch();
             setShowMinQuantityRequiredModal(false);
           }}
         />

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -524,3 +524,33 @@ export type FacilityRequest = Omit<FacilityModel, "location"> & {
   patient_count?: string;
   bed_count?: string;
 };
+
+export type InventorySummaryResponse = {
+  id: string;
+  item_object: {
+    id: number;
+    default_unit: {
+      id: number;
+      name: string;
+    };
+    allowed_units: {
+      id: number;
+      name: string;
+    }[];
+    tags: {
+      id: number;
+      name: string;
+    }[];
+    name: string;
+    description: string;
+    min_quantity: number;
+  };
+  unit_object: {
+    id: number;
+    name: string;
+  };
+  created_date: string;
+  quantity: number;
+  is_low: boolean;
+  item: number;
+};
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -51,6 +51,7 @@ import {
   LocationModel,
   PatientNotesModel,
   BedModel,
+  InventorySummaryResponse,
 } from "../Components/Facility/models";
 import {
   IDeleteBedCapacity,
@@ -789,8 +790,9 @@ const routes = {
     method: "POST",
   },
   getMinQuantity: {
-    path: "/api/v1/facility",
+    path: "/api/v1/facility/{facilityId}/min_quantity/",
     method: "GET",
+    TRes: Type<PaginatedResponse<InventorySummaryResponse>>(),
   },
   updateMinQuantity: {
     path: "/api/v1/facility/{facilityId}/min_quantity/{inventoryId}",