Migrate Bed Management to useQuery and move pagination state to query params

cypress/e2e/facility_spec/locations.cy.ts

@@ -3,14 +3,14 @@ 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 { 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 assetPagination = new AssetPagination();
   const EXPECTED_LOCATION_ERROR_MESSAGES = [
     "Name is required",
     "Location Type is required",
@@ -35,7 +35,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");
@@ -106,19 +106,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();
+  });
 
   it("Add Single Bed to a facility location and modify it", () => {
     // mandatory field verification in bed creation

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,119 +146,72 @@ 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<BedModel[]>([]);
-  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) => (
       <BedRow
         id={bedItem.id ?? ""}
         facilityId={facilityId ?? ""}
         name={bedItem.name ?? ""}
         description={bedItem.description ?? ""}
         bedType={bedItem.bed_type ?? ""}
-        triggerRerender={triggerRerender}
+        triggerRerender={refetch}
         key={locationId ?? ""}
         locationId={locationId ?? ""}
         isOccupied={bedItem.is_occupied ?? false}
       />
     ));
-  } else if (beds && beds.length === 0) {
+  } else if (data?.results.length === 0) {
     BedList = (
       <p className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
         No beds available in this location
       </p>
     );
   }
 
-  if (beds) {
+  if (data?.results.length) {
     bed = (
       <>
         <div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div>
-        {totalCount > limit && (
+        {data.count && (
           <div className="mt-4 flex w-full justify-center">
-            <Pagination
-              cPage={currentPage}
-              defaultPerPage={limit}
-              data={{ totalCount }}
-              onChange={handlePagination}
-            />
+            <Pagination totalCount={data.count} />
           </div>
         )}
       </>
     );
   }
 
-  if (isLoading || !beds) {
+  if (loading) {
     return <Loading />;
   }
 
   return (
     <Page
       title="Bed Management"
       crumbsReplacements={{
-        [facilityId]: { name: facilityName },
+        [facilityId]: { name: location?.facility?.name },
         [locationId]: {
-          name: locationName,
+          name: location?.name,
           uri: `/facility/${facilityId}/location`,
         },
       }}

src/Redux/api.tsx

@@ -46,6 +46,7 @@ import {
   LocationModel,
   StateModel,
   PatientNotesModel,
+  BedModel,
 } from "../Components/Facility/models";
 import {
   IDeleteExternalResult,
@@ -393,6 +394,7 @@ const routes = {
   listFacilityBeds: {
     path: "/api/v1/bed/",
     method: "GET",
+    TRes: Type<PaginatedResponse<BedModel>>(),
   },
   createFacilityBed: {
     path: "/api/v1/bed/",
@@ -409,6 +411,7 @@ const routes = {
   deleteFacilityBed: {
     path: "/api/v1/bed/{external_id}/",
     method: "DELETE",
+    TRes: Type<Record<string, never>>(),
   },
 
   // Consultation beds