From 8a9234feac7cfbe6eaed5fde410774308a20adfe Mon Sep 17 00:00:00 2001 From: Rithvik Nishad Date: Thu, 28 Dec 2023 14:01:12 +0530 Subject: [PATCH] Migrate Bed Management to `useQuery` and move pagination state to query params (#6909) * fixes #6906; migrate Bed Management to `useQuery` * uncommented related test * handle the auto-fill delay * handle the google map delay * revert vite --------- Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com> Co-authored-by: Khavin Shankar --- cypress/e2e/facility_spec/locations.cy.ts | 34 ++--- .../pageobject/Facility/FacilityCreation.ts | 3 + src/Components/Facility/BedManagement.tsx | 127 +++++------------- src/Redux/api.tsx | 3 + 4 files changed, 58 insertions(+), 109 deletions(-) diff --git a/cypress/e2e/facility_spec/locations.cy.ts b/cypress/e2e/facility_spec/locations.cy.ts index b9d26ee3100..d6377ba97c3 100644 --- a/cypress/e2e/facility_spec/locations.cy.ts +++ b/cypress/e2e/facility_spec/locations.cy.ts @@ -3,16 +3,18 @@ import { AssetPage } from "../../pageobject/Asset/AssetCreation"; import { UserCreationPage } from "../../pageobject/Users/UserCreation"; import FacilityPage from "../../pageobject/Facility/FacilityCreation"; import FacilityLocation from "../../pageobject/Facility/FacilityLocation"; +import { AssetPagination } from "../../pageobject/Asset/AssetPagination"; import FacilityHome from "../../pageobject/Facility/FacilityHome"; -// import { AssetPagination } from "../../pageobject/Asset/AssetPagination"; + describe("Location Management Section", () => { const assetPage = new AssetPage(); const userCreationPage = new UserCreationPage(); const facilityPage = new FacilityPage(); const facilityLocation = new FacilityLocation(); + const assetPagination = new AssetPagination(); const facilityHome = new FacilityHome(); - // const assetPagination = new AssetPagination(); + const EXPECTED_LOCATION_ERROR_MESSAGES = [ "Name is required", "Location Type is required", @@ -37,7 +39,7 @@ describe("Location Management Section", () => { const bedModifiedDescrption = "test modified description"; const bedModifiedType = "Isolation"; const numberOfBeds = 10; - // const numberOfModifiedBeds = 25; + const numberOfModifiedBeds = 25; before(() => { cy.loginByApi("devdistrictadmin", "Coronasafe@123"); @@ -144,19 +146,19 @@ describe("Location Management Section", () => { facilityLocation.deleteBedRequest(); }); - // it("Add Multiple Bed to a facility location and verify pagination", () => { - // // bed creation - // facilityLocation.clickManageBedButton(); - // facilityLocation.clickAddBedButton(); - // facilityLocation.enterBedName(bedModifiedName); - // facilityLocation.enterBedDescription(bedModifiedDescrption); - // facilityLocation.selectBedType(bedModifiedType); - // facilityLocation.setMultipleBeds(numberOfModifiedBeds); - // assetPage.clickassetupdatebutton(); - // // pagination - // assetPagination.navigateToNextPage(); - // assetPagination.navigateToPreviousPage(); - // }); need to be unblocked upon issue #6906 is solved + it("Add Multiple Bed to a facility location and verify pagination", () => { + // bed creation + facilityLocation.clickManageBedButton(); + facilityLocation.clickAddBedButton(); + facilityLocation.enterBedName(bedModifiedName); + facilityLocation.enterBedDescription(bedModifiedDescrption); + facilityLocation.selectBedType(bedModifiedType); + facilityLocation.setMultipleBeds(numberOfModifiedBeds); + assetPage.clickassetupdatebutton(); + // pagination + assetPagination.navigateToNextPage(); + assetPagination.navigateToPreviousPage(); + }); afterEach(() => { cy.saveLocalStorage(); diff --git a/cypress/pageobject/Facility/FacilityCreation.ts b/cypress/pageobject/Facility/FacilityCreation.ts index e3639388620..2d6aa9ff375 100644 --- a/cypress/pageobject/Facility/FacilityCreation.ts +++ b/cypress/pageobject/Facility/FacilityCreation.ts @@ -299,6 +299,7 @@ class FacilityPage { cy.intercept("https://maps.googleapis.com/maps/api/mapsjs/*").as("mapApi"); cy.wait("@mapApi").its("response.statusCode").should("eq", 200); cy.get("input#pac-input").type(location).type("{enter}"); + cy.wait(2000); cy.get("div#map-close").click(); } @@ -418,6 +419,7 @@ class FacilityPage { selectStateOnPincode(stateName) { this.getStateElement() .scrollIntoView() + .wait(2000) .should("be.visible") .then(($element) => { const text = $element.text(); @@ -431,6 +433,7 @@ class FacilityPage { selectDistrictOnPincode(districtName) { this.getDistrictElement() .scrollIntoView() + .wait(2000) .should("be.visible") .then(($element) => { const text = $element.text(); diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx index 3c786bdce25..68e9fade43d 100644 --- a/src/Components/Facility/BedManagement.tsx +++ b/src/Components/Facility/BedManagement.tsx @@ -1,14 +1,4 @@ -import { lazy, useCallback, useState } from "react"; - -import { useDispatch } from "react-redux"; -import { statusType, useAbortableEffect } from "../../Common/utils"; -import { - getAnyFacility, - getFacilityAssetLocation, - listFacilityBeds, - deleteFacilityBed, -} from "../../Redux/actions"; -import Pagination from "../Common/Pagination"; +import { lazy, useState } from "react"; import ButtonV2 from "../Common/components/ButtonV2"; import { BedModel } from "./models"; import { ReactElement } from "react"; @@ -18,6 +8,10 @@ import BedDeleteDialog from "./BedDeleteDialog"; import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor"; import CareIcon from "../../CAREUI/icons/CareIcon"; import Page from "../Common/components/Page"; +import request from "../../Utils/request/request"; +import routes from "../../Redux/api"; +import useQuery from "../../Utils/request/useQuery"; +import useFilters from "../../Common/hooks/useFilters"; const Loading = lazy(() => import("../Common/Loading")); interface BedManagementProps { @@ -47,8 +41,6 @@ const BedRow = (props: BedRowProps) => { bedType, isOccupied, } = props; - - const dispatchAction: any = useDispatch(); const [bedData, setBedData] = useState<{ show: boolean; name: string; @@ -62,15 +54,11 @@ const BedRow = (props: BedRowProps) => { }; const handleDeleteConfirm = async () => { - const res = await dispatchAction(deleteFacilityBed(id)); - if (res?.status === 204) { - Notification.Success({ - msg: "Bed deleted successfully", - }); - } else { - Notification.Error({ - msg: "Error while deleting Bed: " + (res?.data?.detail || ""), - }); + const { res } = await request(routes.deleteFacilityBed, { + pathParams: { external_id: id }, + }); + if (res?.ok) { + Notification.Success({ msg: "Bed deleted successfully" }); } setBedData({ show: false, name: "" }); triggerRerender(); @@ -158,83 +146,41 @@ const BedRow = (props: BedRowProps) => { export const BedManagement = (props: BedManagementProps) => { const { facilityId, locationId } = props; - const dispatchAction: any = useDispatch(); - const [isLoading, setIsLoading] = useState(false); let bed: ReactElement | null = null; let BedList: ReactElement[] | ReactElement = []; - const [beds, setBeds] = useState([]); - const [offset, setOffset] = useState(0); - const [currentPage, setCurrentPage] = useState(1); - const [totalCount, setTotalCount] = useState(0); - const [rerender, setRerender] = useState(false); - const [facilityName, setFacilityName] = useState(""); - const [locationName, setLocationName] = useState(""); - const limit = 14; - - const triggerRerender = () => { - setRerender(!rerender); - }; - - const fetchData = useCallback( - async (status: statusType) => { - setIsLoading(true); - const facility = await dispatchAction(getAnyFacility(facilityId)); - - setFacilityName(facility?.data?.name || ""); + const { qParams, Pagination, resultsPerPage } = useFilters({}); - const location = await dispatchAction( - getFacilityAssetLocation(facilityId, locationId) - ); - - setLocationName(location?.data?.name || ""); - - const res = await dispatchAction( - listFacilityBeds({ - limit, - offset, - facility: facilityId, - location: locationId, - }) - ); - if (!status.aborted) { - if (res?.data) { - setBeds(res.data.results); - setTotalCount(res.data.count); - } - setIsLoading(false); - } + const { data: location } = useQuery(routes.getFacilityAssetLocation, { + pathParams: { + facility_external_id: facilityId, + external_id: locationId, }, - [dispatchAction, offset, rerender, facilityId, locationId] - ); - - useAbortableEffect( - (status: statusType) => { - fetchData(status); + }); + + const { loading, data, refetch } = useQuery(routes.listFacilityBeds, { + query: { + facility: facilityId, + location: locationId, + limit: resultsPerPage, + offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage, }, - [fetchData] - ); - - const handlePagination = (page: number, limit: number) => { - const offset = (page - 1) * limit; - setCurrentPage(page); - setOffset(offset); - }; + }); - if (beds && beds.length) { - BedList = beds.map((bedItem: BedModel) => ( + if (data?.results.length) { + BedList = data.results.map((bedItem: BedModel) => ( )); - } else if (beds && beds.length === 0) { + } else if (data?.results.length === 0) { BedList = (

No beds available in this location @@ -242,25 +188,20 @@ export const BedManagement = (props: BedManagementProps) => { ); } - if (beds) { + if (data?.results.length) { bed = ( <>

{BedList}
- {totalCount > limit && ( + {data.count && (
- +
)} ); } - if (isLoading || !beds) { + if (loading) { return ; } @@ -268,9 +209,9 @@ export const BedManagement = (props: BedManagementProps) => { >(), }, createFacilityBed: { path: "/api/v1/bed/", @@ -415,6 +417,7 @@ const routes = { deleteFacilityBed: { path: "/api/v1/bed/{external_id}/", method: "DELETE", + TRes: Type>(), }, // Consultation beds