From 80116533220baa98336600d5af7e7d79f3e91a56 Mon Sep 17 00:00:00 2001 From: Khavin Shankar Date: Thu, 19 Oct 2023 14:59:07 +0530 Subject: [PATCH] Fixed typo in pathParams of ConfigureHealthFacility and replaced useDispatch in ConfigureFacility (#6470) --- .../ABDM/ConfigureHealthFacility.tsx | 51 +++++----- src/Components/Facility/FacilityConfigure.tsx | 95 +++++++++---------- src/Components/Facility/models.tsx | 5 +- src/Redux/api.tsx | 11 ++- 4 files changed, 79 insertions(+), 83 deletions(-) diff --git a/src/Components/ABDM/ConfigureHealthFacility.tsx b/src/Components/ABDM/ConfigureHealthFacility.tsx index a2b8f254bcb..16e6bf90ea4 100644 --- a/src/Components/ABDM/ConfigureHealthFacility.tsx +++ b/src/Components/ABDM/ConfigureHealthFacility.tsx @@ -1,4 +1,4 @@ -import { lazy, useEffect, useReducer, useState } from "react"; +import { lazy, useReducer, useState } from "react"; import * as Notification from "../../Utils/Notifications.js"; import { navigate } from "raviger"; import { Cancel, Submit } from "../Common/components/ButtonV2"; @@ -7,6 +7,7 @@ import { classNames } from "../../Utils/utils"; import useQuery from "../../Utils/request/useQuery"; import routes from "../../Redux/api"; import request from "../../Utils/request/request"; +import { FieldChangeEvent } from "../Form/FormFields/Utils.js"; const Loading = lazy(() => import("../Common/Loading")); const initForm = { @@ -42,28 +43,24 @@ export const ConfigureHealthFacility = (props: any) => { const { facilityId } = props; const [isLoading, setIsLoading] = useState(false); - const { - data: health_facility, - loading, - refetch, - } = useQuery(routes.abha.getHealthFacility, { - pathParams: { facility__external_id: facilityId }, + const { loading } = useQuery(routes.abha.getHealthFacility, { + pathParams: { facility_id: facilityId }, + silent: true, + onResponse(res) { + if (res.data) { + dispatch({ + type: "set_form", + form: { + ...state.form, + health_facility: res.data, + hf_id: res.data.hf_id, + }, + }); + } + }, }); - useEffect(() => { - const formData = { - ...state.form, - hf_id: health_facility?.hf_id, - health_facility: health_facility, - }; - dispatch({ type: "set_form", form: formData }); - }, [health_facility]); - - useEffect(() => { - refetch(); - }, [dispatch, refetch]); - - const handleSubmit = async (e: any) => { + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); @@ -83,7 +80,7 @@ export const ConfigureHealthFacility = (props: any) => { routes.abha.partialUpdateHealthFacility, { pathParams: { - facility__external_id: facilityId, + facility_id: facilityId, }, body: { hf_id: state.form.hf_id, @@ -97,7 +94,7 @@ export const ConfigureHealthFacility = (props: any) => { routes.abha.registerHealthFacilityAsService, { pathParams: { - facility__external_id: facilityId, + facility_id: facilityId, }, } ); @@ -151,7 +148,7 @@ export const ConfigureHealthFacility = (props: any) => { setIsLoading(false); }; - const handleChange = (e: any) => { + const handleChange = (e: FieldChangeEvent) => { dispatch({ type: "set_form", form: { ...state.form, [e.name]: e.value }, @@ -164,7 +161,7 @@ export const ConfigureHealthFacility = (props: any) => { return (
-
handleSubmit(e)}> +
{ } required value={state.form.hf_id} - onChange={(e) => handleChange(e)} + onChange={handleChange} error={state.errors?.hf_id} />
-
+
navigate(`/facility/${facilityId}`)} /> import("../Common/Loading")); const initForm = { @@ -22,6 +19,7 @@ const initForm = { ward: 0, middleware_address: "", }; + const initialState = { form: { ...initForm }, errors: {}, @@ -46,44 +44,33 @@ const FormReducer = (state = initialState, action: any) => { } }; -export const FacilityConfigure = (props: any) => { +interface IProps { + facilityId: string; +} + +export const FacilityConfigure = (props: IProps) => { const [state, dispatch] = useReducer(FormReducer, initialState); const { facilityId } = props; - const dispatchAction: any = useDispatch(); const [isLoading, setIsLoading] = useState(false); - const fetchData = useCallback( - async (status: statusType) => { - if (facilityId) { - setIsLoading(true); - const res = await dispatchAction(getPermittedFacility(facilityId)); - if (!status.aborted && res.data) { - const formData = { - name: res.data.name, - state: res.data.state, - district: res.data.district, - local_body: res.data.local_body, - ward: res.data.ward, - middleware_address: res.data.middleware_address, - }; - dispatch({ type: "set_form", form: formData }); - } else { - navigate(`/facility/${facilityId}`); - } - setIsLoading(false); + const { loading } = useQuery(routes.getPermittedFacility, { + pathParams: { id: facilityId }, + onResponse: (res) => { + if (res.data) { + const formData = { + name: res.data.name, + state: res.data.state, + district: res.data.district, + local_body: res.data.local_body, + ward: res.data.ward, + middleware_address: res.data.middleware_address, + }; + dispatch({ type: "set_form", form: formData }); } }, - [dispatchAction, facilityId] - ); + }); - useAbortableEffect( - (status: statusType) => { - fetchData(status); - }, - [dispatch, fetchData] - ); - - const handleSubmit = async (e: any) => { + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); if (!state.form.middleware_address) { @@ -108,35 +95,39 @@ export const FacilityConfigure = (props: any) => { setIsLoading(false); return; } - const data: any = { + + const data = { ...state.form, middleware_address: state.form.middleware_address, }; - const res = await dispatchAction(partialUpdateFacility(facilityId, data)); + const { res, error } = await request(routes.partialUpdateFacility, { + pathParams: { id: facilityId }, + body: data, + }); + setIsLoading(false); - if (res && res.data) { + if (res?.ok) { Notification.Success({ msg: "Facility updated successfully", }); navigate(`/facility/${facilityId}`); } else { - if (res?.data) - Notification.Error({ - msg: "Something went wrong: " + (res.data.detail || ""), - }); + Notification.Error({ + msg: error?.detail ?? "Something went wrong", + }); } setIsLoading(false); }; - const handleChange = (e: any) => { + const handleChange = (e: FieldChangeEvent) => { dispatch({ type: "set_form", form: { ...state.form, [e.name]: e.value }, }); }; - if (isLoading) { + if (isLoading || loading) { return ; } @@ -146,10 +137,10 @@ export const FacilityConfigure = (props: any) => { crumbsReplacements={{ [facilityId]: { name: state.form.name }, }} - className="mx-auto max-w-3xl" + className="w-full overflow-x-hidden" >
- handleSubmit(e)}> +
{ label="Facility Middleware Address" required value={state.form.middleware_address} - onChange={(e) => handleChange(e)} + onChange={handleChange} error={state.errors?.middleware_address} />
-
+
navigate(`/facility/${facilityId}`)} />
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx index 439194e85de..a9861a4869c 100644 --- a/src/Components/Facility/models.tsx +++ b/src/Components/Facility/models.tsx @@ -28,7 +28,6 @@ export interface WardModel { export interface FacilityModel { id?: number; name?: string; - district?: number; read_cover_image_url?: string; facility_type?: string; address?: string; @@ -53,6 +52,10 @@ export interface FacilityModel { ward_object?: WardModel; modified_date?: string; created_date?: string; + state: number; + district: number; + local_body: number; + ward: number; } export interface CapacityModal { diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx index 7e1ef24c058..d775c970a2d 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -17,7 +17,6 @@ import { IinitiateAbdmAuthenticationTBody, IpartialUpdateHealthFacilityTBody, } from "../Components/ABDM/models"; -import { AssetData } from "../Components/Assets/AssetTypes"; import { AssetBedBody, AssetBedModel, @@ -28,7 +27,11 @@ import { AssetTransaction, AssetUpdate, } from "../Components/Assets/AssetTypes"; -import { FacilityModel, LocationModel, WardModel } from "../Components/Facility/models"; +import { + FacilityModel, + LocationModel, + WardModel, +} from "../Components/Facility/models"; import { IDeleteExternalResult, IExternalResult, @@ -241,8 +244,10 @@ const routes = { }, partialUpdateFacility: { - path: "/api/v1/facility", + path: "/api/v1/facility/{id}/", method: "PATCH", + TRes: Type(), + TBody: Type>(), }, deleteFacilityCoverImage: {