fix scroll position issues and incorrect data issues on switching thread

UdaySagar-Git · Dec 3, 2024 · 7458c11 · 7458c11
1 parent f9799a1
commit 7458c11
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 43 deletions.
diff --git a/src/components/Facility/PatientConsultationNotesList.tsx b/src/components/Facility/PatientConsultationNotesList.tsx
@@ -44,7 +44,7 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const fetchNotes = async () => {
+  const fetchNotes = async (currentPage: number) => {
     setIsLoading(true);
 
     const { data } = await request(routes.getPatientNotes, {
@@ -54,37 +54,34 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
       query: {
         consultation: consultationId,
         thread,
-        offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
+        offset: (currentPage - 1) * RESULTS_PER_PAGE_LIMIT,
       },
     });
 
     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),
-        }));
-      }
+      setState((prevState) => ({
+        ...prevState,
+        notes:
+          currentPage === 1
+            ? data.results
+            : [...prevState.notes, ...data.results],
+        totalPages: Math.ceil(data.count / pageSize),
+      }));
     }
     setIsLoading(false);
     setReload?.(false);
   };
 
   useEffect(() => {
     if (reload) {
-      fetchNotes();
+      fetchNotes(state.cPage);
     }
   }, [reload]);
 
   useEffect(() => {
-    fetchNotes();
+    setState((prev) => ({ ...prev, notes: [], cPage: 1 }));
+    // Fetch notes for the first page when thread changes and prevent loading a different page when changing threads
+    fetchNotes(1);
   }, [thread]);
 
   useEffect(() => {
@@ -105,7 +102,8 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
     }
   };
 
-  if (isLoading) {
+  // only show during initial fetch, to prevent scroll position from being reset
+  if (isLoading && state.cPage === 1) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-white">
         <CircularProgress />

diff --git a/src/components/Facility/PatientNoteCard.tsx b/src/components/Facility/PatientNoteCard.tsx
@@ -128,7 +128,7 @@ const PatientNoteCard = ({
       <audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
       <div
         className={classNames(
-          "group flex flex-col rounded-lg border border-gray-300 bg-white px-3 py-1 text-gray-800 max-sm:ml-2",
+          "group flex flex-col rounded-lg border border-gray-300 bg-white px-3 py-1 text-gray-800",
           note.user_type === "RemoteSpecialist" && "border-primary-400",
         )}
       >

diff --git a/src/components/Facility/PatientNotesDetailedView.tsx b/src/components/Facility/PatientNotesDetailedView.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -31,6 +31,13 @@ const PatientNotesDetailedView = (props: Props) => {
   const [reply_to, setReplyTo] = useState<PatientNotesReplyModel | undefined>(
     undefined,
   );
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };
 
   const onAddNote = async () => {
     if (!/\S+/.test(noteField)) {
@@ -57,6 +64,7 @@ const PatientNotesDetailedView = (props: Props) => {
     if (res?.status === 201) {
       Notification.Success({ msg: "Note added successfully" });
       setNoteField("");
+      setTimeout(scrollToBottom, 100);
     }
 
     return data?.id;
@@ -77,6 +85,7 @@ const PatientNotesDetailedView = (props: Props) => {
 
     if (data) {
       setState(data);
+      setTimeout(scrollToBottom, 100);
     }
     setIsLoading(false);
     setReload(false);
@@ -140,7 +149,7 @@ const PatientNotesDetailedView = (props: Props) => {
               )}
             </div>
 
-            <div className="flex-1 overflow-y-auto px-3">
+            <div ref={scrollRef} className="flex-1 overflow-y-auto px-3">
               {state.child_notes.map((note) => {
                 const parentNote = state.child_notes.find(
                   (n) => n.id === note.reply_to,
@@ -165,7 +174,7 @@ const PatientNotesDetailedView = (props: Props) => {
             </div>
           </div>
 
-          <div className="mx-3 md:mx-2 mt-1">
+          <div className="m-1 max-sm:mr-3">
             <DoctorNoteReplyPreviewCard
               parentNote={reply_to}
               cancelReply={() => setReplyTo(undefined)}

diff --git a/src/components/Facility/PatientNotesList.tsx b/src/components/Facility/PatientNotesList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 import CircularProgress from "@/components/Common/CircularProgress";
 import DoctorNote from "@/components/Facility/DoctorNote";
@@ -14,11 +14,11 @@ import request from "@/Utils/request/request";
 
 interface PatientNotesProps {
   state: PatientNoteStateType;
-  setState: any;
+  setState: Dispatch<SetStateAction<PatientNoteStateType>>;
   patientId: string;
   facilityId: string;
   reload?: boolean;
-  setReload?: any;
+  setReload?: (value: boolean) => void;
   thread: PatientNotesModel["thread"];
   setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
 }
@@ -30,58 +30,56 @@ const PatientNotesList = (props: PatientNotesProps) => {
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const fetchNotes = async () => {
+  const fetchNotes = async (currentPage: number) => {
     setIsLoading(true);
-    const { data }: any = await request(routes.getPatientNotes, {
+    const { data } = 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) => ({
+    if (data) {
+      setState((prevState) => ({
         ...prevState,
-        notes: data.results,
-        totalPages: Math.ceil(data.count / pageSize),
-      }));
-    } else {
-      setState((prevState: any) => ({
-        ...prevState,
-        notes: [...prevState.notes, ...data.results],
+        notes:
+          currentPage === 1
+            ? data.results
+            : [...prevState.notes, ...data.results],
         totalPages: Math.ceil(data.count / pageSize),
       }));
     }
+
     setIsLoading(false);
-    setReload(false);
+    setReload?.(false);
   };
 
   useEffect(() => {
     if (reload) {
-      fetchNotes();
+      fetchNotes(state.cPage);
     }
   }, [reload]);
 
   useEffect(() => {
-    fetchNotes();
+    fetchNotes(state.cPage);
   }, [thread]);
 
   useEffect(() => {
-    setReload(true);
+    setReload?.(true);
   }, []);
 
   const handleNext = () => {
     if (state.cPage < state.totalPages) {
-      setState((prevState: any) => ({
+      setState((prevState) => ({
         ...prevState,
         cPage: prevState.cPage + 1,
       }));
-      setReload(true);
+      setReload?.(true);
     }
   };
 
-  if (isLoading) {
+  if (isLoading && state.cPage === 1) {
     return (
       <div className="flex h-full w-full items-center justify-center bg-white">
         <CircularProgress />