From 9d2f678dc9cb256ceb00e7006e0b75b08916e375 Mon Sep 17 00:00:00 2001 From: Gampa Sri Harsh <114745442+sriharsh05@users.noreply.github.com> Date: Wed, 31 Jan 2024 13:13:17 +0530 Subject: [PATCH] Replaced useDispatch with useQuery/request in Inventory Management (#7041) * replace useDispacth with useQuery in inventoryList * replace useDispatch with useQuery/request in InventoryLog * fix failed test case * replace useDispatch with useQuery/request in MinQuantity List * replace useDispatch with useQuery/request in minimum quantity required modal * replace useDispatch with useQuery/request in SetInventoryForm * implement requested changes * replace useDispatch with useQuery/request in AddInventoryForm * delete all unused fire requests * implement requested changes * remove duplicatly defined model --------- Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com> --- src/Components/Facility/AddInventoryForm.tsx | 128 ++++++--------- src/Components/Facility/InventoryList.tsx | 75 +++------ src/Components/Facility/InventoryLog.tsx | 153 +++++++----------- src/Components/Facility/MinQuantityList.tsx | 82 ++++------ .../Facility/MinQuantityRequiredModal.tsx | 88 +++++----- src/Components/Facility/SetInventoryForm.tsx | 130 ++++++--------- src/Components/Facility/models.tsx | 48 ++++++ src/Redux/actions.tsx | 45 ------ src/Redux/api.tsx | 28 +++- 9 files changed, 317 insertions(+), 460 deletions(-) diff --git a/src/Components/Facility/AddInventoryForm.tsx b/src/Components/Facility/AddInventoryForm.tsx index 9e4f761b550..5188f50d088 100644 --- a/src/Components/Facility/AddInventoryForm.tsx +++ b/src/Components/Facility/AddInventoryForm.tsx @@ -1,21 +1,15 @@ -import { useCallback, useReducer, useState, useEffect, lazy } from "react"; -import { useDispatch } from "react-redux"; +import { useReducer, useState, useEffect, lazy } from "react"; import Card from "../../CAREUI/display/Card"; -import { statusType, useAbortableEffect } from "../../Common/utils"; -import { - getItems, - postInventory, - getAnyFacility, - getInventorySummary, -} from "../../Redux/actions"; import * as Notification from "../../Utils/Notifications.js"; import Page from "../Common/components/Page"; import { FieldLabel } from "../Form/FormFields/FormField"; import { SelectFormField } from "../Form/FormFields/SelectFormField"; import TextFormField from "../Form/FormFields/TextFormField"; -import { InventoryItemsModel } from "./models"; import { Cancel, Submit } from "../Common/components/ButtonV2"; import useAppHistory from "../../Common/hooks/useAppHistory"; +import useQuery from "../../Utils/request/useQuery"; +import routes from "../../Redux/api"; +import request from "../../Utils/request/request"; const Loading = lazy(() => import("../Common/Loading")); @@ -59,77 +53,41 @@ export const AddInventoryForm = (props: any) => { const { goBack } = useAppHistory(); const [state, dispatch] = useReducer(inventoryFormReducer, initialState); const { facilityId } = props; - const dispatchAction: any = useDispatch(); const [isLoading, setIsLoading] = useState(false); const [offset, _setOffset] = useState(0); const [stockError, setStockError] = useState(""); - const [inventory, setInventory] = useState([]); - const [data, setData] = useState>([]); const [currentUnit, setCurrentUnit] = useState(); - const [facilityName, setFacilityName] = useState(""); const limit = 14; - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const res = await dispatchAction(getItems({ limit, offset })); - if (!status.aborted) { - if (res && res.data) { - setData(res.data.results); - } - setIsLoading(false); - } - }, - [dispatchAction, offset] - ); - useAbortableEffect( - (status: statusType) => { - fetchData(status); + const { data } = useQuery(routes.getItems, { + query: { + limit, + offset, }, - [fetchData] - ); + }); - const fetchInventoryData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const res = await dispatchAction( - getInventorySummary(facilityId, { limit, offset }) - ); - if (!status.aborted) { - if (res && res.data) { - setInventory(res.data.results); - } - setIsLoading(false); - } + const { data: inventory } = useQuery(routes.getInventorySummary, { + pathParams: { + facility_external_id: facilityId, }, - [dispatchAction, facilityId] - ); - - useAbortableEffect( - (status: statusType) => { - fetchInventoryData(status); + query: { + limit, + offset, }, - [fetchInventoryData] - ); + prefetch: facilityId !== undefined, + }); - 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, + }); useEffect(() => { // set the default units according to the item - const item = data.find((item) => item.id === Number(state.form.id)); + const item = data?.results.find( + (item) => item.id === Number(state.form.id) + ); if (item) { dispatch({ type: "set_form", @@ -140,7 +98,9 @@ export const AddInventoryForm = (props: any) => { }, [state.form.id]); const defaultUnitConverter = (unitData: any) => { - const unitName = data[Number(unitData.item - 1)].allowed_units?.filter( + const unitName = data?.results[ + Number(unitData.item - 1) + ].allowed_units?.filter( (u: any) => Number(u.id) === Number(unitData.unit) )[0].name; if (unitName === "Dozen") { @@ -155,9 +115,9 @@ export const AddInventoryForm = (props: any) => { // this function determines whether the stock which user has demanded to use is available or not ! const stockValidation = (data: any) => { - if (inventory && inventory.length) { + if (inventory && inventory.results.length) { // get the stock cont of item selected - const stockBefore = inventory.filter( + const stockBefore = inventory.results.filter( (inventoryItem: any) => Number(inventoryItem.item_object.id) === Number(data.item) ); @@ -177,7 +137,7 @@ export const AddInventoryForm = (props: any) => { } setStockError(""); return true; - } else if (inventory && inventory.length === 0) { + } else if (inventory && inventory.results.length === 0) { setStockError("No Stock Available !"); setIsLoading(false); return false; @@ -243,17 +203,19 @@ export const AddInventoryForm = (props: any) => { data.quantity = data.quantity / 1000; data.unit = 6; } - const res = await dispatchAction(postInventory(data, { facilityId })); + await request(routes.createInventory, { + body: data, + pathParams: { facilityId }, + onResponse: ({ res, data }) => { + if (res?.ok && data) { + Notification.Success({ + msg: "Inventory created successfully", + }); + goBack(); + } + }, + }); setIsLoading(false); - - if (res && res.data && (res.status === 200 || res.status === 201)) { - Notification.Success({ - msg: "Inventory created successfully", - }); - goBack(); - } else { - setIsLoading(false); - } } else { setIsLoading(false); } @@ -273,7 +235,9 @@ export const AddInventoryForm = (props: any) => {
@@ -287,7 +251,7 @@ export const AddInventoryForm = (props: any) => { name="id" onChange={handleChange} value={state.form.id} - options={data.map((e) => { + options={(data?.results ?? []).map((e) => { return { id: e.id, name: e.name }; })} optionValue={(inventory) => inventory.id} diff --git a/src/Components/Facility/InventoryList.tsx b/src/Components/Facility/InventoryList.tsx index 837b0b2ce2a..87600e7b22d 100644 --- a/src/Components/Facility/InventoryList.tsx +++ b/src/Components/Facility/InventoryList.tsx @@ -1,65 +1,36 @@ -import { useState, useCallback, useEffect, lazy } from "react"; - +import { useState, lazy } from "react"; import { navigate } from "raviger"; -import { useDispatch } from "react-redux"; -import { statusType, useAbortableEffect } from "../../Common/utils"; -import { getInventorySummary, getAnyFacility } from "../../Redux/actions"; import Pagination from "../Common/Pagination"; import { classNames } from "../../Utils/utils"; import Page from "../Common/components/Page"; import ButtonV2 from "../Common/components/ButtonV2"; import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor"; +import useQuery from "../../Utils/request/useQuery"; +import routes from "../../Redux/api"; const Loading = lazy(() => import("../Common/Loading")); export default function InventoryList(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 limit = 14; - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const res = await dispatchAction( - getInventorySummary(facilityId, { limit, offset }) - ); - if (!status.aborted) { - if (res?.data) { - setInventory(res.data.results); - setTotalCount(res.data.count); - } - setIsLoading(false); - } + const { data: inventoryData } = useQuery(routes.getInventorySummary, { + pathParams: { + facility_external_id: facilityId, }, - [dispatchAction, offset, facilityId] - ); - - useAbortableEffect( - (status: statusType) => { - fetchData(status); + query: { + limit, + offset, }, - [fetchData] - ); - - useEffect(() => { - async function fetchFacilityName() { - if (facilityId) { - const res = await dispatchAction(getAnyFacility(facilityId)); + prefetch: facilityId !== undefined, + }); - 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; @@ -68,8 +39,8 @@ export default function InventoryList(props: any) { }; let inventoryList: any = []; - if (inventory?.length) { - inventoryList = inventory.map((inventoryItem: any) => ( + if (inventoryData?.results.length) { + inventoryList = inventoryData.results.map((inventoryItem: any) => ( )); - } else if (inventory && inventory.length === 0) { + } else if (inventoryData?.results && inventoryData.results.length === 0) { inventoryList = ( @@ -113,9 +84,9 @@ export default function InventoryList(props: any) { ); } - if (isLoading || !inventory) { + if (!inventoryData?.results) { inventoryItem = ; - } else if (inventory) { + } else if (inventoryData.results) { inventoryItem = ( <>
@@ -135,12 +106,12 @@ export default function InventoryList(props: any) {
- {totalCount > limit && ( + {inventoryData?.count > limit && (
@@ -153,7 +124,7 @@ export default function InventoryList(props: any) {
diff --git a/src/Components/Facility/InventoryLog.tsx b/src/Components/Facility/InventoryLog.tsx index 8369a7d1562..474de009f76 100644 --- a/src/Components/Facility/InventoryLog.tsx +++ b/src/Components/Facility/InventoryLog.tsx @@ -1,114 +1,75 @@ -import { useState, useCallback, useEffect, lazy } from "react"; +import { useState, lazy } from "react"; import * as Notification from "../../Utils/Notifications.js"; -import { useDispatch } from "react-redux"; -import { - getInventoryLog, - flagInventoryItem, - deleteLastInventoryLog, - getAnyFacility, -} from "../../Redux/actions"; -import { statusType, useAbortableEffect } from "../../Common/utils"; import Pagination from "../Common/Pagination"; import { formatDateTime } from "../../Utils/utils"; import Page from "../Common/components/Page.js"; import CareIcon from "../../CAREUI/icons/CareIcon.js"; import ButtonV2 from "../Common/components/ButtonV2.js"; +import useQuery from "../../Utils/request/useQuery.js"; +import routes from "../../Redux/api.js"; +import request from "../../Utils/request/request.js"; const Loading = lazy(() => import("../Common/Loading")); export default function InventoryLog(props: any) { const { facilityId, inventoryId }: any = props; - - const dispatchAction: any = useDispatch(); - const [isLoading, setIsLoading] = useState(false); const [saving, setSaving] = useState(false); - const initialInventory: any[] = []; let inventoryItem: any = null; - const [inventory, setInventory] = useState(initialInventory); - const [current_stock, setCurrentStock] = useState(0); const [offset, setOffset] = useState(0); const [currentPage, setCurrentPage] = useState(1); - const [totalCount, setTotalCount] = useState(0); const limit = 14; const item = inventoryId; - const [itemName, setItemName] = useState(" "); - const [facilityName, setFacilityName] = useState(""); - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const res = await dispatchAction( - getInventoryLog(facilityId, { item, limit, offset }) - ); - if (!status.aborted) { - if (res?.data) { - setInventory(res.data.results); - setCurrentStock(res.data.results[0].current_stock); - setTotalCount(res.data.count); - setItemName(res.data.results[0].item_object.name); - } - setIsLoading(false); - } + const { data, refetch } = useQuery(routes.getInventoryLog, { + pathParams: { + facilityId: facilityId, }, - [dispatchAction, offset, facilityId] - ); - - useEffect(() => { - async function fetchFacilityName() { - if (facilityId) { - const res = await dispatchAction(getAnyFacility(facilityId)); + query: { + item, + limit, + offset, + }, + prefetch: facilityId !== undefined, + }); - setFacilityName(res?.data?.name || ""); - } else { - setFacilityName(""); - } - } - fetchFacilityName(); - }, [dispatchAction, facilityId]); + const { data: facilityObject } = useQuery(routes.getAnyFacility, { + pathParams: { id: facilityId }, + prefetch: !!facilityId, + }); const flagFacility = async (id: string) => { setSaving(true); - const res = await dispatchAction( - flagInventoryItem({ facility_external_id: facilityId, external_id: id }) - ); - - if (res && res.status === 204) { - Notification.Success({ - msg: "Updated Successfully", - }); - fetchData({ aborted: false }); - } + await request(routes.flagInventoryItem, { + pathParams: { facility_external_id: facilityId, external_id: id }, + query: { item: id }, + onResponse: ({ res }) => { + if (res?.ok) { + Notification.Success({ + msg: "Updated Successfully", + }); + } + refetch(); + }, + }); setSaving(false); }; const removeLastInventoryLog = async (id: any) => { setSaving(true); - const res = await dispatchAction( - deleteLastInventoryLog({ - facility_external_id: facilityId, - id: id, - }) - ); - - if (res?.status === 201) { - Notification.Success({ - msg: "Last entry deleted Successfully", - }); - fetchData({ aborted: false }); - } else { - Notification.Error({ - msg: "Error while deleting last entry: " + (res?.data?.detail || ""), - }); - } + await request(routes.deleteLastInventoryLog, { + pathParams: { facility_external_id: facilityId, id: id }, + onResponse: ({ res }) => { + if (res?.ok) { + Notification.Success({ + msg: "Last entry deleted Successfully", + }); + refetch(); + } + }, + }); setSaving(false); }; - useAbortableEffect( - (status: statusType) => { - fetchData(status); - }, - [fetchData] - ); const handlePagination = (page: number, limit: number) => { const offset = (page - 1) * limit; setCurrentPage(page); @@ -116,8 +77,8 @@ export default function InventoryLog(props: any) { }; let inventoryList: any = []; - if (inventory?.length) { - inventoryList = inventory.map((inventoryItem: any, index) => ( + if (data?.results.length) { + inventoryList = data.results.map((inventoryItem: any, index) => (
@@ -159,9 +120,11 @@ export default function InventoryLog(props: any) {
Marks this transaction as accident
- This action will not affect the total stock. To delete the - transaction, create another transaction that undos the effect - of this, or click Delete Last Entry. + This action will not affect the total stock. +
+ To delete the transaction, create another transaction that +
+ undos the effect of this, or click Delete Last Entry.
)}
@@ -193,7 +156,7 @@ export default function InventoryLog(props: any) { )); - } else if (inventory && inventory.length === 0) { + } else if (data?.results && data.results.length === 0) { inventoryList = ( @@ -205,9 +168,9 @@ export default function InventoryLog(props: any) { ); } - if (isLoading || !inventory) { + if (!data?.results) { inventoryItem = ; - } else if (inventory) { + } else if (data.results) { inventoryItem = ( <>
@@ -233,12 +196,12 @@ export default function InventoryLog(props: any) {
- {totalCount > limit && ( + {data.count > limit && (
@@ -253,16 +216,16 @@ export default function InventoryLog(props: any) { title="Inventory Log" className="mx-3 md:mx-8" crumbsReplacements={{ - [facilityId]: { name: facilityName }, - [inventoryId]: { name: itemName }, + [facilityId]: { name: facilityObject?.name }, + [inventoryId]: { name: data?.results[0].item_object.name }, }} backUrl={`/facility/${facilityId}/inventory`} >
-

Item: {itemName}

- {current_stock > 0 && ( +

Item: {data?.results[0].item_object.name}

+ {data?.results && data.results[0].current_stock > 0 && (
Deletes the last transaction by creating an @@ -273,7 +236,7 @@ export default function InventoryLog(props: any) { id="delete-last-entry" variant="danger" onClick={(_) => - removeLastInventoryLog(inventory[0].item_object.id) + removeLastInventoryLog(data?.results[0].item_object.id) } disabled={saving} > diff --git a/src/Components/Facility/MinQuantityList.tsx b/src/Components/Facility/MinQuantityList.tsx index 941722bd810..3e61dd81577 100644 --- 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) => (
@@ -144,7 +118,7 @@ export default function MinQuantityList(props: any) { )); - } else if (inventory && inventory.length === 0) { + } else if (minimumQuantityData && minimumQuantityData.results.length === 0) { inventoryList = ( ; - } else if (inventory) { + } else if (minimumQuantityData) { inventoryItem = ( <>
@@ -188,12 +162,12 @@ export default function MinQuantityList(props: any) {
- {totalCount > limit && ( + {minimumQuantityData.count > limit && (
@@ -206,7 +180,7 @@ export default function MinQuantityList(props: any) { setShowMinQuantityRequiredModal(false)} handleUpdate={() => { - fetchData({ aborted: false }); + minimumQuantityfetch(); setShowMinQuantityRequiredModal(false); }} /> diff --git a/src/Components/Facility/MinQuantityRequiredModal.tsx b/src/Components/Facility/MinQuantityRequiredModal.tsx index 46296545500..1a604e3a66e 100644 --- a/src/Components/Facility/MinQuantityRequiredModal.tsx +++ b/src/Components/Facility/MinQuantityRequiredModal.tsx @@ -1,15 +1,11 @@ -import { useCallback, useReducer, useState } from "react"; -import { useDispatch } from "react-redux"; -import { statusType, useAbortableEffect } from "../../Common/utils"; -import { - updateMinQuantity, - getAnyFacility, - getMinQuantityOfItem, -} from "../../Redux/actions"; +import { useReducer, useState } from "react"; import * as Notification from "../../Utils/Notifications.js"; import ButtonV2 from "../Common/components/ButtonV2"; import DialogModal from "../Common/Dialog"; import TextFormField from "../Form/FormFields/TextFormField"; +import useQuery from "../../Utils/request/useQuery"; +import routes from "../../Redux/api"; +import request from "../../Utils/request/request"; const initForm = { id: "", @@ -42,56 +38,47 @@ export const MinQuantityRequiredModal = (props: any) => { const [state, dispatch] = useReducer(inventoryFormReducer, initialState); const { facilityId, inventoryId, itemId, show, handleClose, handleUpdate } = props; - const dispatchAction: any = useDispatch(); - const [isLoading, setIsLoading] = useState(false); - const [data, setData] = useState(" "); - const [facilityName, setFacilityName] = useState(""); + const [isLoading, setIsLoading] = useState(true); - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const res = await dispatchAction( - getMinQuantityOfItem(facilityId, inventoryId) - ); - if (!status.aborted) { - if (res && res.data) { - setData(res.data.item_object.name); - const form = { ...state.form, quantity: res.data.min_quantity }; + const { data: minimumQuantityItemData } = useQuery( + routes.getMinQuantityItem, + { + pathParams: { + facilityId, + inventoryId, + }, + prefetch: !!facilityId && !!inventoryId, + onResponse: async ({ res, data }) => { + setIsLoading(true); + if (res?.ok && data) { + const form = { ...state.form, quantity: data.min_quantity }; dispatch({ type: "set_form", form }); } - if (facilityId) { - const res = await dispatchAction(getAnyFacility(facilityId)); - - setFacilityName(res?.data?.name || ""); - } else { - setFacilityName(""); - } - setIsLoading(false); - } - }, - [dispatchAction, facilityId, inventoryId] - ); - useAbortableEffect( - (status: statusType) => { - fetchData(status); - }, - [fetchData] + }, + } ); + const { data: facilityObject } = useQuery(routes.getAnyFacility, { + pathParams: { id: facilityId }, + prefetch: !!facilityId, + }); + const handleSubmit = async (e: any) => { e.preventDefault(); setIsLoading(true); - const data: any = { - min_quantity: Number(state.form.quantity), - item: Number(itemId), - }; - - const res = await dispatchAction( - updateMinQuantity(data, { facilityId, inventoryId }) - ); + const { res, data } = await request(routes.updateMinQuantity, { + pathParams: { + facilityId, + inventoryId, + }, + body: { + min_quantity: Number(state.form.quantity), + item: Number(itemId), + }, + }); setIsLoading(false); - if (res && res.data) { + if (res?.ok && data) { Notification.Success({ msg: "Minimum quantity updated successfully", }); @@ -138,8 +125,9 @@ export const MinQuantityRequiredModal = (props: any) => { {" "}

- Set the minimum quantity for {data} in{" "} - {facilityName} + Set the minimum quantity for{" "} + {minimumQuantityItemData?.item_object.name} in{" "} + {facilityObject?.name}

diff --git a/src/Components/Facility/SetInventoryForm.tsx b/src/Components/Facility/SetInventoryForm.tsx index d0a275e41ba..c963aa05f5f 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,49 @@ 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) => 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) => !existingItemIDs.includes(item.id as number) + ); + 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 +101,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 }) => { + if (res?.ok) { + 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 ( & { 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; +}; + +export type MinimumQuantityItemResponse = { + id: string; + item_object: InventoryItemsModel; + created_date: string; + min_quantity: number; + 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; +}; diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx index 1fadd678f73..8350ca8bd29 100644 --- a/src/Redux/actions.tsx +++ b/src/Redux/actions.tsx @@ -187,51 +187,6 @@ export const getConsultation = (id: string) => { export const updateConsultation = (id: string, params: object) => { return fireRequest("updateConsultation", [], params, { id: id }); }; -//Inventory -export const getItems = (params: object) => { - return fireRequest("getItems", [], params); -}; -export const postInventory = (params: object, pathParams: object) => { - return fireRequest("createInventory", [], params, pathParams); -}; -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 getMinQuantityOfItem = ( - facilityId: object, - externalId: object -) => { - return fireRequest("getMinQuantity", [ - facilityId, - "min_quantity", - externalId, - ]); -}; - -export const updateMinQuantity = (pathParams: object, params: object) => { - return fireRequest("updateMinQuantity", [], pathParams, params); -}; -export const getInventorySummary = (facilityId: number, params: object) => { - return fireRequest( - "getInventorySummary", - [facilityId, "inventorysummary"], - params - ); -}; -export const flagInventoryItem = (params: object) => { - return fireRequest("flagInventoryItem", [], {}, params); -}; - -export const deleteLastInventoryLog = (params: object) => { - return fireRequest("deleteLastInventoryLog", [], {}, params); -}; export const generateDischargeSummary = (pathParams: object) => { return fireRequest("dischargeSummaryGenerate", [], {}, pathParams); diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx index a94efeb7ea1..de30ed7b567 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -51,6 +51,10 @@ import { LocationModel, PatientNotesModel, BedModel, + MinimumQuantityItemResponse, + InventorySummaryResponse, + InventoryLogResponse, + InventoryItemsModel, } from "../Components/Facility/models"; import { IDeleteBedCapacity, @@ -790,29 +794,43 @@ const routes = { //inventory getItems: { path: "/api/v1/items/", + method: "GET", + TRes: Type>(), }, createInventory: { path: "/api/v1/facility/{facilityId}/inventory/", method: "POST", + TRes: Type(), }, getInventoryLog: { - path: "/api/v1/facility", + path: "/api/v1/facility/{facilityId}/inventory/", + method: "GET", + TRes: Type>(), }, setMinQuantity: { path: "/api/v1/facility/{facilityId}/min_quantity/", method: "POST", + TRes: Type(), }, getMinQuantity: { - path: "/api/v1/facility", + path: "/api/v1/facility/{facilityId}/min_quantity/", method: "GET", + TRes: Type>(), + }, + getMinQuantityItem: { + path: "/api/v1/facility/{facilityId}/min_quantity/{inventoryId}/", + method: "GET", + TRes: Type(), }, updateMinQuantity: { - path: "/api/v1/facility/{facilityId}/min_quantity/{inventoryId}", + path: "/api/v1/facility/{facilityId}/min_quantity/{inventoryId}/", method: "PATCH", + TRes: Type>(), }, getInventorySummary: { - path: "/api/v1/facility", + path: "/api/v1/facility/{facility_external_id}/inventorysummary/", method: "GET", + TRes: Type>(), }, getItemName: { path: "/api/v1/items", @@ -821,10 +839,12 @@ const routes = { flagInventoryItem: { path: "/api/v1/facility/{facility_external_id}/inventory/{external_id}/flag/", method: "PUT", + TRes: Type>(), }, deleteLastInventoryLog: { path: "/api/v1/facility/{facility_external_id}/inventory/delete_last/?item={id}", method: "DELETE", + TRes: Type>(), }, dischargeSummaryGenerate: { path: "/api/v1/consultation/{external_id}/generate_discharge_summary/",