🛠️ Replaced useDispatch w. useQuery: DeathReport (src/Components/Deat…

…hReport/DeathReport.tsx) (#6450) * Replaced useDispatch with useQuery * revert change in actions.tsx * modify DeathReport func * Resolved all errors and working as expected * resolved all requested changes
ohcnetwork · Oct 25, 2023 · 438dc61 · 438dc61
1 parent b499b90
commit 438dc61
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 79 deletions.
diff --git a/src/Components/DeathReport/DeathReport.tsx b/src/Components/DeathReport/DeathReport.tsx
@@ -1,6 +1,5 @@
-import { useState, useCallback } from "react";
-import { useDispatch } from "react-redux";
-import { getPatient } from "../../Redux/actions";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useState } from "react";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { GENDER_TYPES } from "../../Common/constants";
 import TextFormField from "../Form/FormFields/TextFormField";
@@ -13,32 +12,34 @@ import Form from "../Form/Form";
 import { useTranslation } from "react-i18next";
 import { navigate } from "raviger";
 import dayjs from "dayjs";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 type DeathReport = {
-  name: string;
-  age: string;
-  gender: string;
-  address: string;
-  phone_number: string;
-  is_declared_positive: string;
-  date_declared_positive: Date | "";
-  test_type: string;
-  date_of_test: Date | "";
-  date_of_result: Date | "";
-  srf_id: string;
-  hospital_tested_in: string;
-  hospital_died_in: string;
-  date_of_admission: Date | "";
-  date_of_death: Date | "";
-  comorbidities: string;
-  history_clinical_course: string;
-  brought_dead: string;
-  home_or_cfltc: string;
-  is_vaccinated: string;
-  kottayam_confirmation_sent: string;
-  kottayam_sample_date: Date | "";
-  cause_of_death: string;
-  facility: string;
+  name?: string;
+  age?: string | number;
+  gender?: string;
+  address?: string;
+  phone_number?: string;
+  is_declared_positive?: string;
+  date_declared_positive: Date | string;
+  test_type?: string;
+  date_of_test?: Date | string;
+  date_of_result?: Date | string;
+  srf_id?: string;
+  hospital_tested_in?: string;
+  hospital_died_in?: string;
+  date_of_admission?: Date | string;
+  date_of_death?: Date | string;
+  comorbidities?: string;
+  history_clinical_course?: string;
+  brought_dead?: string;
+  home_or_cfltc?: string;
+  is_vaccinated?: string;
+  kottayam_confirmation_sent?: string;
+  kottayam_sample_date?: Date | string;
+  cause_of_death?: string;
+  facility?: string;
 };
 
 export default function PrintDeathReport(props: { id: string }) {
@@ -71,10 +72,8 @@ export default function PrintDeathReport(props: { id: string }) {
 
   const [patientData, setPatientData] = useState<DeathReport>(initialState);
   const [patientName, setPatientName] = useState("");
-  const [_isLoading, setIsLoading] = useState(true);
   const [isPrintMode, setIsPrintMode] = useState(false);
   const { id } = props;
-  const dispatch: any = useDispatch();
   const { t } = useTranslation();
 
   const getPatientGender = (patientData: any) =>
@@ -96,58 +95,43 @@ export default function PrintDeathReport(props: { id: string }) {
     }
   };
 
-  const fetchpatient = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const patientRes = await dispatch(getPatient({ id }));
-      if (!status.aborted) {
-        if (patientRes && patientRes.data) {
-          setPatientName(patientRes.data.name);
-          const patientGender = getPatientGender(patientRes.data);
-          const patientAddress = getPatientAddress(patientRes.data);
-          const patientComorbidities = getPatientComorbidities(patientRes.data);
-          const data = {
-            ...patientRes.data,
-            gender: patientGender,
-            address: patientAddress,
-            comorbidities: patientComorbidities,
-            is_declared_positive: patientRes.data.is_declared_positive
-              ? "Yes"
-              : "No",
-            is_vaccinated: patientData.is_vaccinated ? "Yes" : "No",
-            cause_of_death:
-              patientRes.data.last_consultation?.discharge_notes || "",
-            hospital_died_in: patientRes.data.last_consultation.facility_name,
-            date_declared_positive: patientRes.data.date_declared_positive
-              ? dayjs(patientRes.data.date_declared_positive).toDate()
-              : "",
-            date_of_admission: patientRes.data.last_consultation.admission_date
-              ? dayjs(patientRes.data.last_consultation.admission_date).toDate()
-              : "",
-            date_of_test: patientRes.data.date_of_test
-              ? dayjs(patientRes.data.date_of_test).toDate()
-              : "",
-            date_of_result: patientRes.data.date_of_result
-              ? dayjs(patientRes.data.date_of_result).toDate()
-              : "",
-            date_of_death: patientRes.data.last_consultation.death_datetime
-              ? dayjs(patientRes.data.last_consultation.death_datetime).toDate()
-              : "",
-          };
-          setPatientData(data);
-        }
-        setIsLoading(false);
+  const { loading: _isLoading } = useQuery(routes.getPatient, {
+    pathParams: { id },
+    onResponse(res) {
+      if (res.res?.ok && res) {
+        setPatientName(res.data?.name ?? "");
+        const patientGender = getPatientGender(res.data);
+        const patientAddress = getPatientAddress(res.data);
+        const patientComorbidities = getPatientComorbidities(res.data);
+        const data = {
+          ...res.data,
+          gender: patientGender,
+          address: patientAddress,
+          comorbidities: patientComorbidities,
+          is_declared_positive: res.data?.is_declared_positive ? "Yes" : "No",
+          is_vaccinated: res.data?.is_vaccinated ? "Yes" : "No",
+          cause_of_death: res.data?.last_consultation?.discharge_notes || "",
+          hospital_died_in: res.data?.last_consultation?.facility_name,
+          date_declared_positive: res.data?.date_declared_positive
+            ? dayjs(res.data?.date_declared_positive).toDate()
+            : "",
+          date_of_admission: res.data?.last_consultation?.admission_date
+            ? dayjs(res.data?.last_consultation?.admission_date).toDate()
+            : "",
+          date_of_test: res.data?.date_of_test
+            ? dayjs(res.data?.date_of_test).toDate()
+            : "",
+          date_of_result: res.data?.date_of_result
+            ? dayjs(res.data?.date_of_result).toDate()
+            : "",
+          date_of_death: res.data?.last_consultation?.death_datetime
+            ? dayjs(res.data?.last_consultation?.death_datetime).toDate()
+            : "",
+        };
+        setPatientData(data);
       }
     },
-    [dispatch, id]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchpatient(status);
-    },
-    [dispatch, fetchpatient]
-  );
+  });
 
   const previewData = () => (
     <div className="my-4">

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -41,6 +41,7 @@ import {
   IPartialUpdateExternalResult,
 } from "../Components/ExternalResult/models";
 import { Prescription } from "../Components/Medicine/models";
+import { PatientModel } from "../Components/Patient/models";
 import { UserModel } from "../Components/Users/models";
 import { PaginatedResponse } from "../Utils/request/types";
 
@@ -517,6 +518,7 @@ const routes = {
   },
   getPatient: {
     path: "/api/v1/patient/{id}/",
+    TRes: Type<PatientModel>(),
   },
   updatePatient: {
     path: "/api/v1/patient/{id}/",