replace useDispatch with useQuery/request in SetInventoryForm

ohcnetwork · Jan 18, 2024 · a9f8aff · a9f8aff
1 parent 4bda4c2
commit a9f8aff
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 94 deletions.
diff --git a/src/Components/Facility/SetInventoryForm.tsx b/src/Components/Facility/SetInventoryForm.tsx
@@ -1,13 +1,4 @@
-import { useCallback, useReducer, useState, useEffect, lazy } from "react";
-import { useDispatch } from "react-redux";
-
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import {
-  getItems,
-  setMinQuantity,
-  getAnyFacility,
-  getMinQuantity,
-} from "../../Redux/actions";
+import { useReducer, useState, useEffect } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { InventoryItemsModel } from "./models";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
@@ -17,7 +8,9 @@ import Card from "../../CAREUI/display/Card";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
-const Loading = lazy(() => import("../Common/Loading"));
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 
 const initForm = {
   id: "",
@@ -50,65 +43,51 @@ export const SetInventoryForm = (props: any) => {
   const { goBack } = useAppHistory();
   const [state, dispatch] = useReducer(inventoryFormReducer, initialState);
   const { facilityId } = props;
-  const dispatchAction: any = useDispatch();
-  const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<Array<InventoryItemsModel>>([]);
   const [currentUnit, setCurrentUnit] = useState<any>();
-  const [facilityName, setFacilityName] = useState("");
 
   const limit = 14;
   const offset = 0;
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-
+  useQuery(routes.getMinQuantity, {
+    pathParams: {
+      facilityId,
+    },
+    prefetch: !!facilityId,
+    onResponse: async ({ data }) => {
       const existingItemIDs: number[] = [];
-      const resMinQuantity = await dispatchAction(
-        getMinQuantity(facilityId, {})
-      );
-
-      resMinQuantity.data.results.map((item: any) =>
-        existingItemIDs.push(item.item_object.id)
-      );
 
-      const res = await dispatchAction(getItems({ limit, offset }));
-
-      if (!status.aborted) {
-        if (res && res.data) {
-          const filteredData = res.data.results.filter(
-            (item: any) => !existingItemIDs.includes(item.id)
-          );
-          setData(filteredData);
-          dispatch({
-            type: "set_form",
-            form: { ...state.form, id: filteredData[0]?.id },
-          });
-        }
-        setIsLoading(false);
+      if (data?.results) {
+        data.results.map((item: any) =>
+          existingItemIDs.push(item.item_object.id)
+        );
       }
-    },
-    [dispatchAction]
-  );
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [fetchData]
-  );
 
-  useEffect(() => {
-    async function fetchFacilityName() {
-      if (facilityId) {
-        const res = await dispatchAction(getAnyFacility(facilityId));
+      await request(routes.getItems, {
+        query: {
+          limit,
+          offset,
+        },
+        onResponse: ({ res, data }) => {
+          if (res && data) {
+            const filteredData = data.results.filter(
+              (item: any) => !existingItemIDs.includes(item.id)
+            );
+            setData(filteredData);
+            dispatch({
+              type: "set_form",
+              form: { ...state.form, id: filteredData[0]?.id },
+            });
+          }
+        },
+      });
+    },
+  });
 
-        setFacilityName(res?.data?.name || "");
-      } else {
-        setFacilityName("");
-      }
-    }
-    fetchFacilityName();
-  }, [dispatchAction, facilityId]);
+  const { data: facilityObject } = useQuery(routes.getAnyFacility, {
+    pathParams: { id: facilityId },
+    prefetch: !!facilityId,
+  });
 
   useEffect(() => {
     // set the default units according to the item
@@ -124,35 +103,32 @@ export const SetInventoryForm = (props: any) => {
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
-    setIsLoading(true);
-    const data: any = {
-      min_quantity: Number(state.form.quantity),
-      item: Number(state.form.id),
-    };
-
-    const res = await dispatchAction(setMinQuantity(data, { facilityId }));
-    setIsLoading(false);
-    if (res && res.data && res.data.id) {
-      Notification.Success({
-        msg: "Minimum quantiy updated successfully",
-      });
-    }
-    goBack();
+    await request(routes.setMinQuantity, {
+      pathParams: { facilityId },
+      body: {
+        min_quantity: Number(state.form.quantity),
+        item: Number(state.form.id),
+      },
+      onResponse: ({ res, data }) => {
+        if (res && data && data.id) {
+          Notification.Success({
+            msg: "Minimum quantiy updated successfully",
+          });
+        }
+        goBack();
+      },
+    });
   };
 
   const handleChange = ({ name, value }: FieldChangeEvent<unknown>) => {
     dispatch({ type: "set_form", form: { ...state.form, [name]: value } });
   };
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
     <Page
       title="Set Minimum Quantity"
       crumbsReplacements={{
-        [facilityId]: { name: facilityName },
+        [facilityId]: { name: facilityObject?.name },
         min_quantity: {
           name: "Min Quantity",
           uri: `/facility/${facilityId}/inventory/min_quantity/list`,

diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
@@ -555,16 +555,6 @@ export type InventorySummaryResponse = {
   item: number;
 };
 
-// export type InventoryLogResponse = InventorySummaryResponse & {
-//   external_id: string;
-//   current_stock: number;
-//   quantity_in_default_unit: number;
-//   is_incoming: boolean;
-//   probable_accident: boolean;
-//   unit: number;
-//   created_by: number;
-// };
-
 export type MinimumQuantityItemResponse = {
   id: string;
   item_object: InventoryItemsModel;

diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx
@@ -275,12 +275,6 @@ export const postInventory = (params: object, pathParams: object) => {
 export const getInventoryLog = (params: object, pathParams: object) => {
   return fireRequest("getInventoryLog", [params, "inventory"], pathParams);
 };
-export const setMinQuantity = (params: object, pathParams: object) => {
-  return fireRequest("setMinQuantity", [], params, pathParams);
-};
-export const getMinQuantity = (facilityId: object, params: object) => {
-  return fireRequest("getMinQuantity", [facilityId, "min_quantity"], params);
-};
 
 export const getInventorySummary = (facilityId: number, params: object) => {
   return fireRequest(

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -53,6 +53,7 @@ import {
   BedModel,
   InventorySummaryResponse,
   MinimumQuantityItemResponse,
+  InventoryItemsModel,
 } from "../Components/Facility/models";
 import {
   IDeleteBedCapacity,
@@ -778,6 +779,8 @@ const routes = {
   //inventory
   getItems: {
     path: "/api/v1/items/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<InventoryItemsModel>>(),
   },
   createInventory: {
     path: "/api/v1/facility/{facilityId}/inventory/",
@@ -789,6 +792,7 @@ const routes = {
   setMinQuantity: {
     path: "/api/v1/facility/{facilityId}/min_quantity/",
     method: "POST",
+    TRes: Type<MinimumQuantityItemResponse>(),
   },
   getMinQuantity: {
     path: "/api/v1/facility/{facilityId}/min_quantity/",