From d85a3eecf1a8da574a5b005c4767d12c285b1f96 Mon Sep 17 00:00:00 2001
From: Uday Sagar <udaysagar.mail@gmail.com>
Date: Fri, 6 Dec 2024 01:33:07 +0530
Subject: [PATCH] refactored a lot of compoents related to notes

---
 src/Routers/routes/ConsultationRoutes.tsx     |   4 +-
 src/components/Facility/DoctorNote.tsx        |  98 ----------
 .../Facility/PatientConsultationNotesList.tsx | 127 -------------
 src/components/Facility/PatientNoteCard.tsx   |   6 +-
 .../Facility/PatientNotesDetailedView.tsx     | 161 ++++++++--------
 src/components/Facility/PatientNotesList.tsx  | 160 ++++++++--------
 ...ndex.tsx => PatientNotesListComponent.tsx} | 173 +++++++++++-------
 .../Facility/PatientNotesSlideover.tsx        |  49 ++++-
 .../Patient/PatientDetailsTab/Notes.tsx       | 165 +----------------
 src/components/Patient/PatientNotes.tsx       | 161 ++--------------
 10 files changed, 334 insertions(+), 770 deletions(-)
 delete mode 100644 src/components/Facility/DoctorNote.tsx
 delete mode 100644 src/components/Facility/PatientConsultationNotesList.tsx
 rename src/components/Facility/{ConsultationDoctorNotes/index.tsx => PatientNotesListComponent.tsx} (51%)

diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
index da3c30b5093..3d11f301aa3 100644
--- a/src/Routers/routes/ConsultationRoutes.tsx
+++ b/src/Routers/routes/ConsultationRoutes.tsx
@@ -1,5 +1,4 @@
 import { ConsultationDetails } from "@/components/Facility/ConsultationDetails";
-import ConsultationDoctorNotes from "@/components/Facility/ConsultationDoctorNotes";
 import { ConsultationForm } from "@/components/Facility/ConsultationForm";
 import Investigation from "@/components/Facility/Investigations";
 import InvestigationPrintPreview from "@/components/Facility/Investigations/InvestigationsPrintPreview";
@@ -13,6 +12,7 @@ import { DailyRoundListDetails } from "@/components/Patient/DailyRoundListDetail
 import { DailyRounds } from "@/components/Patient/DailyRounds";
 import FileUploadPage from "@/components/Patient/FileUploadPage";
 import PatientConsentRecords from "@/components/Patient/PatientConsentRecords";
+import PatientNotes from "@/components/Patient/PatientNotes";
 
 import { AppRoutes } from "@/Routers/AppRouter";
 
