Skip to content

Commit

Permalink
Replaced dispatch with useQuery and request in Asset module (#6374)
Browse files Browse the repository at this point in the history
* changed to request in HL7monitor.tsx

* replaced dispatch in assetTypes

* changed dispatch in filteer, import files

* changed all dispatch requests with useQuery and request in asset module

* added TBody to various endpoints

* fixed assetfilter page

* fixed asset import modal page

* made requested changes

* made requested changes

* reverted to assetBedModel

* fixed delete asset function

* fixed after delete redirection

* removed extra setstates

* updated failing cypress tests for asset module

* removed useEffects

* removed changes from cypress files

* fixed merge issues

* fixed transactions issue

* remove console logs

----------

Co-authored-by: Rithvik Nishad <[email protected]>
  • Loading branch information
2 people authored and Ashesh3 committed Oct 20, 2023
1 parent 11fd15f commit 805b633
Show file tree
Hide file tree
Showing 12 changed files with 270 additions and 397 deletions.
2 changes: 1 addition & 1 deletion cypress/e2e/assets_spec/asset_homepage.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ describe("Asset Tab", () => {
assetPage.selectImportOption();
assetPage.selectImportFacility("Dummy Facility 1");
assetPage.importAssetFile();
assetPage.selectImportLocation("Camera Loc");
assetPage.selectImportLocation("Camera Locations");
assetPage.clickImportAsset();
});

Expand Down
79 changes: 27 additions & 52 deletions src/Components/Assets/AssetFilter.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
import { useState, useEffect, useCallback } from "react";
import { useAbortableEffect, statusType } from "../../Common/utils";
import { navigate, useQueryParams } from "raviger";
import { FacilitySelect } from "../Common/FacilitySelect";
import { FacilityModel } from "../Facility/models";
import { useDispatch } from "react-redux";
import {
getFacilityAssetLocation,
getPermittedFacility,
} from "../../Redux/actions";
import * as Notification from "../../Utils/Notifications.js";
import { LocationSelect } from "../Common/LocationSelect";
import { AssetClass, AssetLocationObject } from "./AssetTypes";
import { FieldLabel } from "../Form/FormFields/FormField";
import { SelectFormField } from "../Form/FormFields/SelectFormField";
import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
import routes from "../../Redux/api";
import useQuery from "../../Utils/request/useQuery";
import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
import dayjs from "dayjs";
import { FieldChangeEvent } from "../Form/FormFields/Utils";
Expand All @@ -35,7 +30,6 @@ const getDate = (value: any) =>

function AssetFilter(props: any) {
const { filter, onChange, closeFilter } = props;
const dispatch: any = useDispatch();
const [facility, setFacility] = useState<FacilityModel>({ name: "" });
const [location, setLocation] =
useState<AssetLocationObject>(initialLocation);
Expand All @@ -46,16 +40,39 @@ function AssetFilter(props: any) {
const [asset_class, setAssetClass] = useState<string>(
filter.asset_class || ""
);
const [facilityId, setFacilityId] = useState<number | "">(filter.facility);
const [facilityId, setFacilityId] = useState<string | "">(filter.facility);
const [locationId, setLocationId] = useState<string | "">(filter.location);
const [warrantyExpiry, setWarrantyExpiry] = useState({
before: filter.warranty_amc_end_of_validity_before || null,
after: filter.warranty_amc_end_of_validity_after || null,
});
const [qParams, _] = useQueryParams();

useQuery(routes.getPermittedFacility, {
pathParams: { id: facilityId },
onResponse: ({ res, data }) => {
if (res?.status === 200 && data) {
setFacility(data);
}
},
prefetch: !!facilityId,
});

useQuery(routes.getFacilityAssetLocation, {
pathParams: {
facilityId: String(facilityId),
locationId: String(locationId),
},
onResponse: ({ res, data }) => {
if (res?.status === 200 && data) {
setLocation(data);
}
},
prefetch: !!(facilityId && locationId),
});

useEffect(() => {
setFacilityId(facility?.id ? facility?.id : "");
setFacilityId(facility?.id ? `${facility?.id}` : "");
setLocationId(
facility?.id === qParams.facility ? qParams.location ?? "" : ""
);
Expand All @@ -75,48 +92,6 @@ function AssetFilter(props: any) {
else navigate("/assets");
}, [qParams]);

const fetchFacility = useCallback(
async (status: statusType) => {
if (facilityId) {
const facilityData: any = await dispatch(
getPermittedFacility(facilityId)
);
if (!status.aborted) {
setFacility(facilityData?.data);
}
}
},
[filter.facility]
);

const fetchLocation = useCallback(
async (status: statusType) => {
if (locationId && facilityId) {
const [locationData]: any = await Promise.all([
dispatch(
getFacilityAssetLocation(String(facilityId), String(locationId))
),
]);
if (!status.aborted && locationData !== undefined) {
if (!locationData.data)
Notification.Error({
msg: "Something went wrong..!",
});
else {
setLocation(locationData.data);
}
}
} else {
setLocation(initialLocation);
}
},
[filter.location]
);

useAbortableEffect((status: statusType) => {
filter.facility && fetchFacility(status);
filter.location && fetchLocation(status);
}, []);
const applyFilter = () => {
const data = {
facility: facilityId,
Expand Down
22 changes: 9 additions & 13 deletions src/Components/Assets/AssetImportModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import { FacilityModel } from "../Facility/models";
import { AssetData } from "./AssetTypes";
import * as Notification from "../../Utils/Notifications.js";
import { Cancel, Submit } from "../Common/components/ButtonV2";
import { listFacilityAssetLocation } from "../../Redux/actions";
import { useDispatch } from "react-redux";
import { Link } from "raviger";
import readXlsxFile from "read-excel-file";
import {
Expand All @@ -16,6 +14,8 @@ import {
import { parseCsvFile } from "../../Utils/utils";
import useConfig from "../../Common/hooks/useConfig";
import DialogModal from "../Common/Dialog";
import useQuery from "../../Utils/request/useQuery";
import routes from "../../Redux/api";
import { SelectFormField } from "../Form/FormFields/SelectFormField";

interface Props {
Expand All @@ -34,7 +34,6 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
location: "",
});
const [locations, setLocations] = useState<any>([]);
const dispatchAction: any = useDispatch();
const { sample_format_asset_import } = useConfig();
const [locationsLoading, setLocationsLoading] = useState(false);

Expand All @@ -43,18 +42,14 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
setSelectedFile(undefined);
onClose && onClose();
};

useEffect(() => {
setLocationsLoading(true);
dispatchAction(
listFacilityAssetLocation({}, { facility_external_id: facility.id })
).then(({ data }: any) => {
setLocationsLoading(false);
if (data.count > 0) {
useQuery(routes.listFacilityAssetLocation, {
pathParams: { facility_external_id: `${facility.id}` },
onResponse: ({ res, data }) => {
if (res?.status === 200 && data) {
setLocations(data.results);
}
});
}, []);
},
});

useEffect(() => {
const readFile = async () => {
Expand Down Expand Up @@ -362,6 +357,7 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
<Submit
onClick={handleUpload}
disabled={isImporting || !selectedFile}
data-testid="asset-import-btn"
>
{isImporting ? (
<i className="fa-solid fa-spinner animate-spin" />
Expand Down
Loading

0 comments on commit 805b633

Please sign in to comment.