Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Duplicate network requests in Patient Details page #9297

Open
wants to merge 23 commits into
base: develop
Choose a base branch
from
Open

Fix: Duplicate network requests in Patient Details page #9297

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
f4ea6de
removed duplicate network calls
Mahendar0701 Dec 4, 2024
dd6ac7c
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 4, 2024
840bf17
policy api after getpatientapi
Mahendar0701 Dec 4, 2024
bdcdc06
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 4, 2024
226d59a
updated path
Mahendar0701 Dec 4, 2024
fd59300
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 4, 2024
bd24fa2
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 5, 2024
fd32a75
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 7, 2024
50b364a
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 9, 2024
cdbf6f8
updated prefetch and added absolute imports
Mahendar0701 Dec 9, 2024
e533aad
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 9, 2024
f4a9851
added absolute imports
Mahendar0701 Dec 9, 2024
18d9bbd
added absolute imports
Mahendar0701 Dec 9, 2024
5fd96c3
added absolute imports
Mahendar0701 Dec 9, 2024
d8d900e
added absolute imports
Mahendar0701 Dec 9, 2024
a229ddc
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 10, 2024
9f430f4
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 11, 2024
ec25eea
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 11, 2024
3d49cc2
Merge branch 'develop' into duplicate-network-requests
Mahendar0701 Dec 11, 2024
7a278ba
resolved merge conflicts
Mahendar0701 Dec 12, 2024
be36557
demography tab api
Mahendar0701 Dec 12, 2024
7c87e18
updated imports
Mahendar0701 Dec 12, 2024
a3f5353
updated encounter history
Mahendar0701 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions src/components/Facility/PatientNotesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
16 changes: 12 additions & 4 deletions src/components/Patient/PatientDetailsTab/Demography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,19 @@ export const Demography = (props: PatientProps) => {
};
}, [patientData.assigned_to_object]);

const { data: insuranceDetials } = useQuery(routes.hcx.policies.list, {
query: {
patient: id,
const { data: insuranceDetials, refetch } = useQuery(
routes.hcx.policies.list,
{
query: { patient: id },
prefetch: false, // Don't prefetch by default
},
});
);

useEffect(() => {
if (patientData.id) {
refetch();
}
}, [patientData.id, refetch]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why disable prefetch? wouldn't patientData.id always be present?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In PatientHome.tsx, the getPatient API fetches patientData and passes it to Demography as prop.

Earlier, I disabled prefetch for the insuranceDetails API in Demography to avoid calls with an undefined patientData.id.

Now, by setting prefetch to !!patientData.id in the query itself, the API triggers only when the patientData.id is available,This prevents unnecessary call.

This change working correctly. Please confirm if this correct.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can get the patient id using the useSlug or by passing it as a prop right? We can prevent request waterfalls this way. There's no reason for fetching insurance details to wait until we get the patient object right?

Copy link
Contributor Author

@Mahendar0701 Mahendar0701 Dec 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok i will check it .

Copy link
Contributor Author

@Mahendar0701 Mahendar0701 Dec 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can get the patient id using the useSlug or by passing it as a prop right? We can prevent request waterfalls this way. There's no reason for fetching insurance details to wait until we get the patient object right?

Yes we are passing patient id as prop from PatientHome.tsx. This patient id is fetched from getPatient api request.

But the tabs are rendered before the fetching is completed and props are passed as undefined to demography tab.

So to prevent this i have made fetching insurance details to wait until we get the property fetched patient object.

Instead of this should i write a conditional statement in patienthome.tsx so that tabs are not rendered until patientdata is fetched completely.

{Tab && patientData?.id && (
              <Tab
                facilityId={facilityId || ""}
                id={patientData.id || ""}
                patientData={patientData}
                refetch={refetch}
              />
   )}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can get the patient ID from the URL right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes


const patientGender = GENDER_TYPES.find(
(i) => i.id === patientData.gender,
Expand Down
27 changes: 1 addition & 26 deletions src/components/Patient/PatientDetailsTab/EncounterHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,25 @@ 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 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);
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
const authUser = useAuthUser();

useEffect(() => {
setPatientData(initialPatientData);
}, [initialPatientData]);
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved

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,
});
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
},
});

if (isLoading) {
return <Loading />;
}

return (
<PaginatedList
route={routes.getConsultationList}
Expand Down
37 changes: 6 additions & 31 deletions src/components/Patient/PatientDetailsTab/Notes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { t } from "i18next";
import { useEffect, useState } from "react";
import { useState } from "react";

import CareIcon from "@/CAREUI/icons/CareIcon";

Expand All @@ -22,15 +22,11 @@ import routes from "@/Utils/request/api";
import request from "@/Utils/request/request";
import { classNames, keysOf } from "@/Utils/utils";

import { PatientProps } from ".";
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved
import * as Notification from "../../../Utils/Notifications";
Mahendar0701 marked this conversation as resolved.
Show resolved Hide resolved

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(
Expand All @@ -39,7 +35,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>(
Expand Down Expand Up @@ -84,26 +79,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 (
Expand Down Expand Up @@ -161,15 +136,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" />
Expand Down
1 change: 1 addition & 0 deletions src/components/Patient/PatientDetailsTab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface PatientProps {
facilityId: string;
id: string;
patientData: PatientModel;
refetch: () => void;
rithviknishad marked this conversation as resolved.
Show resolved Hide resolved
}

export const patientTabs = [
Expand Down
1 change: 1 addition & 0 deletions src/components/Patient/PatientHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,7 @@ export const PatientHome = (props: {
facilityId={facilityId || ""}
id={id}
patientData={patientData}
refetch={refetch}
/>
)}
</div>
Expand Down
Loading