Integrates useInfiniteQuery for data fetching and resolves Infinite Load issue in Notes.

cypress/e2e/patient_spec/PatientDoctorNotes.cy.ts

@@ -11,7 +11,6 @@ describe("Patient Discussion notes in the consultation page", () => {
   const patientNurseReplyNote = "Test nurse reply Notes";
   const discussionNotesSubscribeWarning =
     "Please subscribe to notifications to get live updates on discussion notes.";
-  const discussionNotesSuccessMessage = "Note added successfully";
 
   before(() => {
     loginPage.loginByRole("districtAdmin");
@@ -34,7 +33,6 @@ describe("Patient Discussion notes in the consultation page", () => {
     patientDoctorNotes.selectNurseDiscussion();
     patientDoctorNotes.addDiscussionNotes(patientNurseNote);
     patientDoctorNotes.postDiscussionNotes();
-    cy.verifyNotification(discussionNotesSuccessMessage);
     // verify the auto-switching of tab to nurse notes if the user is a nurse
     patientDoctorNotes.signout();
     loginPage.loginManuallyAsNurse();
@@ -49,7 +47,6 @@ describe("Patient Discussion notes in the consultation page", () => {
     // Post a reply comment to the message
     patientDoctorNotes.addDiscussionNotes(patientNurseReplyNote);
     patientDoctorNotes.postDiscussionNotes();
-    cy.verifyNotification(discussionNotesSuccessMessage);
     patientDoctorNotes.verifyDiscussionMessage(patientNurseReplyNote);
   });
 

src/components/Facility/ConsultationDoctorNotes/index.tsx

@@ -1,5 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -13,6 +14,7 @@ import {
   PatientNoteStateType,
 } from "@/components/Facility/models";
 import AutoExpandingTextInputFormField from "@/components/Form/FormFields/AutoExpandingTextInputFormField";
+import { useAddPatientNote } from "@/components/Patient/Utils";
 
 import useAuthUser from "@/hooks/useAuthUser";
 import { useMessageListener } from "@/hooks/useMessageListener";
@@ -22,8 +24,7 @@ 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 useTanStackQueryInstead from "@/Utils/request/useQuery";
+import query from "@/Utils/request/query";
 import { classNames, isAppleDevice, keysOf } from "@/Utils/utils";
 
 interface ConsultationDoctorNotesProps {
@@ -54,53 +55,47 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
   const initialData: PatientNoteStateType = {
     notes: [],
-    cPage: 1,
-    totalPages: 1,
     facilityId: facilityId,
     patientId: patientId,
   };
   const [state, setState] = useState(initialData);
 
-  const onAddNote = async () => {
+  const { mutate: addNote } = useAddPatientNote({
+    patientId,
+    thread,
+    consultationId,
+  });
+
+  const onAddNote = () => {
     if (!/\S+/.test(noteField)) {
       Notification.Error({
         msg: "Note Should Contain At Least 1 Character",
       });
       return;
     }
-
-    const { res } = await request(routes.addPatientNote, {
-      pathParams: {
-        patientId: patientId,
-      },
-      body: {
-        note: noteField,
-        thread,
-        consultation: consultationId,
-        reply_to: reply_to?.id,
-      },
+    setReplyTo(undefined);
+    setNoteField("");
+    addNote({
+      note: noteField,
+      reply_to: reply_to?.id,
+      thread,
+      consultation: consultationId,
     });
-
-    if (res?.status === 201) {
-      Notification.Success({ msg: "Note added successfully" });
-      setState({ ...state, cPage: 1 });
-      setNoteField("");
-      setReload(true);
-      setReplyTo(undefined);
-    }
   };
 
-  useTanStackQueryInstead(routes.getPatient, {
-    pathParams: { id: patientId },
-    onResponse: ({ data }) => {
-      if (data) {
-        setPatientActive(data.is_active ?? true);
-        setPatientName(data.name ?? "");
-        setFacilityName(data.facility_object?.name ?? "");
-      }
-    },
+  const { data } = useQuery({
+    queryKey: ["patient", patientId],
+    queryFn: query(routes.getPatient, {
+      pathParams: { patientId },
+    }),
   });
 
+  useEffect(() => {
+    setPatientActive(data?.is_active ?? true);
+    setPatientName(data?.name ?? "");
+    setFacilityName(data?.facility_object?.name ?? "");
+  }, [data]);
+
   useMessageListener((data) => {
     const message = data?.message;
     if (
@@ -147,13 +142,21 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
                   ? "border-primary-500 font-bold text-secondary-800"
                   : "border-secondary-300 text-secondary-800",
               )}
-              onClick={() => setThread(PATIENT_NOTES_THREADS[current])}
+              onClick={() => {
+                if (thread !== PATIENT_NOTES_THREADS[current]) {
+                  setThread(PATIENT_NOTES_THREADS[current]);
+                  setState(initialData);
+                  setReplyTo(undefined);
+                  setNoteField("");
+                }
+              }}
             >
               {t(`patient_notes_thread__${current}`)}
             </button>
           ))}
         </div>
         <PatientConsultationNotesList
+          key={`patient-notes-${patientId}-${thread}`}
           state={state}
           setState={setState}
           reload={reload}

src/components/Facility/DoctorNote.tsx

@@ -14,10 +14,12 @@ interface DoctorNoteProps {
   handleNext: () => void;
   disableEdit?: boolean;
   setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
+  hasMore: boolean;
 }
 
 const DoctorNote = (props: DoctorNoteProps) => {
-  const { state, handleNext, setReload, disableEdit, setReplyTo } = props;
+  const { state, handleNext, setReload, disableEdit, setReplyTo, hasMore } =
+    props;
 
   return (
     <div
@@ -27,7 +29,7 @@ const DoctorNote = (props: DoctorNoteProps) => {
       {state.notes.length ? (
         <InfiniteScroll
           next={handleNext}
-          hasMore={state.cPage < state.totalPages}
+          hasMore={hasMore}
           loader={
             <div className="flex items-center justify-center">
               <CircularProgress />

src/components/Facility/PatientConsultationNotesList.tsx

@@ -1,4 +1,5 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Dispatch, SetStateAction, useEffect } from "react";
 
 import CircularProgress from "@/components/Common/CircularProgress";
 import DoctorNote from "@/components/Facility/DoctorNote";
@@ -12,7 +13,7 @@ import useSlug from "@/hooks/useSlug";
 import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
+import { callApi } from "@/Utils/request/query";
 
 interface PatientNotesProps {
   state: PatientNoteStateType;
@@ -24,80 +25,63 @@ interface PatientNotesProps {
   setReplyTo?: (value: PatientNotesModel | undefined) => void;
 }
 
-const pageSize = RESULTS_PER_PAGE_LIMIT;
-
 const PatientConsultationNotesList = (props: PatientNotesProps) => {
   const {
     state,
     setState,
-    reload,
     setReload,
     disableEdit,
     thread,
     setReplyTo,
+    reload,
   } = props;
-  const consultationId = useSlug("consultation") ?? "";
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const fetchNotes = async () => {
-    setIsLoading(true);
 
-    const { data } = await request(routes.getPatientNotes, {
-      pathParams: {
-        patientId: props.state.patientId || "",
-      },
-      query: {
-        consultation: consultationId,
-        thread,
-        offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
-      },
-    });
+  const consultationId = useSlug("consultation") ?? "";
 
-    if (data) {
-      if (state.cPage === 1) {
-        setState((prevState) => ({
-          ...prevState,
-          notes: data.results,
-          totalPages: Math.ceil(data.count / pageSize),
-        }));
-      } else {
-        setState((prevState) => ({
-          ...prevState,
-          notes: [...prevState.notes, ...data.results],
-          totalPages: Math.ceil(data.count / pageSize),
-        }));
+  const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: ["notes", state.patientId, thread, consultationId],
+    queryFn: async ({ pageParam = 0, signal }) => {
+      const response = await callApi(routes.getPatientNotes, {
+        pathParams: { patientId: state.patientId! },
+        queryParams: {
+          thread,
+          offset: pageParam,
+          consultation: consultationId,
+        },
+        signal,
+      });
+      return {
+        results: response?.results ?? [],
+        nextPage: pageParam + RESULTS_PER_PAGE_LIMIT,
+        totalResults: response?.count ?? 0,
+      };
+    },
+    getNextPageParam: (lastPage, allPages) => {
+      const currentResults = allPages.flatMap((page) => page.results).length;
+      if (currentResults < lastPage.totalResults) {
+        return lastPage.nextPage;
       }
-    }
-    setIsLoading(false);
-    setReload?.(false);
-  };
+      return undefined;
+    },
+    initialPageParam: 0,
+  });
 
   useEffect(() => {
-    if (reload) {
-      fetchNotes();
-    }
-  }, [reload]);
+    if (data?.pages) {
+      const allNotes = data.pages.flatMap((page) => page.results);
 
-  useEffect(() => {
-    fetchNotes();
-  }, [thread]);
+      const notesMap = new Map(allNotes.map((note) => [note.id, note]));
 
-  useEffect(() => {
-    setReload?.(true);
-  }, []);
+      const deduplicatedNotes = Array.from(notesMap.values());
 
-  const handleNext = () => {
-    if (state.cPage < state.totalPages) {
       setState((prevState) => ({
         ...prevState,
-        cPage: prevState.cPage + 1,
+        notes: deduplicatedNotes,
       }));
-      setReload?.(true);
     }
-  };
+  }, [data]);
 
-  if (isLoading) {
+  if (isLoading || reload) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-white">
         <CircularProgress />
@@ -108,10 +92,11 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
   return (
     <DoctorNote
       state={state}
-      handleNext={handleNext}
+      handleNext={fetchNextPage}
       setReload={setReload}
       disableEdit={disableEdit}
       setReplyTo={setReplyTo}
+      hasMore={hasNextPage}
     />
   );
 };