Adds useInfiniteQuery data fetching hook + fixes Inifinite Load issue in notes

src/Utils/request/useInfiniteQuery.ts

@@ -0,0 +1,62 @@
+import { useCallback, useState } from "react";
+
+import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
+
+import { PaginatedResponse, QueryRoute } from "@/Utils/request/types";
+import useQuery, { QueryOptions } from "@/Utils/request/useQuery";
+
+export interface InfiniteQueryOptions<TItem>
+  extends QueryOptions<PaginatedResponse<TItem>> {
+  deduplicateBy?: (item: TItem) => string | number;
+}
+
+export function useInfiniteQuery<TItem>(
+  route: QueryRoute<PaginatedResponse<TItem>>,
+  options?: InfiniteQueryOptions<TItem>,
+) {
+  const [items, setItems] = useState<TItem[]>([]);
+  const [totalCount, setTotalCount] = useState<number>();
+  const [offset, setOffset] = useState(0);
+
+  const { refetch, loading, ...queryResponse } = useQuery(route, {
+    ...options,
+    query: {
+      ...(options?.query ?? {}),
+      offset,
+    },
+    onResponse: ({ data }) => {
+      if (!data) return;
+      const allItems = items.concat(data.results);
+
+      const deduplicatedItems = options?.deduplicateBy
+        ? Array.from(
+            allItems
+              .reduce(
+                (map, item) => map.set(options.deduplicateBy!(item), item),
+                new Map<string | number, TItem>(),
+              )
+              .values(),
+          )
+        : allItems;
+
+      setItems(deduplicatedItems);
+      setTotalCount(data.count);
+    },
+  });
+
+  const fetchNextPage = useCallback(async () => {
+    if (loading) return;
+
+    setOffset((prevOffset) => prevOffset + RESULTS_PER_PAGE_LIMIT);
+  }, [offset, loading]);
+
+  return {
+    items,
+    loading,
+    fetchNextPage,
+    refetch,
+    totalCount,
+    hasMore: items.length < (totalCount ?? 0),
+    ...queryResponse,
+  };
+}

src/components/Facility/ConsultationDoctorNotes/index.tsx

@@ -54,8 +54,6 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
   const initialData: PatientNoteStateType = {
     notes: [],
-    cPage: 1,
-    totalPages: 1,
     facilityId: facilityId,
     patientId: patientId,
   };
@@ -83,7 +81,7 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
     if (res?.status === 201) {
       Notification.Success({ msg: "Note added successfully" });
-      setState({ ...state, cPage: 1 });
+      setState({ ...state });
       setNoteField("");
       setReload(true);
       setReplyTo(undefined);
@@ -147,13 +145,17 @@ 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={() => {
+                setThread(PATIENT_NOTES_THREADS[current]);
+                setState(initialData);
+              }}
             >
               {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,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 
 import CircularProgress from "@/components/Common/CircularProgress";
 import DoctorNote from "@/components/Facility/DoctorNote";
@@ -9,10 +9,8 @@ import {
 
 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 { useInfiniteQuery } from "@/Utils/request/useInfiniteQuery";
 
 interface PatientNotesProps {
   state: PatientNoteStateType;
@@ -24,80 +22,49 @@ interface PatientNotesProps {
   setReplyTo?: (value: PatientNotesModel | undefined) => void;
 }
 
-const pageSize = RESULTS_PER_PAGE_LIMIT;
-
 const PatientConsultationNotesList = (props: PatientNotesProps) => {
   const {
     state,
     setState,
-    reload,
     setReload,
+    reload,
     disableEdit,
     thread,
     setReplyTo,
   } = props;
-  const consultationId = useSlug("consultation") ?? "";
-
-  const [isLoading, setIsLoading] = useState(true);
 
-  const fetchNotes = async () => {
-    setIsLoading(true);
+  const consultationId = useSlug("consultation") ?? "";
 
-    const { data } = await request(routes.getPatientNotes, {
-      pathParams: {
-        patientId: props.state.patientId || "",
-      },
-      query: {
-        consultation: consultationId,
-        thread,
-        offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
-      },
-    });
+  const {
+    items: notes,
+    loading,
+    fetchNextPage,
+    hasMore,
+  } = useInfiniteQuery<PatientNotesModel>(routes.getPatientNotes, {
+    pathParams: {
+      patientId: props.state.patientId || "",
+    },
+    query: {
+      consultation: consultationId,
+      thread,
+    },
+    prefetch: true,
+  });
 
-    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),
-        }));
-      }
-    }
-    setIsLoading(false);
-    setReload?.(false);
-  };
+  useEffect(() => {
+    setState((prevState: any) => ({
+      ...prevState,
+      notes,
+    }));
+  }, [notes, setState]);
 
   useEffect(() => {
     if (reload) {
-      fetchNotes();
+      fetchNextPage().then(() => setReload?.(false));
     }
   }, [reload]);
 
