Fix: Duplicate network requests in Patient Details page

src/components/Facility/PatientNotesList.tsx

@@ -58,18 +58,10 @@ const PatientNotesList = (props: PatientNotesProps) => {
   };
 
   useEffect(() => {
-    if (reload) {
+    if (reload || thread) {
       fetchNotes();
     }
-  }, [reload]);
-
-  useEffect(() => {
-    fetchNotes();
-  }, [thread]);
-
-  useEffect(() => {
-    setReload(true);
-  }, []);
+  }, [reload, thread]);
 
   const handleNext = () => {
     if (state.cPage < state.totalPages) {

src/components/Patient/PatientDetailsTab/Demography.tsx

@@ -9,21 +9,21 @@ import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
 import { Button } from "@/components/ui/button";
 
+import { InsuranceDetailsCard } from "@/components/Patient/InsuranceDetailsCard";
+import { PatientProps } from "@/components/Patient/PatientDetailsTab";
+import { parseOccupation } from "@/components/Patient/PatientHome";
+import { AssignedToObjectModel } from "@/components/Patient/models";
+
 import useAuthUser from "@/hooks/useAuthUser";
 
 import { GENDER_TYPES } from "@/common/constants";
 
 import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
+import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import useQuery from "@/Utils/request/useQuery";
 import { formatName, formatPatientAge } from "@/Utils/utils";
 
-import { PatientProps } from ".";
-import * as Notification from "../../../Utils/Notifications";
-import { InsuranceDetailsCard } from "../InsuranceDetailsCard";
-import { parseOccupation } from "../PatientHome";
-import { AssignedToObjectModel } from "../models";
-
 export const Demography = (props: PatientProps) => {
   const { patientData, facilityId, id } = props;
   const authUser = useAuthUser();
@@ -62,9 +62,8 @@ export const Demography = (props: PatientProps) => {
   }, [patientData.assigned_to_object]);
 
   const { data: insuranceDetials } = useQuery(routes.hcx.policies.list, {
-    query: {
-      patient: id,
-    },
+    query: { patient: id },
+    prefetch: !!patientData.id,
   });
 
   const patientGender = GENDER_TYPES.find(

src/components/Patient/PatientDetailsTab/EncounterHistory.tsx

@@ -4,50 +4,24 @@ import { useTranslation } from "react-i18next";
 import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
 import CircularProgress from "@/components/Common/CircularProgress";
-import Loading from "@/components/Common/Loading";
 import { ConsultationCard } from "@/components/Facility/ConsultationCard";
 import { ConsultationModel } from "@/components/Facility/models";
+import { PatientProps } from "@/components/Patient/PatientDetailsTab";
+import { PatientModel } from "@/components/Patient/models";
 
-import useAuthUser from "@/hooks/useAuthUser";
-
-import { triggerGoal } from "@/Integrations/Plausible";
 import routes from "@/Utils/request/api";
-import useQuery from "@/Utils/request/useQuery";
-
-import { PatientProps } from ".";
-import { PatientModel } from "../models";
 
 const EncounterHistory = (props: PatientProps) => {
-  const { patientData: initialPatientData, facilityId, id } = props;
+  const { patientData: initialPatientData, id, refetch } = props;
   const [patientData, setPatientData] =
     useState<PatientModel>(initialPatientData);
-  const authUser = useAuthUser();
 
   useEffect(() => {
     setPatientData(initialPatientData);
   }, [initialPatientData]);
 
   const { t } = useTranslation();
 
-  const { loading: isLoading, refetch } = useQuery(routes.getPatient, {
-    pathParams: {
-      id,
-    },
-    onResponse: ({ res, data }) => {
-      if (res?.ok && data) {
-        setPatientData(data);
-      }
-      triggerGoal("Patient Profile Viewed", {
-        facilityId: facilityId,
-        userId: authUser.id,
-      });
-    },
-  });
-
-  if (isLoading) {
-    return <Loading />;
-  }
-
   return (
     <PaginatedList
       route={routes.getConsultationList}

src/components/Patient/PatientDetailsTab/HealthProfileSummary.tsx

@@ -5,15 +5,15 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
+import { PatientProps } from "@/components/Patient/PatientDetailsTab";
+import { PatientModel } from "@/components/Patient/models";
 import { UserModel } from "@/components/Users/models";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
 import { ADMIN_USER_TYPES } from "@/common/constants";
 
-import { PatientProps } from ".";
-import * as Notification from "../../../Utils/Notifications";
-import { PatientModel } from "../models";
+import * as Notification from "@/Utils/Notifications";
 
 export const HealthProfileSummary = (props: PatientProps) => {
   const { patientData, facilityId, id } = props;

src/components/Patient/PatientDetailsTab/ImmunisationRecords.tsx

@@ -5,18 +5,17 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
+import { PatientProps } from "@/components/Patient/PatientDetailsTab";
+import { PatientModel } from "@/components/Patient/models";
 import { UserModel } from "@/components/Users/models";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
 import { ADMIN_USER_TYPES } from "@/common/constants";
 
+import * as Notification from "@/Utils/Notifications";
 import { formatDateTime } from "@/Utils/utils";
 
-import { PatientProps } from ".";
-import * as Notification from "../../../Utils/Notifications";
-import { PatientModel } from "../models";
-
 export const ImmunisationRecords = (props: PatientProps) => {
   const { patientData, facilityId, id } = props;
 

src/components/Patient/PatientDetailsTab/Notes.tsx

@@ -1,5 +1,5 @@
 import { t } from "i18next";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -11,26 +11,21 @@ import {
   PatientNotesModel,
 } from "@/components/Facility/models";
 import AutoExpandingTextInputFormField from "@/components/Form/FormFields/AutoExpandingTextInputFormField";
+import { PatientProps } from "@/components/Patient/PatientDetailsTab";
 
 import useAuthUser from "@/hooks/useAuthUser";
 import { useMessageListener } from "@/hooks/useMessageListener";
 
 import { PATIENT_NOTES_THREADS } from "@/common/constants";
 
 import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
+import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import { classNames, keysOf } from "@/Utils/utils";
 
-import * as Notification from "../../../Utils/Notifications";
-
-interface PatientNotesProps {
-  id: string;
-  facilityId: string;
-}
-
-const PatientNotes = (props: PatientNotesProps) => {
-  const { id: patientId, facilityId } = props;
+const PatientNotes = (props: PatientProps) => {
+  const { patientData, id: patientId, facilityId } = props;
 
   const authUser = useAuthUser();
   const [thread, setThread] = useState(
@@ -39,7 +34,6 @@ const PatientNotes = (props: PatientNotesProps) => {
       : PATIENT_NOTES_THREADS.Doctors,
   );
 
-  const [patientActive, setPatientActive] = useState(true);
   const [noteField, setNoteField] = useState("");
   const [reload, setReload] = useState(false);
   const [reply_to, setReplyTo] = useState<PatientNotesModel | undefined>(
@@ -84,26 +78,6 @@ const PatientNotes = (props: PatientNotesProps) => {
     }
   };
 
-  useEffect(() => {
-    async function fetchPatientName() {
-      if (patientId) {
-        try {
-          const { data } = await request(routes.getPatient, {
-            pathParams: { id: patientId },
-          });
-          if (data) {
-            setPatientActive(data.is_active ?? true);
-          }
-        } catch (error) {
-          Notification.Error({
-            msg: "Failed to fetch patient status",
-          });
-        }
-      }
-    }
-    fetchPatientName();
-  }, [patientId]);
-
   useMessageListener((data) => {
     const message = data?.message;
     if (
@@ -161,15 +135,15 @@ const PatientNotes = (props: PatientNotesProps) => {
               errorClassName="hidden"
               innerClassName="pr-10"
               placeholder={t("notes_placeholder")}
-              disabled={!patientActive}
+              disabled={!patientData.is_active}
             />
             <ButtonV2
               onClick={onAddNote}
               border={false}
               className="absolute right-2"
               ghost
               size="small"
-              disabled={!patientActive}
+              disabled={!patientData.is_active}
               authorizeFor={NonReadOnlyUsers}
             >
               <CareIcon icon="l-message" className="text-lg" />

src/components/Patient/PatientDetailsTab/SampleTestHistory.tsx

@@ -7,14 +7,13 @@ import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
 import ButtonV2 from "@/components/Common/ButtonV2";
 import CircularProgress from "@/components/Common/CircularProgress";
+import { PatientProps } from "@/components/Patient/PatientDetailsTab/";
+import { SampleTestCard } from "@/components/Patient/SampleTestCard";
+import { PatientModel, SampleTestModel } from "@/components/Patient/models";
 
 import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
 import routes from "@/Utils/request/api";
 
-import { PatientProps } from ".";
-import { SampleTestCard } from "../SampleTestCard";
-import { PatientModel, SampleTestModel } from "../models";
-
 export const SampleTestHistory = (props: PatientProps) => {
   const { patientData, facilityId, id } = props;
   const [_selectedStatus, setSelectedStatus] = useState<{

src/components/Patient/PatientDetailsTab/ShiftingHistory.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import ButtonV2 from "@/components/Common/ButtonV2";
+import { PatientProps } from "@/components/Patient/PatientDetailsTab";
+import { PatientModel } from "@/components/Patient/models";
 import { formatFilter } from "@/components/Resource/ResourceCommons";
 import ShiftingTable from "@/components/Shifting/ShiftingTable";
 
@@ -13,9 +15,6 @@ import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
 import routes from "@/Utils/request/api";
 import useQuery from "@/Utils/request/useQuery";
 
-import { PatientProps } from ".";
-import { PatientModel } from "../models";
-
 const ShiftingHistory = (props: PatientProps) => {
   const { patientData, facilityId, id } = props;
   const { t } = useTranslation();

src/components/Patient/PatientDetailsTab/index.tsx

@@ -1,16 +1,17 @@
-import { PatientModel } from "../models";
-import { Demography } from "./Demography";
-import EncounterHistory from "./EncounterHistory";
-import { HealthProfileSummary } from "./HealthProfileSummary";
-import { ImmunisationRecords } from "./ImmunisationRecords";
-import PatientNotes from "./Notes";
-import { SampleTestHistory } from "./SampleTestHistory";
-import ShiftingHistory from "./ShiftingHistory";
+import EncounterHistory from "@/components/Patient/PatientDetailsTab//EncounterHistory";
+import { HealthProfileSummary } from "@/components/Patient/PatientDetailsTab//HealthProfileSummary";
+import { ImmunisationRecords } from "@/components/Patient/PatientDetailsTab//ImmunisationRecords";
+import PatientNotes from "@/components/Patient/PatientDetailsTab//Notes";
+import { SampleTestHistory } from "@/components/Patient/PatientDetailsTab//SampleTestHistory";
+import ShiftingHistory from "@/components/Patient/PatientDetailsTab//ShiftingHistory";
+import { Demography } from "@/components/Patient/PatientDetailsTab/Demography";
+import { PatientModel } from "@/components/Patient/models";
 
 export interface PatientProps {
   facilityId: string;
   id: string;
   patientData: PatientModel;
+  refetch: () => void;
 }
 
 export const patientTabs = [

src/components/Patient/PatientHome.tsx

@@ -2,8 +2,23 @@ import { Link, navigate } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import Chip from "@/CAREUI/display/Chip";
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Avatar } from "@/components/Common/Avatar";
+import ButtonV2 from "@/components/Common/ButtonV2";
 import ConfirmDialog from "@/components/Common/ConfirmDialog";
+import Loading from "@/components/Common/Loading";
+import Page from "@/components/Common/Page";
 import UserAutocomplete from "@/components/Common/UserAutocompleteFormField";
+import { patientTabs } from "@/components/Patient/PatientDetailsTab";
+import { isPatientMandatoryDataFilled } from "@/components/Patient/Utils";
+import {
+  AssignedToObjectModel,
+  PatientModel,
+  SampleTestModel,
+} from "@/components/Patient/models";
+import { SkillModel, UserBareMinimum } from "@/components/Users/models";
 
 import useAuthUser from "@/hooks/useAuthUser";
 
@@ -14,16 +29,13 @@ import {
   SAMPLE_TEST_STATUS,
 } from "@/common/constants";
 
+import { triggerGoal } from "@/Integrations/Plausible";
+import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
+import * as Notification from "@/Utils/Notifications";
 import dayjs from "@/Utils/dayjs";
 import routes from "@/Utils/request/api";
-
-import Chip from "../../CAREUI/display/Chip";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import { triggerGoal } from "../../Integrations/Plausible";
-import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
-import * as Notification from "../../Utils/Notifications";
-import request from "../../Utils/request/request";
-import useQuery from "../../Utils/request/useQuery";
+import request from "@/Utils/request/request";
+import useQuery from "@/Utils/request/useQuery";
 import {
   formatDateTime,
   formatName,
@@ -32,15 +44,7 @@ import {
   isAntenatal,
   isPostPartum,
   relativeDate,
-} from "../../Utils/utils";
-import { Avatar } from "../Common/Avatar";
-import ButtonV2 from "../Common/ButtonV2";
-import Loading from "../Common/Loading";
-import Page from "../Common/Page";
-import { SkillModel, UserBareMinimum } from "../Users/models";
-import { patientTabs } from "./PatientDetailsTab";
-import { isPatientMandatoryDataFilled } from "./Utils";
-import { AssignedToObjectModel, PatientModel, SampleTestModel } from "./models";
+} from "@/Utils/utils";
 
 export const parseOccupation = (occupation: string | undefined) => {
   return OCCUPATION_TYPES.find((i) => i.value === occupation)?.text;
@@ -468,6 +472,7 @@ export const PatientHome = (props: {
                 facilityId={facilityId || ""}
                 id={id}
                 patientData={patientData}
+                refetch={refetch}
               />
             )}
           </div>