diff --git a/src/Components/Facility/AddBedForm.tsx b/src/Components/Facility/AddBedForm.tsx index 931a95da6a2..379a9a532b8 100644 --- a/src/Components/Facility/AddBedForm.tsx +++ b/src/Components/Facility/AddBedForm.tsx @@ -1,44 +1,41 @@ 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(false); - const [name, setName] = useState(""); - const [description, setDescription] = useState(""); - const [bedType, setBedType] = useState(""); - 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: "", @@ -46,43 +43,32 @@ export const AddBedForm = (props: BedFormProps) => { 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 ; } + const action = t(!bedId ? "add_beds" : "update_bed"); + return (
{ setName(e.value)} + value={state.name} + onChange={(e) => setState((p) => ({ ...p, [e.name]: e.value }))} error={errors.name} /> setDescription(e.value)} + value={state.description} + onChange={(e) => setState((p) => ({ ...p, [e.name]: e.value }))} error={errors.description} /> @@ -203,13 +182,13 @@ export const AddBedForm = (props: BedFormProps) => { 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} /> @@ -217,10 +196,12 @@ export const AddBedForm = (props: BedFormProps) => { <> { - if (multipleBeds) setNumberOfBeds(1); - setMultipleBeds(!multipleBeds); + label={t("make_multiple_beds_label")} + onChange={({ value }) => { + setMultipleBeds(value); + if (value) { + setNumberOfBeds(1); + } }} name={"multipleBeds"} /> @@ -228,7 +209,7 @@ export const AddBedForm = (props: BedFormProps) => { id="numberofbed" name="number_of_beds" disabled={!multipleBeds} - label="Number of beds" + label={t("number_of_beds")} type="number" value={numberOfBeds.toString()} min={1} @@ -236,17 +217,17 @@ export const AddBedForm = (props: BedFormProps) => { 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 } /> )}
- + goBack()} /> 100} />
diff --git a/src/Locale/en/Bed.json b/src/Locale/en/Bed.json index 7b839c2a384..b410293959b 100644 --- a/src/Locale/en/Bed.json +++ b/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" +} \ No newline at end of file diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json index 31528afa390..99adb77451c 100644 --- a/src/Locale/en/Common.json +++ b/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" -} +} \ No newline at end of file diff --git a/src/Locale/en/Facility.json b/src/Locale/en/Facility.json index 5e69f8108af..aefc9c3b4a8 100644 --- a/src/Locale/en/Facility.json +++ b/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" -} +} \ No newline at end of file diff --git a/src/Redux/actions.tsx b/src/Redux/actions.tsx index 9d9ab59795b..4aaaa58ebb5 100644 --- a/src/Redux/actions.tsx +++ b/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"); diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx index 8f8fc76484d..55b5f36e6da 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -408,14 +408,19 @@ const routes = { createFacilityBed: { path: "/api/v1/bed/", method: "POST", + TBody: Type(), + TRes: Type(), }, getFacilityBed: { path: "/api/v1/bed/{external_id}/", method: "GET", + TRes: Type(), }, updateFacilityBed: { path: "/api/v1/bed/{external_id}/", method: "PUT", + TBody: Type(), + TRes: Type(), }, deleteFacilityBed: { path: "/api/v1/bed/{external_id}/",