diff --git a/src/Components/Facility/SetInventoryForm.tsx b/src/Components/Facility/SetInventoryForm.tsx index d0a275e41ba..fea43b9e7df 100644 --- 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>([]); const [currentUnit, setCurrentUnit] = useState(); - 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) => { dispatch({ type: "set_form", form: { ...state.form, [name]: value } }); }; - if (isLoading) { - return ; - } - return ( { 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 index d56961c0eef..62498a2b873 100644 --- 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>(), }, 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(), }, getMinQuantity: { path: "/api/v1/facility/{facilityId}/min_quantity/",