Migrate useDispatch with useQuery/request in Add / Update Bed Form

src/Components/Facility/AddBedForm.tsx

@@ -1,88 +1,74 @@
 import Card from "../../CAREUI/display/Card";
 
-import { useState, useEffect, lazy, SyntheticEvent } from "react";
-import { useDispatch } from "react-redux";
-import {
-  createFacilityBed,
-  getAnyFacility,
-  getFacilityAssetLocation,
-  getFacilityBed,
-  updateFacilityBed,
-} from "../../Redux/actions";
+import { useState, lazy, SyntheticEvent } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import { LOCATION_BED_TYPES } from "../../Common/constants";
-import { navigate } from "raviger";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import Page from "../Common/components/Page";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import useAppHistory from "../../Common/hooks/useAppHistory";
+import request from "../../Utils/request/request";
+import { useTranslation } from "react-i18next";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
-interface BedFormProps {
+interface Props {
   facilityId: string;
   locationId: string;
   bedId?: string;
 }
 
-export const AddBedForm = (props: BedFormProps) => {
-  const { facilityId, locationId, bedId } = props;
-  const dispatchAction: any = useDispatch();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [name, setName] = useState<string>("");
-  const [description, setDescription] = useState<string>("");
-  const [bedType, setBedType] = useState<string>("");
-  const [facilityName, setFacilityName] = useState("");
-  const [locationName, setLocationName] = useState("");
-  const [bedName, setBedName] = useState("");
+export const AddBedForm = ({ facilityId, locationId, bedId }: Props) => {
+  const { t } = useTranslation();
+  const { goBack } = useAppHistory();
+  const [state, setState] = useState({
+    name: "",
+    description: "",
+    bed_type: "",
+    facility: facilityId,
+    location: locationId,
+  });
+
   const [multipleBeds, setMultipleBeds] = useState(false);
-  const [numberOfBeds, setNumberOfBeds] = useState(1); //default = 1
+  const [numberOfBeds, setNumberOfBeds] = useState(1);
   const [errors, setErrors] = useState({
     name: "",
     description: "",
     bedType: "",
     numberOfBeds: "",
   });
 
-  const headerText = !bedId ? "Add Bed" : "Update Bed";
-  const buttonText = !bedId ? "Add Bed(s)" : "Update Bed";
-
-  useEffect(() => {
-    async function fetchFacilityLocationAndBed() {
-      setIsLoading(true);
-      if (facilityId) {
-        const res = await dispatchAction(getAnyFacility(facilityId));
-        setFacilityName(res?.data?.name || "");
-      }
-      if (facilityId && locationId) {
-        const res = await dispatchAction(
-          getFacilityAssetLocation(facilityId, locationId)
-        );
-        setLocationName(res?.data?.name || "");
-      }
-      if (facilityId && locationId && bedId) {
-        const res = await dispatchAction(
-          getFacilityBed(facilityId, locationId, bedId)
-        );
-        setName(res?.data?.name || "");
-        setBedName(res?.data?.name || "");
-        setDescription(res?.data?.description || "");
-        setBedType(res?.data?.bed_type || "");
-        setNumberOfBeds(res?.data?.number_of_beds || "");
-      }
-      setIsLoading(false);
-    }
+  const { data: location } = useQuery(routes.getFacilityAssetLocation, {
+    pathParams: {
+      facility_external_id: facilityId,
+      external_id: locationId,
+    },
+  });
 
-    fetchFacilityLocationAndBed();
-  }, [dispatchAction, facilityId, locationId]);
+  const { data, loading } = useQuery(routes.getFacilityBed, {
+    pathParams: { external_id: bedId ?? "" },
+    prefetch: !!bedId,
+    onResponse: ({ data }) => {
+      setState({
+        name: data?.name ?? "",
+        description: data?.description ?? "",
+        bed_type: data?.bed_type ?? "",
+        facility: facilityId,
+        location: locationId,
+      });
+    },
+  });
 
   const validateInputs = (data: {
     name: string;
     description: string;
     bed_type: string;
-    number_of_beds: number;
+    number_of_beds?: number;
   }) => {
     let isValid = true;
     if (!data.name) {
@@ -96,7 +82,7 @@ export const AddBedForm = (props: BedFormProps) => {
     if (multipleBeds === false) {
       setNumberOfBeds(1);
     }
-    if (data.number_of_beds < 1) {
+    if (data.number_of_beds !== undefined && data.number_of_beds < 1) {
       isValid = false;
       setErrors((prev) => ({
         ...prev,
@@ -115,63 +101,56 @@ export const AddBedForm = (props: BedFormProps) => {
     return isValid;
   };
 
-  const handleCancel = () =>
-    navigate(`/facility/${facilityId}/location/${locationId}/beds`, {
-      replace: true,
-    });
-
   const handleSubmit = async (e: SyntheticEvent) => {
     e.preventDefault();
 
-    const data = {
-      name,
-      description,
-      bed_type: bedType,
-      number_of_beds: bedId ? 1 : numberOfBeds,
-    };
+    const data = bedId
+      ? { ...state }
+      : { ...state, number_of_beds: numberOfBeds };
 
     if (!validateInputs(data)) return;
 
-    setIsLoading(true);
-
-    const res = await dispatchAction(
-      bedId
-        ? updateFacilityBed(data, facilityId, bedId, locationId)
-        : createFacilityBed(data, facilityId, locationId)
-    );
-    setIsLoading(false);
-    if (res && (res.status === 201 || res.status === 200)) {
-      const notificationMessage = bedId
-        ? "Bed updated successfully"
-        : "Bed(s) created successfully";
+    const onSuccess = (msg: string) => {
+      Notification.Success({ msg });
+      goBack();
+    };
 
-      navigate(`/facility/${facilityId}/location/${locationId}/beds`, {
-        replace: true,
+    if (bedId) {
+      // Update
+      const { res } = await request(routes.updateFacilityBed, {
+        pathParams: { external_id: bedId },
+        body: { ...data, facility: facilityId, location: locationId },
       });
-      Notification.Success({
-        msg: notificationMessage,
+      res?.ok && onSuccess("Bed updated successfully");
+    } else {
+      // Create
+      const { res } = await request(routes.createFacilityBed, {
+        body: { ...data, facility: facilityId, location: locationId },
       });
+      res?.ok && onSuccess("Bed(s) created successfully");
     }
   };
 
-  if (isLoading) {
+  if (loading) {
     return <Loading />;
   }
 
+  const action = t(!bedId ? "add_beds" : "update_bed");
+
   return (
     <div className="mx-auto max-w-3xl px-2 pb-2">
       <Page
-        title={headerText}
+        title={action}
         backUrl={`/facility/${facilityId}/location/${locationId}/beds`}
         crumbsReplacements={{
-          [facilityId]: { name: facilityName },
+          [facilityId]: { name: location?.facility.name },
           [locationId]: {
-            name: locationName,
+            name: location?.name,
             uri: `/facility/${facilityId}/location`,
           },
           ...(bedId && {
             [bedId]: {
-              name: bedName,
+              name: data?.name,
               uri: `/facility/${facilityId}/location/${locationId}/beds`,
             },
           }),
@@ -182,71 +161,73 @@ export const AddBedForm = (props: BedFormProps) => {
             <TextFormField
               name="name"
               type="text"
-              label="Name"
+              label={t("name")}
               id="bed-name"
               required
-              value={name}
-              onChange={(e) => setName(e.value)}
+              value={state.name}
+              onChange={(e) => setState((p) => ({ ...p, [e.name]: e.value }))}
               error={errors.name}
             />
             <TextAreaFormField
               id="bed-description"
               rows={5}
-              label="Description"
+              label={t("description")}
               name="description"
-              value={description}
-              onChange={(e) => setDescription(e.value)}
+              value={state.description}
+              onChange={(e) => setState((p) => ({ ...p, [e.name]: e.value }))}
               error={errors.description}
             />
 
             <SelectFormField
               id="bed-type"
               className="w-full"
               name="bed_type"
-              label="Bed Type"
+              label={t("bed_type")}
               required
               options={LOCATION_BED_TYPES}
               optionLabel={(option) => option.name}
               optionValue={(option) => option.id}
-              value={bedType}
-              onChange={(e) => setBedType(e.value)}
+              value={state.bed_type}
+              onChange={(e) => setState((p) => ({ ...p, [e.name]: e.value }))}
               error={errors.bedType}
             />
 
             {!bedId && (
               <>
                 <CheckBoxFormField
                   id="multiplebed-checkbox"
-                  label="Do you want to make multiple beds?"
-                  onChange={() => {
-                    if (multipleBeds) setNumberOfBeds(1);
-                    setMultipleBeds(!multipleBeds);
+                  label={t("make_multiple_beds_label")}
+                  onChange={({ value }) => {
+                    setMultipleBeds(value);
+                    if (value) {
+                      setNumberOfBeds(1);
+                    }
                   }}
                   name={"multipleBeds"}
                 />
                 <TextFormField
                   id="numberofbed"
                   name="number_of_beds"
                   disabled={!multipleBeds}
-                  label="Number of beds"
+                  label={t("number_of_beds")}
                   type="number"
                   value={numberOfBeds.toString()}
                   min={1}
                   max={100}
                   onChange={(e) => setNumberOfBeds(Number(e.value))}
                   error={
                     numberOfBeds > 100
-                      ? "Number of beds cannot be greater than 100"
+                      ? t("number_of_beds_out_of_range_error")
                       : undefined
                   }
                 />
               </>
             )}
             <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:justify-end">
-              <Cancel onClick={handleCancel} />
+              <Cancel onClick={() => goBack()} />
               <Submit
                 onClick={handleSubmit}
-                label={buttonText}
+                label={action}
                 disabled={numberOfBeds > 100}
               />
             </div>

src/Locale/en/Bed.json

@@ -3,5 +3,11 @@
   "BED_WITH_OXYGEN_SUPPORT": "Bed with Oxygen Support",
   "REGULAR": "Regular",
   "ICU": "ICU",
-  "ISOLATION": "Isolation"
-}
+  "ISOLATION": "Isolation",
+  "add_beds": "Add Bed(s)",
+  "update_bed": "Update Bed",
+  "bed_type": "Bed Type",
+  "make_multiple_beds_label": "Do you want to make multiple beds?",
+  "number_of_beds": "Number of beds",
+  "number_of_beds_out_of_range_error": "Number of beds cannot be greater than 100"
+}

src/Locale/en/Common.json

@@ -84,6 +84,7 @@
   "age": "Age",
   "is": "Is",
   "reason": "Reason",
+  "description": "Description",
   "name": "Name",
   "address": "Address",
   "phone": "Phone",
@@ -160,4 +161,4 @@
   "select_date": "Select date",
   "DD/MM/YYYY": "DD/MM/YYYY",
   "clear_all_filters": "Clear All Filters"
-}
+}

src/Locale/en/Facility.json

@@ -33,7 +33,6 @@
   "asset_location": "Asset Location",
   "asset_type": "Asset Type",
   "asset_class": "Asset Class",
-  "description": "Description",
   "details_about_the_equipment": "Details about the equipment",
   "working_status": "Working Status",
   "why_the_asset_is_not_working": "Why the asset is not working?",
@@ -53,4 +52,4 @@
   "notes": "Notes",
   "create_asset": "Create Asset",
   "create_add_more": "Create & Add More"
-}
+}

src/Redux/actions.tsx

@@ -120,35 +120,6 @@ export const createFacilityBed = (
     {}
   );
 
-export const getFacilityBed = (
-  facility_external_id: string,
-  location_id: string,
-  external_id: string
-) =>
-  fireRequest(
-    "getFacilityBed",
-    [],
-    { facility: facility_external_id, location: location_id },
-    { external_id }
-  );
-export const updateFacilityBed = (
-  params: object,
-  facility_external_id: string,
-  external_id: string,
-  location_id: string
-) =>
-  fireRequest(
-    "updateFacilityBed",
-    [],
-    { ...params, facility: facility_external_id, location: location_id },
-    {
-      external_id,
-    }
-  );
-export const deleteFacilityBed = (external_id: string) => {
-  return fireRequest("deleteFacilityBed", [], {}, { external_id });
-};
-
 // Download Actions
 export const downloadFacility = () => {
   return fireRequest("downloadFacility");