-  useEffect(() => {
-    fetchNotes();
-  }, [thread]);
-
-  useEffect(() => {
-    setReload?.(true);
-  }, []);
-
-  const handleNext = () => {
-    if (state.cPage < state.totalPages) {
-      setState((prevState) => ({
-        ...prevState,
-        cPage: prevState.cPage + 1,
-      }));
-      setReload?.(true);
-    }
-  };
-
-  if (isLoading) {
+  if (loading && !state.notes.length) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-white">
         <CircularProgress />
@@ -108,10 +75,11 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
   return (
     <DoctorNote
       state={state}
-      handleNext={handleNext}
+      handleNext={fetchNextPage}
       setReload={setReload}
       disableEdit={disableEdit}
       setReplyTo={setReplyTo}
+      hasMore={hasMore}
     />
   );
 };

src/components/Facility/PatientNoteCard.tsx

@@ -82,7 +82,6 @@ const PatientNoteCard = ({
 
   return (
     <>
-      {" "}
       <div
         className={classNames(
           "mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-3 text-secondary-800",

src/components/Facility/PatientNotesList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import CircularProgress from "@/components/Common/CircularProgress";
 import DoctorNote from "@/components/Facility/DoctorNote";
@@ -7,10 +7,8 @@ import {
   PatientNotesModel,
 } from "@/components/Facility/models";
 
-import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
-
 import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
+import { useInfiniteQuery } from "@/Utils/request/useInfiniteQuery";
 
 interface PatientNotesProps {
   state: PatientNoteStateType;
@@ -22,66 +20,34 @@ interface PatientNotesProps {
   thread: PatientNotesModel["thread"];
   setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
 }
-
-const pageSize = RESULTS_PER_PAGE_LIMIT;
-
 const PatientNotesList = (props: PatientNotesProps) => {
-  const { state, setState, reload, setReload, thread, setReplyTo } = props;
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const fetchNotes = async () => {
-    setIsLoading(true);
-    const { data }: any = await request(routes.getPatientNotes, {
-      pathParams: { patientId: props.patientId },
-      query: {
-        offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
-        thread,
-      },
-    });
-
-    if (state.cPage === 1) {
-      setState((prevState: any) => ({
-        ...prevState,
-        notes: data.results,
-        totalPages: Math.ceil(data.count / pageSize),
-      }));
-    } else {
-      setState((prevState: any) => ({
-        ...prevState,
-        notes: [...prevState.notes, ...data.results],
-        totalPages: Math.ceil(data.count / pageSize),
-      }));
-    }
-    setIsLoading(false);
-    setReload(false);
-  };
+  const { state, setState, thread, setReplyTo } = props;
+
+  const {
+    items: notes,
+    loading,
+    fetchNextPage,
+    refetch,
+    hasMore,
+  } = useInfiniteQuery<PatientNotesModel>(routes.getPatientNotes, {
+    deduplicateBy: (note) => note.id,
+    query: {
+      thread,
+      offset: 0,
+    },
+    pathParams: {
+      patientId: props.patientId,
+    },
+  });
 
   useEffect(() => {
-    if (reload) {
-      fetchNotes();
-    }
-  }, [reload]);
-
-  useEffect(() => {
-    fetchNotes();
-  }, [thread]);
-
-  useEffect(() => {
-    setReload(true);
-  }, []);
-
-  const handleNext = () => {
-    if (state.cPage < state.totalPages) {
-      setState((prevState: any) => ({
-        ...prevState,
-        cPage: prevState.cPage + 1,
-      }));
-      setReload(true);
-    }
-  };
+    setState((prevState: any) => ({
+      ...prevState,
+      notes,
+    }));
+  }, [notes, setState]);
 
-  if (isLoading) {
+  if (loading && !state.notes.length) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-white">
         <CircularProgress />
@@ -92,9 +58,10 @@ const PatientNotesList = (props: PatientNotesProps) => {
   return (
     <DoctorNote
       state={state}
-      handleNext={handleNext}
-      setReload={setReload}
+      handleNext={fetchNextPage}
+      setReload={refetch}
       setReplyTo={setReplyTo}
+      hasMore={hasMore}
     />
   );
 };