Redesign Bed Capacity Cards

cypress/e2e/facility_spec/locations.cy.ts

@@ -6,7 +6,6 @@ import FacilityLocation from "../../pageobject/Facility/FacilityLocation";
 import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
 
-
 describe("Location Management Section", () => {
   const assetPage = new AssetPage();
   const userCreationPage = new UserCreationPage();

src/Components/ExternalResult/models.ts

@@ -53,6 +53,9 @@ export interface ILocalBodies {
 export interface IDeleteExternalResult {
   detail: string;
 }
+export interface IDeleteBedCapacity {
+  detail: string;
+}
 
 export interface IPartialUpdateExternalResult {
   address: string;

src/Components/Facility/BedCapacity.tsx

@@ -1,11 +1,4 @@
-import { useCallback, useEffect, useReducer, useState } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import {
-  createCapacity,
-  listCapacity,
-  getCapacityBed,
-} from "../../Redux/actions";
+import { useEffect, useReducer, useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { CapacityModal, OptionsType } from "./models";
 import TextFormField from "../Form/FormFields/TextFormField";
@@ -14,6 +7,8 @@ import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import useConfig from "../../Common/hooks/useConfig";
 import { getBedTypes } from "../../Common/constants";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 
 interface BedCapacityProps extends CapacityModal {
   facilityId: string;
@@ -55,7 +50,6 @@ const bedCountReducer = (state = initialState, action: any) => {
 
 export const BedCapacity = (props: BedCapacityProps) => {
   const config = useConfig();
-  const dispatchAction: any = useDispatch();
   const { facilityId, handleClose, handleUpdate, className, id } = props;
   const [state, dispatch] = useReducer(bedCountReducer, initialState);
   const [isLastOptionType, setIsLastOptionType] = useState(false);
@@ -67,63 +61,53 @@ export const BedCapacity = (props: BedCapacityProps) => {
     ? `Save ${!isLastOptionType ? "& Add More" : "Bed Capacity"}`
     : "Update Bed Capacity";
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      if (!id) {
-        // Add Form functionality
-        const capacityRes = await dispatchAction(
-          listCapacity({}, { facilityId })
-        );
-        if (!status.aborted) {
-          if (capacityRes && capacityRes.data) {
-            const existingData = capacityRes.data.results;
-            // if all options are diabled
-            if (existingData.length === getBedTypes(config).length) {
-              return;
-            }
-            // disable existing bed types
-            const updatedBedTypes = getBedTypes(config).map(
-              (type: OptionsType) => {
-                const isExisting = existingData.find(
-                  (i: CapacityModal) => i.room_type === type.id
-                );
-                return {
-                  ...type,
-                  disabled: !!isExisting,
-                };
-              }
-            );
-            setBedTypes(updatedBedTypes);
-          }
-        }
-      } else {
-        // Edit Form functionality
-        const res = await dispatchAction(
-          getCapacityBed({ facilityId: facilityId, bed_id: id })
-        );
-        if (res && res.data) {
-          dispatch({
-            type: "set_form",
-            form: {
-              bedType: res.data.room_type,
-              totalCapacity: res.data.total_capacity,
-              currentOccupancy: res.data.current_capacity,
-            },
-          });
+  async function fetchCapacityBed() {
+    setIsLoading(true);
+    if (!id) {
+      // Add Form functionality
+      const capacityQuery = await request(routes.getCapacity, {
+        pathParams: { facilityId: props.facilityId },
+      });
+      if (capacityQuery?.data) {
+        const existingData = capacityQuery.data?.results;
+        // if all options are diabled
+        if (existingData.length === getBedTypes(config).length) {
+          return;
         }
+        // disable existing bed types
+        const updatedBedTypes = getBedTypes(config).map((type: OptionsType) => {
+          const isExisting = existingData.find(
+            (i: CapacityModal) => i.room_type === type.id
+          );
+          return {
+            ...type,
+            disabled: !!isExisting,
+          };
+        });
+        setBedTypes(updatedBedTypes);
       }
-      setIsLoading(false);
-    },
-    [dispatchAction, facilityId, id]
-  );
+    } else {
+      // Edit Form functionality
+      const capacityQuery = await request(routes.getCapacityBed, {
+        pathParams: { facilityId: props.facilityId, bed_id: id.toString() },
+      });
+      if (capacityQuery.data) {
+        dispatch({
+          type: "set_form",
+          form: {
+            bedType: capacityQuery.data.room_type,
+            totalCapacity: capacityQuery.data.total_capacity,
+            currentOccupancy: capacityQuery.data.current_capacity,
+          },
+        });
+      }
+    }
+    setIsLoading(false);
+  }
 
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [dispatch, fetchData, id]
-  );
+  useEffect(() => {
+    fetchCapacityBed();
+  }, []);
 
   useEffect(() => {
     const lastBedType =
@@ -179,21 +163,24 @@ export const BedCapacity = (props: BedCapacityProps) => {
     const valid = validateData();
     if (valid) {
       setIsLoading(true);
-      const data = {
+      const bodyData = {
         room_type: Number(state.form.bedType),
         total_capacity: Number(state.form.totalCapacity),
         current_capacity: Number(state.form.currentOccupancy),
       };
-      const res = await dispatchAction(
-        createCapacity(id, data, { facilityId })
+      const { data } = await request(
+        id ? routes.updateCapacity : routes.createCapacity,
+        {
+          pathParams: { facilityId, ...(id ? { bed_id: id.toString() } : {}) },
+          body: bodyData,
+        }
       );
       setIsLoading(false);
-      if (res && res.data) {
-        // disable last added bed type
+      if (data) {
         const updatedBedTypes = bedTypes.map((type: OptionsType) => {
           return {
             ...type,
-            disabled: res.data.room_type !== type.id ? type.disabled : true,
+            disabled: data.room_type !== type.id ? type.disabled : true,
           };
         });
         setBedTypes(updatedBedTypes);