diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx index 51f13c0a071..7b1a0bd8093 100644 --- a/src/Components/Assets/AssetManage.tsx +++ b/src/Components/Assets/AssetManage.tsx @@ -1,4 +1,4 @@ -import { useState, useCallback, useEffect, ReactElement, lazy } from "react"; +import { useState, useEffect, ReactElement, lazy } from "react"; import { AssetClass, assetClassProps, @@ -6,7 +6,6 @@ import { AssetService, AssetTransaction, } from "./AssetTypes"; -import { statusType, useAbortableEffect } from "../../Common/utils"; import Pagination from "../Common/Pagination"; import { navigate } from "raviger"; import QRCode from "qrcode.react"; @@ -30,6 +29,7 @@ import { AssetServiceEditModal } from "./AssetServiceEditModal"; import Page from "../Common/components/Page"; import request from "../../Utils/request/request"; import routes from "../../Redux/api"; +import useQuery from "../../Utils/request/useQuery"; interface AssetManageProps { assetId: string; @@ -58,77 +58,66 @@ const AssetManage = (props: AssetManageProps) => { const [servicesDetails, setServiceDetails] = useState< ReactElement | ReactElement[] >(); - const [isLoading, setIsLoading] = useState(false); const limit = 14; const authUser = useAuthUser(); const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [serviceEditData, setServiceEditData] = useState< AssetService & { open: boolean; viewOnly?: boolean } >(); + const [transactionFilter, setTransactionFilter] = useState({}); - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - // const assetData = await dispatch(getAsset(assetId)); - const { data: assetData } = await request(routes.getAsset, { - pathParams: { - external_id: assetId, - }, - }); - if (!status.aborted) { - setIsLoading(false); - if (assetData) { - setAsset(assetData); - - const transactionFilter = assetData.qr_code_id - ? { qr_code_id: assetData.qr_code_id } - : { external_id: assetId }; - - const [transactionsData, servicesData] = await Promise.all([ - request(routes.listAssetTransaction, { - ...transactionFilter, - query: { - limit, - offset, - }, - }), - request(routes.listAssetService, { - pathParams: { - asset_external_id: assetId, - }, - }), - ]); - - if (transactionsData?.data) { - setTransactions(transactionsData.data.results); - setTotalCount(transactionsData.data.count); - } else { - Notification.Error({ - msg: "Error fetching transactions", - }); - } - if (servicesData?.data) { - setServices(servicesData.data.results); - } else { - Notification.Error({ - msg: "Error fetching service logs", - }); - } - } else { - navigate("/not-found"); - } - } + const { data: assetData, loading } = useQuery(routes.getAsset, { + pathParams: { + external_id: assetId, }, - [assetId, offset] + }); + + const { data: transactionsData, refetch } = useQuery( + routes.listAssetTransaction, + { + prefetch: false, + ...transactionFilter, + query: { + limit, + offset, + }, + } ); - useAbortableEffect( - (status: statusType) => { - fetchData(status); - }, - [fetchData] + const { data: servicesData, refetch: serviceRefetch } = useQuery( + routes.listAssetService, + { + pathParams: { + asset_external_id: assetId, + }, + } ); + useEffect(() => { + if (assetData) setAsset(assetData); + }, [assetData]); + + useEffect(() => { + if (transactionsData) { + setTransactions(transactionsData.results); + setTotalCount(transactionsData.count); + } + }, [transactionsData]); + + useEffect(() => { + if (servicesData) setServices(servicesData.results); + }, [servicesData]); + + useEffect(() => { + if (assetData) { + const transactionFilter = assetData.qr_code_id + ? { qr_code_id: assetData.qr_code_id } + : { external_id: assetId }; + setTransactionFilter(transactionFilter); + refetch(); + } + }, [assetData, assetId, refetch]); + const handlePagination = (page: number, limit: number) => { const offset = (page - 1) * limit; setCurrentPage(page); @@ -285,7 +274,7 @@ const AssetManage = (props: AssetManageProps) => { populateServiceTableRows(services); }, [services]); - if (isLoading) return ; + if (loading) return ; if (isPrintMode) return ; const assetClassProp = @@ -598,7 +587,7 @@ const AssetManage = (props: AssetManageProps) => { handleClose={() => setServiceEditData({ ...serviceEditData, open: false }) } - handleUpdate={() => fetchData({ aborted: false })} + handleUpdate={() => serviceRefetch()} show={serviceEditData.open} viewOnly={serviceEditData.viewOnly} /> diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx index 62db71585d9..349fcc2b585 100644 --- a/src/Components/Assets/AssetServiceEditModal.tsx +++ b/src/Components/Assets/AssetServiceEditModal.tsx @@ -41,9 +41,6 @@ export const AssetServiceEditModal = (props: { }, body: body, }); - // const res = await dispatchAction( - // updateAssetService(props.asset?.id ?? "", props.service_record.id, data) - // ); setIsLoading(false); if (data) { Notification.Success({ diff --git a/src/Components/Assets/AssetType/HL7Monitor.tsx b/src/Components/Assets/AssetType/HL7Monitor.tsx index b620d281ed4..2b106569de4 100644 --- a/src/Components/Assets/AssetType/HL7Monitor.tsx +++ b/src/Components/Assets/AssetType/HL7Monitor.tsx @@ -31,21 +31,15 @@ const HL7Monitor = (props: HL7MonitorProps) => { const [localipAddress, setLocalIPAddress] = useState(""); const [ipadrdress_error, setIpAddress_error] = useState(""); const authUser = useAuthUser(); - const { - data: facility, - loading, - refetch, - } = useQuery(routes.getPermittedFacility, { + const { data: facility, loading } = useQuery(routes.getPermittedFacility, { pathParams: { id: facilityId }, }); useEffect(() => { if (facility?.middleware_address) { setFacilityMiddlewareHostname(facility.middleware_address); - } else { - () => refetch(); } - }, [facility, facilityId, refetch]); + }, [facility, facilityId]); useEffect(() => { setAssetType(asset?.asset_class); diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx index cddc845fe3b..b9dce4a994d 100644 --- a/src/Components/Assets/AssetType/ONVIFCamera.tsx +++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx @@ -40,21 +40,15 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => { const [refreshPresetsHash, setRefreshPresetsHash] = useState( Number(new Date()) ); - const { - data: facility, - loading, - refetch, - } = useQuery(routes.getPermittedFacility, { + const { data: facility, loading } = useQuery(routes.getPermittedFacility, { pathParams: { id: facilityId }, }); const authUser = useAuthUser(); useEffect(() => { if (facility?.middleware_address) { setFacilityMiddlewareHostname(facility.middleware_address); - } else { - () => refetch(); } - }, [facility, facilityId, refetch]); + }, [facility, facilityId]); useEffect(() => { if (asset) { @@ -110,15 +104,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => { const presetData = await axios.get( `https://${facilityMiddlewareHostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}` ); - // const res: any = await Promise.resolve( - // dispatch( - // createAssetBed( - // { meta: { ...data, ...presetData.data } }, - // assetId, - // bed?.id as string - // ) - // ) - // ); + const { res } = await request(routes.createAssetBed, { body: { meta: { ...data, ...presetData.data }, diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx index bc6c1033848..54c86c3e862 100644 --- a/src/Components/Assets/AssetsList.tsx +++ b/src/Components/Assets/AssetsList.tsx @@ -1,9 +1,8 @@ import QrReader from "react-qr-reader"; -import { statusType, useAbortableEffect } from "../../Common/utils"; import * as Notification from "../../Utils/Notifications.js"; import { listAssets } from "../../Redux/actions"; import { assetClassProps, AssetData } from "./AssetTypes"; -import { useState, useCallback, useEffect, lazy } from "react"; +import { useState, useEffect, lazy } from "react"; import { Link, navigate } from "raviger"; import AssetFilter from "./AssetFilter"; import { parseQueryParams } from "../../Utils/primitives"; @@ -24,6 +23,7 @@ import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover" import { useTranslation } from "react-i18next"; import request from "../../Utils/request/request"; import routes from "../../Redux/api"; +import useQuery from "../../Utils/request/useQuery"; const Loading = lazy(() => import("../Common/Loading")); @@ -48,62 +48,45 @@ const AssetsList = () => { const [status, setStatus] = useState(); const [facilityName, setFacilityName] = useState(); const [asset_class, setAssetClass] = useState(); - const [locationName, setLocationName] = useState(); const [importAssetModalOpen, setImportAssetModalOpen] = useState(false); const assetsExist = assets.length > 0 && Object.keys(assets[0]).length > 0; const [showFacilityDialog, setShowFacilityDialog] = useState(false); const [selectedFacility, setSelectedFacility] = useState({ name: "", }); + const params = { + limit: resultsPerPage, + page: qParams.page, + offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage, + search_text: qParams.search || "", + facility: qParams.facility || "", + asset_type: qParams.asset_type || "", + asset_class: qParams.asset_class || "", + location: qParams.facility ? qParams.location || "" : "", + status: qParams.status || "", + }; - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const params = { - limit: resultsPerPage, - page: qParams.page, - offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage, - search_text: qParams.search || "", - facility: qParams.facility || "", - asset_type: qParams.asset_type || "", - asset_class: qParams.asset_class || "", - location: qParams.facility ? qParams.location || "" : "", - status: qParams.status || "", - }; - const { data } = await request(routes.listAssets, { - query: params, - }); - if (!status.aborted) { - setIsLoading(false); - if (!data) - Notification.Error({ - msg: "Something went wrong..!", - }); - else { - setAssets(data.results); - setTotalCount(data.count); - if (qParams.facility) { - const { data } = await request(routes.getAnyFacility, { - pathParams: { id: qParams.facility }, - }); - if (data) { - setSelectedFacility(data); - } - } - } - } - }, - [ - resultsPerPage, - qParams.page, - qParams.search, - qParams.facility, - qParams.asset_type, - qParams.asset_class, - qParams.location, - qParams.status, - ] - ); + const { data: assetList } = useQuery(routes.listAssets, { + query: params, + }); + const { data: facilityResponse } = useQuery(routes.getAnyFacility, { + pathParams: { id: qParams.facility }, + }); + + useEffect(() => { + if (assetList) { + setAssets(assetList.results); + setTotalCount(assetList.count); + } + }, [assetList]); + + useEffect(() => { + if (facilityResponse) { + setFacility(facilityResponse); + setSelectedFacility(facilityResponse); + setFacilityName(facilityResponse.name); + } + }, [facilityResponse]); useEffect(() => { setAssetType(qParams.asset_type); @@ -117,63 +100,12 @@ const AssetsList = () => { setAssetClass(qParams.asset_class); }, [qParams.asset_class]); - useAbortableEffect( - (status: statusType) => { - fetchData(status); - }, - [fetchData] - ); - useEffect(() => { - async function fetchFacilityName() { - if (!qParams.facility) return setFacilityName(""); - const { data } = await request(routes.getAnyFacility, { - pathParams: { id: qParams.facility }, - }); - setFacilityName(data?.name); - } - fetchFacilityName(); - }, [qParams.facility]); - - const fetchFacility = useCallback( - async (status: statusType) => { - if (!qParams.facility) return setFacility(undefined); - setIsLoading(true); - const res = await request(routes.getAnyFacility, { - pathParams: { id: qParams.facility }, - }); - if (!status.aborted) { - setFacility(res?.data); - setIsLoading(false); - } - }, - [qParams.facility] - ); - const fetchLocationName = useCallback( - async (status: statusType) => { - if (!qParams.location || !qParams.facility) - return setLocationName(undefined); - setIsLoading(true); - const { data } = await request(routes.getFacilityAssetLocation, { - pathParams: { - facility_external_id: String(qParams.facility), - external_id: String(qParams.location), - }, - }); - if (!status.aborted) { - setLocationName(data?.name); - setIsLoading(false); - } - }, - [qParams.facility, qParams.location] - ); - - useAbortableEffect( - (status: statusType) => { - fetchFacility(status); - fetchLocationName(status); + const { data: location } = useQuery(routes.getFacilityAssetLocation, { + pathParams: { + facility_external_id: String(qParams.facility), + external_id: String(qParams.location), }, - [fetchFacility, fetchLocationName] - ); + }); const getAssetIdFromQR = async (assetUrl: string) => { try { @@ -194,7 +126,6 @@ const AssetsList = () => { }; const checkValidAssetId = async (assetId: string) => { - // const assetData = await dispatch(getAsset(assetId)); const { data: assetData } = await request(routes.getAsset, { pathParams: { id: assetId }, }); @@ -437,7 +368,7 @@ const AssetsList = () => { value("Asset Type", "asset_type", asset_type ?? ""), value("Asset Class", "asset_class", asset_class ?? ""), value("Status", "status", status?.replace(/_/g, " ") ?? ""), - value("Location", "location", locationName ?? ""), + value("Location", "location", location?.name ?? ""), ]} />
diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx index 1a5bd7e4fb1..409bd001386 100644 --- a/src/Redux/actions.tsx +++ b/src/Redux/actions.tsx @@ -841,47 +841,15 @@ export const listAssets = (params: object) => fireRequest("listAssets", [], params); export const createAsset = (params: object) => fireRequest("createAsset", [], params); -export const getAssetUserLocation = (params: object) => - fireRequest("getAssetUserLocation", [], params); -export const createAssetUserLocation = (params: object) => - fireRequest("createAssetUserLocation", [], params); export const getAsset = (id: string) => fireRequest("getAsset", [], {}, { external_id: id }); export const deleteAsset = (id: string) => fireRequest("deleteAsset", [], {}, { external_id: id }); export const updateAsset = (id: string, params: object) => fireRequest("updateAsset", [], params, { external_id: id }); -export const partialUpdateAsset = (id: string, params: object) => - fireRequest("partialUpdateAsset", [], params, { external_id: id }); export const operateAsset = (id: string, params: object) => fireRequest("operateAsset", [], params, { external_id: id }); -export const listAssetTransaction = (params: object) => - fireRequest("listAssetTransaction", [], params); -export const getAssetTransaction = (id: string) => - fireRequest("getAssetTransaction", [], {}, { id }); - -export const listAssetService = (params: object, asset_external_id: string) => - fireRequest("listAssetService", [], params, { asset_external_id }); -export const getAssetService = ( - params: object, - asset_external_id: string, - external_id: string -) => - fireRequest("getAssetService", [], params, { - asset_external_id, - external_id, - }); -export const updateAssetService = ( - asset_external_id: string, - external_id: string, - params: object -) => - fireRequest("updateAssetService", [], params, { - asset_external_id, - external_id, - }); - // ABDM related export const generateAadhaarOtp = (aadhaar: string) => fireRequest("generateAadhaarOtp", [], { aadhaar });