Skip to content

Commit

Permalink
Migrate to useQuery for Bed Management (#6975)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rithviknishad
rithviknishad authored Jan 10, 2024
1 parent 197cb39 commit f4f9b1e
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 137 deletions.
187 changes: 84 additions & 103 deletions src/Components/Facility/AddBedForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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,
Expand All @@ -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`,
},
}),
Expand All @@ -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>
Expand Down
10 changes: 8 additions & 2 deletions src/Locale/en/Bed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
3 changes: 2 additions & 1 deletion src/Locale/en/Common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
"age": "Age",
"is": "Is",
"reason": "Reason",
"description": "Description",
"name": "Name",
"address": "Address",
"phone": "Phone",
Expand Down Expand Up @@ -160,4 +161,4 @@
"select_date": "Select date",
"DD/MM/YYYY": "DD/MM/YYYY",
"clear_all_filters": "Clear All Filters"
}
}
3 changes: 1 addition & 2 deletions src/Locale/en/Facility.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?",
Expand All @@ -53,4 +52,4 @@
"notes": "Notes",
"create_asset": "Create Asset",
"create_add_more": "Create & Add More"
}
}
29 changes: 0 additions & 29 deletions src/Redux/actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,35 +112,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");
Expand Down
Loading

0 comments on commit f4f9b1e

Please sign in to comment.