@@ -153,7 +153,7 @@ const consultationRoutes: AppRoutes = {
     ),
   "/facility/:facilityId/patient/:patientId/consultation/:consultationId/notes":
     ({ facilityId, patientId, consultationId }) => (
-      <ConsultationDoctorNotes
+      <PatientNotes
         facilityId={facilityId}
         patientId={patientId}
         consultationId={consultationId}
diff --git a/src/components/Facility/DoctorNote.tsx b/src/components/Facility/DoctorNote.tsx
deleted file mode 100644
index d765e14031c..00000000000
--- a/src/components/Facility/DoctorNote.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import InfiniteScroll from "react-infinite-scroll-component";
-
-import CircularProgress from "@/components/Common/CircularProgress";
-import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
-import PatientNoteCard from "@/components/Facility/PatientNoteCard";
-import {
-  PatientNoteStateType,
-  PatientNotesModel,
-} from "@/components/Facility/models";
-
-interface DoctorNoteProps {
-  state: PatientNoteStateType;
-  setReload?: (value: boolean) => void;
-  handleNext: () => void;
-  disableEdit?: boolean;
-  setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
-  mode?: "thread-view" | "default-view";
-  setThreadViewNote?: (noteId: string) => void;
-}
-
-const DoctorNote = (props: DoctorNoteProps) => {
-  const {
-    state,
-    handleNext,
-    setReload,
-    disableEdit,
-    setReplyTo,
-    mode,
-    setThreadViewNote,
-  } = props;
-
-  const notes =
-    mode === "thread-view"
-      ? state.notes.filter((note) => !note.root_note_object)
-      : state.notes;
-
-  return (
-    <div
-      className="mt-4 flex h-[500px] grow flex-col-reverse overflow-y-scroll bg-white sm:ml-2"
-      id="patient-notes-list"
-    >
-      {notes.length ? (
-        <InfiniteScroll
-          next={handleNext}
-          hasMore={state.cPage < state.totalPages}
-          loader={
-            <div className="flex items-center justify-center">
-              <CircularProgress />
-            </div>
-          }
-          className="flex h-full flex-col-reverse overflow-hidden"
-          inverse={true}
-          dataLength={notes.length}
-          scrollableTarget="patient-notes-list"
-        >
-          {notes.map((note) => {
-            const noteCard = (
-              <PatientNoteCard
-                note={note}
-                setReload={setReload}
-                disableEdit={disableEdit}
-                setReplyTo={setReplyTo}
-                mode={mode}
-                allowThreadView={mode === "thread-view"}
-                allowReply={mode !== "thread-view"}
-                setThreadViewNote={setThreadViewNote}
-              />
-            );
-            if (mode === "thread-view") {
-              return (
-                <div key={note.id} className="mt-3">
-                  {noteCard}
-                </div>
-              );
-            } else {
-              return (
-                <DoctorNoteReplyPreviewCard
-                  key={note.id}
-                  parentNote={note.reply_to_object}
-                >
-                  <div className={!note.reply_to_object ? "mt-3" : ""}>
-                    {noteCard}
-                  </div>
-                </DoctorNoteReplyPreviewCard>
-              );
-            }
-          })}
-        </InfiniteScroll>
-      ) : (
-        <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-secondary-500">
-          No Notes Found
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DoctorNote;
diff --git a/src/components/Facility/PatientConsultationNotesList.tsx b/src/components/Facility/PatientConsultationNotesList.tsx
deleted file mode 100644
index 36b09b443a8..00000000000
--- a/src/components/Facility/PatientConsultationNotesList.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-
-import CircularProgress from "@/components/Common/CircularProgress";
-import DoctorNote from "@/components/Facility/DoctorNote";
-import {
-  PatientNoteStateType,
-  PatientNotesModel,
-} from "@/components/Facility/models";
-
-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";
-
-interface PatientNotesProps {
-  state: PatientNoteStateType;
-  setState: Dispatch<SetStateAction<PatientNoteStateType>>;
-  reload?: boolean;
-  setReload?: (value: boolean) => void;
-  disableEdit?: boolean;
-  thread: PatientNotesModel["thread"];
-  setReplyTo?: (value: PatientNotesModel | undefined) => void;
-  mode?: "thread-view" | "default-view";
-  setThreadViewNote?: (noteId: string) => void;
-}
-
-const pageSize = RESULTS_PER_PAGE_LIMIT;
-
-const PatientConsultationNotesList = (props: PatientNotesProps) => {
-  const {
-    state,
-    setState,
-    reload,
-    setReload,
-    disableEdit,
-    thread,
-    setReplyTo,
-    mode = "default-view",
-    setThreadViewNote,
-  } = props;
-  const consultationId = useSlug("consultation") ?? "";
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const fetchNotes = async (currentPage: number) => {
-    setIsLoading(true);
-
-    const { data } = await request(routes.getPatientNotes, {
-      pathParams: {
-        patientId: props.state.patientId || "",
-      },
-      query: {
-        consultation: consultationId,
-        thread,
-        offset: (currentPage - 1) * RESULTS_PER_PAGE_LIMIT,
-      },
-    });
-
-    if (data) {
-      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(state.cPage);
-    }
-  }, [reload]);
-
-  useEffect(() => {
-    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(() => {
-    setThreadViewNote?.("");
-  }, [thread, mode]);
-
-  useEffect(() => {
-    setReload?.(true);
-  }, []);
-
-  const handleNext = () => {
-    if (state.cPage < state.totalPages) {
-      setState((prevState) => ({
-        ...prevState,
-        cPage: prevState.cPage + 1,
-      }));
-      setReload?.(true);
-    }
-  };
-
-  // 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 />
-      </div>
-    );
-  }
-
-  return (
-    <DoctorNote
-      state={state}
-      handleNext={handleNext}
-      setReload={setReload}
-      disableEdit={disableEdit}
-      setReplyTo={setReplyTo}
-      mode={mode}
-      setThreadViewNote={setThreadViewNote}
-    />
-  );
-};
-
-export default PatientConsultationNotesList;
diff --git a/src/components/Facility/PatientNoteCard.tsx b/src/components/Facility/PatientNoteCard.tsx
index b36be904ae2..9ba44586311 100644
--- a/src/components/Facility/PatientNoteCard.tsx
+++ b/src/components/Facility/PatientNoteCard.tsx
@@ -35,7 +35,7 @@ import {
 
 const PatientNoteCard = ({
   note,
-  setReload,
+  refetch,
   disableEdit,
   allowReply = true,
   allowThreadView = false,
@@ -44,7 +44,7 @@ const PatientNoteCard = ({
   setThreadViewNote,
 }: {
   note: PatientNotesModel;
-  setReload: any;
+  refetch?: () => void;
   disableEdit?: boolean;
   allowReply?: boolean;
   allowThreadView?: boolean;
@@ -92,7 +92,7 @@ const PatientNoteCard = ({
     if (res?.status === 200) {
       Success({ msg: "Note updated successfully" });
       setIsEditing(false);
-      setReload(true);
+      refetch?.();
     }
   };
 
diff --git a/src/components/Facility/PatientNotesDetailedView.tsx b/src/components/Facility/PatientNotesDetailedView.tsx
index 8f04a3b56ca..f4628c474c4 100644
--- a/src/components/Facility/PatientNotesDetailedView.tsx
+++ b/src/components/Facility/PatientNotesDetailedView.tsx
@@ -14,10 +14,11 @@ import {
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
+import useQuery from "@/Utils/request/useQuery";
 
 interface Props {
   patientId: string;
-  consultationId: string;
+  consultationId?: string;
   noteId: string;
   thread: PatientNotesModel["thread"];
   setThreadViewNote?: (note: string) => void;
@@ -26,20 +27,39 @@ interface Props {
 const PatientNotesDetailedView = (props: Props) => {
   const { patientId, consultationId, noteId, thread, setThreadViewNote } =
     props;
-  const [isLoading, setIsLoading] = useState(true);
-  const [reload, setReload] = useState(false);
-  const [state, setState] = useState<PatientNotesModel>();
   const [noteField, setNoteField] = useState("");
   const [reply_to, setReplyTo] = useState<PatientNotesReplyModel | undefined>(
     undefined,
   );
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const {
+    data: state,
+    loading,
+    refetch,
+  } = useQuery(routes.getPatientNote, {
+    pathParams: {
+      patientId: patientId,
+      noteId,
+    },
+    query: {
+      consultation: consultationId,
+      thread,
+    },
+  });
+
   const scrollToBottom = () => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   };
+
+  useEffect(() => {
+    if (state) {
+      setTimeout(scrollToBottom, 100);
+    }
+  }, [state]);
+
   const onAddNote = async () => {
     if (!/\S+/.test(noteField)) {
       Notification.Error({
@@ -77,58 +97,20 @@ const PatientNotesDetailedView = (props: Props) => {
       return undefined;
     }
   };
-  const fetchNotes = async () => {
-    setIsLoading(true);
-
-    const { data } = await request(routes.getPatientNote, {
-      pathParams: {
-        patientId: patientId,
-        noteId,
-      },
-      query: {
-        consultation: consultationId,
-        thread,
-      },
-    });
-
-    if (data) {
-      setState(data);
-      setTimeout(scrollToBottom, 100);
-    }
-    setIsLoading(false);
-    setReload(false);
-  };
-
-  // Fetch notes when reload is triggered
-  useEffect(() => {
-    if (reload) {
-      fetchNotes();
-    }
-  }, [reload]);
-
-  // Fetch notes when thread or noteId changes
-  useEffect(() => {
-    fetchNotes();
-  }, [thread, noteId]);
 
-  // Set reload to true on component mount
-  useEffect(() => {
-    setReload(true);
-  }, []);
-
-  if (isLoading) {
+  if (loading) {
     return (
-      <div className="flex items-center justify-center bg-white">
+      <div className="flex h-full w-full items-center justify-center bg-white">
         <CircularProgress />
       </div>
     );
   }
 
   return (
-    <div className="flex w-full flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white sm:w-[500px]">
+    <div className="flex w-full flex-col overflow-hidden bg-white">
       {state && (
         <div className="flex h-full flex-col">
-          <div className="px-3 pt-2">
+          <div className="flex-shrink-0 border-b border-secondary-300 px-3 pt-2 pb-2">
             <div className="mb-2 flex items-center justify-between">
               <h4 className="text-lg">Note</h4>
               <button
@@ -141,13 +123,13 @@ const PatientNotesDetailedView = (props: Props) => {
             </div>
             <PatientNoteCard
               note={state}
-              setReload={setReload}
-              allowReply={false}
+              refetch={refetch}
+              setReplyTo={setReplyTo}
             />
           </div>
 
-          <div className="flex flex-1 flex-col overflow-hidden">
-            <div className="flex items-center justify-between px-4 py-2">
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div className="flex-shrink-0 border-b border-secondary-300 flex items-center justify-between px-4 py-2">
               <h4 className="text-lg text-slate-600">Replies</h4>
               {state.child_notes.length > 0 && (
                 <div className="text-sm text-secondary-500">
@@ -157,31 +139,36 @@ const PatientNotesDetailedView = (props: Props) => {
               )}
             </div>
 
-            <div ref={scrollRef} className="flex-1 overflow-y-auto px-3">
+            <div
+              ref={scrollRef}
+              className="flex-1 overflow-y-auto px-3 sm:max-h-[350px]"
+            >
               {state.child_notes.length > 0 ? (
-                state.child_notes.map((note) => {
-                  const parentNote = state.child_notes.find(
-                    (n) => n.id === note.reply_to,
-                  );
-                  return (
-                    <DoctorNoteReplyPreviewCard
-                      key={note.id}
-                      parentNote={
-                        note.reply_to !== state.id ? parentNote : undefined
-                      }
-                    >
-                      <div className="mt-3">
-                        <PatientNoteCard
-                          note={note as PatientNotesModel}
-                          setReload={setReload}
-                          setReplyTo={setReplyTo}
-                        />
-                      </div>
-                    </DoctorNoteReplyPreviewCard>
-                  );
-                })
+                <div className="flex flex-col">
+                  {state.child_notes.map((note) => {
+                    const parentNote = state.child_notes.find(
+                      (n) => n.id === note.reply_to,
+                    );
+                    return (
+                      <DoctorNoteReplyPreviewCard
+                        key={note.id}
+                        parentNote={
+                          note.reply_to !== state.id ? parentNote : undefined
+                        }
+                      >
+                        <div className="mt-2">
+                          <PatientNoteCard
+                            note={note as PatientNotesModel}
+                            refetch={refetch}
+                            setReplyTo={setReplyTo}
+                          />
+                        </div>
+                      </DoctorNoteReplyPreviewCard>
+                    );
+                  })}
+                </div>
               ) : (
-                <div className="flex h-full flex-1 items-center justify-center text-center">
+                <div className="flex h-full items-center justify-center text-center">
                   <div className="flex flex-col items-center gap-2">
                     <CareIcon
                       icon="l-comment-alt"
@@ -194,21 +181,21 @@ const PatientNotesDetailedView = (props: Props) => {
                 </div>
               )}
             </div>
-          </div>
 
-          <div className="m-1 max-sm:mr-3">
-            <DoctorNoteReplyPreviewCard
-              parentNote={reply_to}
-              cancelReply={() => setReplyTo(undefined)}
-            >
-              <DiscussionNotesEditor
-                onAddNote={onAddNote}
-                onChange={setNoteField}
-                initialNote={noteField}
-                onRefetch={() => setReload(true)}
-                maxRows={10}
-              />
-            </DoctorNoteReplyPreviewCard>
+            <div className="flex-shrink-0 border-secondary-300 mt-2">
+              <DoctorNoteReplyPreviewCard
+                parentNote={reply_to}
+                cancelReply={() => setReplyTo(undefined)}
+              >
+                <DiscussionNotesEditor
+                  onAddNote={onAddNote}
+                  onChange={setNoteField}
+                  initialNote={noteField}
+                  onRefetch={() => refetch()}
+                  maxRows={10}
+                />
+              </DoctorNoteReplyPreviewCard>
+            </div>
           </div>
         </div>
       )}
diff --git a/src/components/Facility/PatientNotesList.tsx b/src/components/Facility/PatientNotesList.tsx
index 5602266662b..4abd36c5a63 100644
--- a/src/components/Facility/PatientNotesList.tsx
+++ b/src/components/Facility/PatientNotesList.tsx
@@ -1,99 +1,107 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 import CircularProgress from "@/components/Common/CircularProgress";
-import DoctorNote from "@/components/Facility/DoctorNote";
+import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
+import PatientNoteCard from "@/components/Facility/PatientNoteCard";
 import {
   PatientNoteStateType,
   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";
-
-interface PatientNotesProps {
+interface PatientNotesListProps {
   state: PatientNoteStateType;
-  setState: Dispatch<SetStateAction<PatientNoteStateType>>;
-  patientId: string;
-  facilityId: string;
-  reload?: boolean;
-  setReload?: (value: boolean) => void;
-  thread: PatientNotesModel["thread"];
+  refetch?: () => void;
+  handleNext: () => void;
+  disableEdit?: boolean;
   setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
+  mode?: "thread-view" | "default-view";
+  setThreadViewNote?: (noteId: string) => void;
+  isLoading?: boolean;
 }
 
-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 (currentPage: number) => {
-    setIsLoading(true);
-    const { data } = await request(routes.getPatientNotes, {
-      pathParams: { patientId: props.patientId },
-      query: {
-        offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
-        thread,
-      },
-    });
-
-    if (data) {
-      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(state.cPage);
-    }
-  }, [reload]);
-
-  useEffect(() => {
-    fetchNotes(state.cPage);
-  }, [thread]);
-
-  useEffect(() => {
-    setReload?.(true);
-  }, []);
-
-  const handleNext = () => {
-    if (state.cPage < state.totalPages) {
-      setState((prevState) => ({
-        ...prevState,
-        cPage: prevState.cPage + 1,
-      }));
-      setReload?.(true);
-    }
-  };
+const PatientNotesList = (props: PatientNotesListProps) => {
+  const {
+    state,
+    handleNext,
+    refetch,
+    disableEdit,
+    setReplyTo,
+    mode,
+    setThreadViewNote,
+    isLoading,
+  } = props;
+
+  const notes =
+    mode === "thread-view"
+      ? state.notes.filter((note) => !note.root_note_object)
+      : state.notes;
 
   if (isLoading && state.cPage === 1) {
     return (
-      <div className="flex h-full w-full items-center justify-center bg-white">
+      <div className="flex h-[500px] w-full items-center justify-center bg-white">
         <CircularProgress />
       </div>
     );
   }
 
   return (
-    <DoctorNote
-      state={state}
-      handleNext={handleNext}
-      setReload={setReload}
-      setReplyTo={setReplyTo}
-    />
+    <div
+      className="mt-4 flex h-[500px] grow flex-col-reverse overflow-y-scroll bg-white ml-2"
+      id="patient-notes-list"
+    >
+      {notes.length ? (
+        <InfiniteScroll
+          next={handleNext}
+          hasMore={state.cPage < state.totalPages}
+          loader={
+            <div className="flex items-center justify-center">
+              <CircularProgress />
+            </div>
+          }
+          className="flex h-full flex-col-reverse overflow-hidden"
+          inverse={true}
+          dataLength={notes.length}
+          scrollableTarget="patient-notes-list"
+        >
+          {notes.map((note) => {
+            const noteCard = (
+              <PatientNoteCard
+                note={note}
+                refetch={refetch}
+                disableEdit={disableEdit}
+                setReplyTo={setReplyTo}
+                mode={mode}
+                allowThreadView={mode === "thread-view"}
+                allowReply={mode !== "thread-view"}
+                setThreadViewNote={setThreadViewNote}
+              />
+            );
+            if (mode === "thread-view") {
+              return (
+                <div key={note.id} className="mt-3">
+                  {noteCard}
+                </div>
+              );
+            } else {
+              return (
+                <DoctorNoteReplyPreviewCard
+                  key={note.id}
+                  parentNote={note.reply_to_object}
+                >
+                  <div className={!note.reply_to_object ? "mt-3" : ""}>
+                    {noteCard}
+                  </div>
+                </DoctorNoteReplyPreviewCard>
+              );
+            }
+          })}
+        </InfiniteScroll>
+      ) : (
+        <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-secondary-500">
+          No Notes Found
+        </div>
+      )}
+    </div>
   );
 };
 
diff --git a/src/components/Facility/ConsultationDoctorNotes/index.tsx b/src/components/Facility/PatientNotesListComponent.tsx
similarity index 51%
rename from src/components/Facility/ConsultationDoctorNotes/index.tsx
rename to src/components/Facility/PatientNotesListComponent.tsx
index b169db60b6e..568f8323504 100644
--- a/src/components/Facility/ConsultationDoctorNotes/index.tsx
+++ b/src/components/Facility/PatientNotesListComponent.tsx
@@ -1,12 +1,13 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
+
 import DiscussionNotesEditor from "@/components/Common/DiscussionNotesEditor";
-import Page from "@/components/Common/Page";
 import Tabs from "@/components/Common/Tabs";
 import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
-import PatientConsultationNotesList from "@/components/Facility/PatientConsultationNotesList";
 import PatientNotesDetailedView from "@/components/Facility/PatientNotesDetailedView";
+import PatientNotesList from "@/components/Facility/PatientNotesList";
 import {
   PatientNoteStateType,
   PatientNotesModel,
@@ -15,22 +16,33 @@ import {
 import useAuthUser from "@/hooks/useAuthUser";
 import { useMessageListener } from "@/hooks/useMessageListener";
 
-import { PATIENT_NOTES_THREADS } from "@/common/constants";
+import {
+  PATIENT_NOTES_THREADS,
+  RESULTS_PER_PAGE_LIMIT,
+} 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 useQuery from "@/Utils/request/useQuery";
 import { classNames, keysOf } from "@/Utils/utils";
 
-interface ConsultationDoctorNotesProps {
+interface PatientNotesProps {
   patientId: string;
   facilityId: string;
-  consultationId: string;
+  consultationId?: string;
+  className?: string;
+  allowThreadView?: boolean;
 }
 
-const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
-  const { patientId, facilityId, consultationId } = props;
+const PatientNotesListComponent = (props: PatientNotesProps) => {
+  const {
+    patientId,
+    facilityId,
+    consultationId,
+    allowThreadView = true,
+  } = props;
   const { t } = useTranslation();
   const authUser = useAuthUser();
   const [thread, setThread] = useState(
@@ -41,9 +53,6 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
   const [patientActive, setPatientActive] = useState(true);
   const [noteField, setNoteField] = useState("");
-  const [reload, setReload] = useState(false);
-  const [facilityName, setFacilityName] = useState("");
-  const [patientName, setPatientName] = useState("");
   const [reply_to, setReplyTo] = useState<PatientNotesModel | undefined>(
     undefined,
   );
@@ -61,6 +70,32 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
   };
   const [state, setState] = useState(initialData);
 
+  const { refetch, loading } = useQuery(routes.getPatientNotes, {
+    pathParams: { patientId },
+    query: {
+      consultation: consultationId,
+      offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
+      thread,
+    },
+    onResponse: ({ data }) => {
+      if (data) {
+        setState((prevState) => ({
+          ...prevState,
+          notes:
+            state.cPage === 1
+              ? data.results
+              : [...prevState.notes, ...data.results],
+          totalPages: Math.ceil(data.count / RESULTS_PER_PAGE_LIMIT),
+        }));
+      }
+    },
+  });
+
+  useEffect(() => {
+    setThreadViewNote("");
+    setState((prev) => ({ ...prev, notes: [], cPage: 1 }));
+  }, [thread]);
+
   const onAddNote = async () => {
     if (!/\S+/.test(noteField)) {
       Notification.Error({
@@ -96,8 +131,6 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
     onResponse: ({ data }) => {
       if (data) {
         setPatientActive(data.is_active ?? true);
-        setPatientName(data.name ?? "");
-        setFacilityName(data.facility_object?.name ?? "");
       }
     },
   });
@@ -110,32 +143,28 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
       message?.facility_id == facilityId &&
       message?.patient_id == patientId
     ) {
-      setReload(true);
+      refetch();
     }
   });
 
   return (
-    <Page
-      title="Discussion Notes"
-      className="relative flex h-[calc(100vh-3rem)] flex-col"
-      crumbsReplacements={{
-        [facilityId]: { name: facilityName },
-        [patientId]: { name: patientName },
-      }}
-      backUrl={`/facility/${facilityId}/patient/${patientId}`}
-    >
-      <div className="right-8 top-0 max-sm:my-1 sm:mx-2 md:absolute">
-        <Tabs
-          className="mt-1 w-full gap-8 lg:w-full"
-          tabs={[
-            { text: "Thread View", value: "thread-view" },
-            { text: "Default View", value: "default-view" },
-          ]}
-          currentTab={mode}
-          onTabChange={(tab) => setMode(tab as "thread-view" | "default-view")}
-        />
-      </div>
-      <div className="relative flex h-full flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white">
+    <div className="flex h-full flex-col">
+      {allowThreadView && (
+        <div className="right-8 top-0 max-sm:mb-2 sm:mx-2 md:absolute">
+          <Tabs
+            className="mt-1 w-full gap-8 lg:w-full"
+            tabs={[
+              { text: "Thread View", value: "thread-view" },
+              { text: "Default View", value: "default-view" },
+            ]}
+            currentTab={mode}
+            onTabChange={(tab) =>
+              setMode(tab as "thread-view" | "default-view")
+            }
+          />
+        </div>
+      )}
+      <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white">
         <div className="sticky top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
           {keysOf(PATIENT_NOTES_THREADS).map((current) => (
             <button
@@ -153,53 +182,67 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
             </button>
           ))}
         </div>
-        <div className="flex flex-1 overflow-hidden">
+        <div className="flex flex-1 min-h-0 overflow-hidden">
           <div
             className={classNames(
-              "flex flex-1 flex-col",
-              threadViewNote && "max-sm:hidden",
+              "flex flex-1 flex-col min-h-0 w-full",
+              threadViewNote && "max-sm:hidden sm:w-[calc(100%-500px)]",
             )}
           >
-            <PatientConsultationNotesList
+            <PatientNotesList
               state={state}
-              setState={setState}
-              reload={reload}
-              setReload={setReload}
-              thread={thread}
+              handleNext={() => {
+                if (state.cPage < state.totalPages) {
+                  setState((prevState) => ({
+                    ...prevState,
+                    cPage: prevState.cPage + 1,
+                  }));
+                }
+              }}
+              refetch={refetch}
+              disableEdit={!patientActive}
               setReplyTo={setReplyTo}
               mode={mode}
               setThreadViewNote={setThreadViewNote}
+              isLoading={loading}
             />
             <div className="mt-2">
-              <DoctorNoteReplyPreviewCard
-                parentNote={reply_to}
-                cancelReply={() => setReplyTo(undefined)}
-              >
-                <DiscussionNotesEditor
-                  initialNote={noteField}
-                  onChange={setNoteField}
-                  onAddNote={onAddNote}
-                  isAuthorized={patientActive}
-                  onRefetch={() => setReload(true)}
-                  maxRows={10}
-                />
-              </DoctorNoteReplyPreviewCard>
+              <AuthorizedChild authorizeFor={NonReadOnlyUsers}>
+                {({ isAuthorized }) => (
+                  <DoctorNoteReplyPreviewCard
+                    parentNote={reply_to}
+                    cancelReply={() => setReplyTo(undefined)}
+                  >
+                    <DiscussionNotesEditor
+                      initialNote={noteField}
+                      onChange={setNoteField}
+                      onAddNote={onAddNote}
+                      isAuthorized={isAuthorized && patientActive}
+                      onRefetch={refetch}
+                      maxRows={10}
+                      className="mt-2"
+                    />
+                  </DoctorNoteReplyPreviewCard>
+                )}
+              </AuthorizedChild>
             </div>
           </div>
 
           {threadViewNote && (
-            <PatientNotesDetailedView
-              patientId={patientId}
-              consultationId={consultationId}
-              noteId={threadViewNote}
-              thread={thread}
-              setThreadViewNote={setThreadViewNote}
-            />
+            <div className="flex w-full sm:w-[500px] min-h-0 max-sm:fixed max-sm:inset-0 max-sm:z-50 sm:border-l sm:border-secondary-300">
+              <PatientNotesDetailedView
+                patientId={patientId}
+                consultationId={consultationId}
+                noteId={threadViewNote}
+                thread={thread}
+                setThreadViewNote={setThreadViewNote}
+              />
+            </div>
           )}
         </div>
       </div>
-    </Page>
+    </div>
   );
 };
 
-export default ConsultationDoctorNotes;
+export default PatientNotesListComponent;
diff --git a/src/components/Facility/PatientNotesSlideover.tsx b/src/components/Facility/PatientNotesSlideover.tsx
index 69f3a155a24..24fd315ce6e 100644
--- a/src/components/Facility/PatientNotesSlideover.tsx
+++ b/src/components/Facility/PatientNotesSlideover.tsx
@@ -7,7 +7,7 @@ import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
 import DiscussionNotesEditor from "@/components/Common/DiscussionNotesEditor";
 import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
-import PatientConsultationNotesList from "@/components/Facility/PatientConsultationNotesList";
+import PatientNotesList from "@/components/Facility/PatientNotesList";
 import {
   PatientNoteStateType,
   PatientNotesReplyModel,
@@ -17,12 +17,16 @@ import useAuthUser from "@/hooks/useAuthUser";
 import { useMessageListener } from "@/hooks/useMessageListener";
 import useNotificationSubscriptionState from "@/hooks/useNotificationSubscriptionState";
 
-import { PATIENT_NOTES_THREADS } from "@/common/constants";
+import {
+  PATIENT_NOTES_THREADS,
+  RESULTS_PER_PAGE_LIMIT,
+} 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 useQuery from "@/Utils/request/useQuery";
 import { classNames, keysOf } from "@/Utils/utils";
 
 interface PatientNotesProps {
@@ -43,7 +47,6 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
   );
   const [show, setShow] = useState(true);
   const [patientActive, setPatientActive] = useState(true);
-  const [reload, setReload] = useState(false);
   const [reply_to, setReplyTo] = useState<PatientNotesReplyModel | undefined>(
     undefined,
   );
@@ -77,6 +80,26 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     localStorage.getItem(localStorageKey) || "",
   );
 
+  const { refetch, loading } = useQuery(routes.getPatientNotes, {
+    pathParams: { patientId },
+    query: {
+      offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
+      thread,
+    },
+    onResponse: ({ data }) => {
+      if (data) {
+        setState((prevState) => ({
+          ...prevState,
+          notes:
+            state.cPage === 1
+              ? data.results
+              : [...prevState.notes, ...data.results],
+          totalPages: Math.ceil(data.count / RESULTS_PER_PAGE_LIMIT),
+        }));
+      }
+    },
+  });
+
   const onAddNote = async () => {
     if (!/\S+/.test(noteField)) {
       Notification.Error({
@@ -110,7 +133,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
       message?.facility_id == facilityId &&
       message?.patient_id == patientId
     ) {
-      setReload(true);
+      refetch();
     }
   });
 
@@ -228,14 +251,20 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
               </button>
             ))}
           </div>
-          <PatientConsultationNotesList
+          <PatientNotesList
             state={state}
-            setState={setState}
-            reload={reload}
-            setReload={setReload}
+            handleNext={() => {
+              if (state.cPage < state.totalPages) {
+                setState((prevState) => ({
+                  ...prevState,
+                  cPage: prevState.cPage + 1,
+                }));
+              }
+            }}
+            refetch={refetch}
             disableEdit={!patientActive}
-            thread={thread}
             setReplyTo={setReplyTo}
+            isLoading={loading}
           />
           {patientActive && (
             <AuthorizedChild authorizeFor={NonReadOnlyUsers}>
@@ -249,7 +278,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
                     onChange={setNoteField}
                     onAddNote={onAddNote}
                     isAuthorized={isAuthorized}
-                    onRefetch={() => setReload(true)}
+                    onRefetch={refetch}
                     maxRows={10}
                     className="mt-2"
                   />
diff --git a/src/components/Patient/PatientDetailsTab/Notes.tsx b/src/components/Patient/PatientDetailsTab/Notes.tsx
index de35d6c43aa..3c8fb8852ba 100644
--- a/src/components/Patient/PatientDetailsTab/Notes.tsx
+++ b/src/components/Patient/PatientDetailsTab/Notes.tsx
@@ -1,27 +1,4 @@
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-
-import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
-
-import DiscussionNotesEditor from "@/components/Common/DiscussionNotesEditor";
-import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
-import PatientNotesList from "@/components/Facility/PatientNotesList";
-import {
-  PatientNoteStateType,
-  PatientNotesModel,
-} from "@/components/Facility/models";
-
-import useAuthUser from "@/hooks/useAuthUser";
-import { useMessageListener } from "@/hooks/useMessageListener";
-
-import { PATIENT_NOTES_THREADS } from "@/common/constants";
-
-import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
-import routes from "@/Utils/request/api";
-import request from "@/Utils/request/request";
-import { classNames, keysOf } from "@/Utils/utils";
-
-import * as Notification from "../../../Utils/Notifications";
+import PatientNotesListComponent from "@/components/Facility/PatientNotesListComponent";
 
 interface PatientNotesProps {
   id: string;
@@ -31,141 +8,13 @@ interface PatientNotesProps {
 const PatientNotes = (props: PatientNotesProps) => {
   const { id: patientId, facilityId } = props;
 
-  const authUser = useAuthUser();
-  const [thread, setThread] = useState(
-    authUser.user_type === "Nurse"
-      ? PATIENT_NOTES_THREADS.Nurses
-      : 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>(
-    undefined,
-  );
-
-  const initialData: PatientNoteStateType = {
-    notes: [],
-    cPage: 1,
-    totalPages: 1,
-  };
-  const [state, setState] = useState(initialData);
-
-  const onAddNote = async () => {
-    if (!/\S+/.test(noteField)) {
-      Notification.Error({
-        msg: "Note Should Contain At Least 1 Character",
-      });
-      return;
-    }
-
-    try {
-      const { res, data } = await request(routes.addPatientNote, {
-        pathParams: { patientId: patientId },
-        body: {
-          note: noteField,
-          thread,
-          reply_to: reply_to?.id,
-        },
-      });
-      if (res?.status === 201) {
-        setNoteField("");
-        setState({ ...state, cPage: 1 });
-        setReplyTo(undefined);
-        Notification.Success({ msg: "Note added successfully" });
-      }
-
-      return data?.id;
-    } catch (error) {
-      Notification.Error({
-        msg: "Failed to add note. Please try again.",
-      });
-    }
-  };
-
-  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 (
-      (message?.from == "patient/doctor_notes/create" ||
-        message?.from == "patient/doctor_notes/edit") &&
-      message?.facility_id == facilityId &&
-      message?.patient_id == patientId
-    ) {
-      setReload(true);
-    }
-  });
-
   return (
-    <div className="flex h-screen flex-col">
-      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
-          {keysOf(PATIENT_NOTES_THREADS).map((current) => (
-            <button
-              id={`patient-note-tab-${current}`}
-              key={current}
-              className={classNames(
-                "flex flex-1 justify-center border-b-2 py-2",
-                thread === PATIENT_NOTES_THREADS[current]
-                  ? "border-primary-500 font-bold text-secondary-800"
-                  : "border-secondary-300 text-secondary-800",
-              )}
-              onClick={() => setThread(PATIENT_NOTES_THREADS[current])}
-            >
-              {t(`patient_notes_thread__${current}`)}
-            </button>
-          ))}
-        </div>
-        <PatientNotesList
-          state={state}
-          setState={setState}
-          patientId={patientId}
-          facilityId={facilityId}
-          reload={reload}
-          setReload={setReload}
-          thread={thread}
-          setReplyTo={setReplyTo}
-        />
-        <AuthorizedChild authorizeFor={NonReadOnlyUsers}>
-          {({ isAuthorized }) => (
-            <DoctorNoteReplyPreviewCard
-              parentNote={reply_to}
-              cancelReply={() => setReplyTo(undefined)}
-            >
-              <DiscussionNotesEditor
-                initialNote={noteField}
-                onChange={setNoteField}
-                onAddNote={onAddNote}
-                isAuthorized={isAuthorized && patientActive}
-                onRefetch={() => setReload(true)}
-                maxRows={10}
-                className="mt-2"
-              />
-            </DoctorNoteReplyPreviewCard>
-          )}
-        </AuthorizedChild>
-      </div>
-    </div>
+    <PatientNotesListComponent
+      allowThreadView={false}
+      patientId={patientId}
+      facilityId={facilityId}
+      className="m-5"
+    />
   );
 };
 
diff --git a/src/components/Patient/PatientNotes.tsx b/src/components/Patient/PatientNotes.tsx
index 144f4e7a66a..f747032e5e9 100644
--- a/src/components/Patient/PatientNotes.tsx
+++ b/src/components/Patient/PatientNotes.tsx
@@ -1,176 +1,49 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useState } from "react";
 
-import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
-
-import DiscussionNotesEditor from "@/components/Common/DiscussionNotesEditor";
 import Page from "@/components/Common/Page";
-import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
-import PatientNotesList from "@/components/Facility/PatientNotesList";
-import {
-  PatientNoteStateType,
-  PatientNotesModel,
-} from "@/components/Facility/models";
-
-import useAuthUser from "@/hooks/useAuthUser";
-import { useMessageListener } from "@/hooks/useMessageListener";
-
-import { PATIENT_NOTES_THREADS } from "@/common/constants";
+import PatientNotesListComponent from "@/components/Facility/PatientNotesListComponent";
 
-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 useQuery from "@/Utils/request/useQuery";
 
 interface PatientNotesProps {
   patientId: string;
   facilityId: string;
+  consultationId?: string;
 }
 
 const PatientNotes = (props: PatientNotesProps) => {
-  const { patientId, facilityId } = props;
-  const { t } = useTranslation();
-  const authUser = useAuthUser();
-  const [thread, setThread] = useState(
-    authUser.user_type === "Nurse"
-      ? PATIENT_NOTES_THREADS.Nurses
-      : PATIENT_NOTES_THREADS.Doctors,
-  );
+  const { patientId, facilityId, consultationId } = props;
 
-  const [patientActive, setPatientActive] = useState(true);
-  const [noteField, setNoteField] = useState("");
-  const [reload, setReload] = useState(false);
   const [facilityName, setFacilityName] = useState("");
   const [patientName, setPatientName] = useState("");
-  const [reply_to, setReplyTo] = useState<PatientNotesModel>();
-
-  const initialData: PatientNoteStateType = {
-    notes: [],
-    cPage: 1,
-    totalPages: 1,
-  };
-  const [state, setState] = useState(initialData);
 
-  const onAddNote = async () => {
-    if (!/\S+/.test(noteField)) {
-      Notification.Error({
-        msg: "Note Should Contain At Least 1 Character",
-      });
-      return;
-    }
-
-    try {
-      const { res, data } = await request(routes.addPatientNote, {
-        pathParams: { patientId: patientId },
-        body: {
-          note: noteField,
-          thread,
-          reply_to: reply_to?.id,
-        },
-      });
-      if (res?.status === 201) {
-        Notification.Success({ msg: "Note added successfully" });
-        setNoteField("");
-        setReload(!reload);
-        setState({ ...state, cPage: 1 });
-        setReplyTo(undefined);
-        return data?.id;
-      } else {
-        throw new Error("Failed to add note");
-      }
-    } catch (error) {
-      Notification.Error({
-        msg: "Failed to add note. Please try again.",
-      });
-      return undefined;
-    }
-  };
-
-  useEffect(() => {
-    async function fetchPatientName() {
-      if (patientId) {
-        const { data } = await request(routes.getPatient, {
-          pathParams: { id: patientId },
-        });
-        if (data) {
-          setPatientActive(data.is_active ?? true);
-          setPatientName(data.name ?? "");
-          setFacilityName(data.facility_object?.name ?? "");
-        }
+  useQuery(routes.getPatient, {
+    pathParams: { id: patientId },
+    onResponse: ({ data }) => {
+      if (data) {
+        setPatientName(data.name ?? "");
+        setFacilityName(data.facility_object?.name ?? "");
       }
-    }
-    fetchPatientName();
-  }, [patientId]);
-
-  useMessageListener((data) => {
-    const message = data?.message;
-    if (
-      (message?.from == "patient/doctor_notes/create" ||
-        message?.from == "patient/doctor_notes/edit") &&
-      message?.facility_id == facilityId &&
-      message?.patient_id == patientId
-    ) {
-      setReload(true);
-    }
+    },
   });
 
   return (
     <Page
-      title="Patient Notes"
-      className="flex h-screen flex-col"
+      title="Discussion Notes"
+      className="relative flex min-h-[calc(100vh-3rem)] flex-col"
       crumbsReplacements={{
         [facilityId]: { name: facilityName },
         [patientId]: { name: patientName },
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
-          {keysOf(PATIENT_NOTES_THREADS).map((current) => (
-            <button
-              id={`patient-note-tab-${current}`}
-              key={current}
-              className={classNames(
-                "flex flex-1 justify-center border-b-2 py-2",
-                thread === PATIENT_NOTES_THREADS[current]
-                  ? "border-primary-500 font-bold text-secondary-800"
-                  : "border-secondary-300 text-secondary-800",
-              )}
-              onClick={() => setThread(PATIENT_NOTES_THREADS[current])}
-            >
-              {t(`patient_notes_thread__${current}`)}
-            </button>
-          ))}
-        </div>
-        <PatientNotesList
-          state={state}
-          setState={setState}
+      <div className="flex-1 overflow-hidden">
+        <PatientNotesListComponent
           patientId={patientId}
           facilityId={facilityId}
-          reload={reload}
-          setReload={setReload}
-          thread={thread}
-          setReplyTo={setReplyTo}
+          consultationId={consultationId}
         />
-        <AuthorizedChild authorizeFor={NonReadOnlyUsers}>
-          {({ isAuthorized }) => (
-            <DoctorNoteReplyPreviewCard
-              parentNote={reply_to}
-              cancelReply={() => setReplyTo(undefined)}
-            >
-              <DiscussionNotesEditor
-                initialNote={noteField}
-                onChange={setNoteField}
-                onAddNote={onAddNote}
-                isAuthorized={isAuthorized && patientActive}
-                onRefetch={() => setReload(true)}
-                maxRows={10}
-                className="mt-2"
-              />
-            </DoctorNoteReplyPreviewCard>
-          )}
-        </AuthorizedChild>
       </div>
     </Page>
   );