Fixed typo in pathParams of ConfigureHealthFacility and replaced useD…

…ispatch in ConfigureFacility (#6470)
ohcnetwork · Oct 19, 2023 · 8011653 · 8011653
1 parent 6ee8422
commit 8011653
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 83 deletions.
diff --git 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<string>) => {
     dispatch({
       type: "set_form",
       form: { ...state.form, [e.name]: e.value },
@@ -164,7 +161,7 @@ export const ConfigureHealthFacility = (props: any) => {
 
   return (
     <div className="cui-card mt-4">
-      <form onSubmit={(e) => handleSubmit(e)}>
+      <form onSubmit={handleSubmit}>
         <div className="mt-2 grid grid-cols-1 gap-4">
           <div>
             <TextFormField
@@ -215,12 +212,12 @@ export const ConfigureHealthFacility = (props: any) => {
               }
               required
               value={state.form.hf_id}
-              onChange={(e) => handleChange(e)}
+              onChange={handleChange}
               error={state.errors?.hf_id}
             />
           </div>
         </div>
-        <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
           <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
           <Submit
             onClick={handleSubmit}

diff --git a/src/Components/Facility/FacilityConfigure.tsx b/src/Components/Facility/FacilityConfigure.tsx
@@ -1,17 +1,14 @@
-import { lazy, useCallback, useReducer, useState } from "react";
-import { useDispatch } from "react-redux";
-
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import {
-  getPermittedFacility,
-  partialUpdateFacility,
-} from "../../Redux/actions";
+import { lazy, useReducer, useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
 import Page from "../Common/components/Page";
 import { ConfigureHealthFacility } from "../ABDM/ConfigureHealthFacility";
+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 = {
@@ -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<string>) => {
     dispatch({
       type: "set_form",
       form: { ...state.form, [e.name]: e.value },
     });
   };
 
-  if (isLoading) {
+  if (isLoading || loading) {
     return <Loading />;
   }
 
@@ -146,23 +137,23 @@ export const FacilityConfigure = (props: any) => {
       crumbsReplacements={{
         [facilityId]: { name: state.form.name },
       }}
-      className="mx-auto max-w-3xl"
+      className="w-full overflow-x-hidden"
     >
       <div className="cui-card mt-4">
-        <form onSubmit={(e) => handleSubmit(e)}>
+        <form onSubmit={handleSubmit}>
           <div className="mt-2 grid grid-cols-1 gap-4">
             <div>
               <TextFormField
                 name="middleware_address"
                 label="Facility Middleware Address"
                 required
                 value={state.form.middleware_address}
-                onChange={(e) => handleChange(e)}
+                onChange={handleChange}
                 error={state.errors?.middleware_address}
               />
             </div>
           </div>
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+          <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
             <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
             <Submit onClick={handleSubmit} label="Update" />
           </div>

diff --git 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
@@ -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<FacilityModel>(),
+    TBody: Type<Partial<FacilityModel>>(),
   },
 
   deleteFacilityCoverImage: {