auto fetch on adding new note

ohcnetwork · Dec 15, 2023 · aa160a0 · aa160a0
1 parent 849df0a
commit aa160a0
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 24 deletions.
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -9,6 +9,7 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { NonReadOnlyUsers } from "../../../Utils/AuthorizeFor";
 import { useMessageListener } from "../../../Common/hooks/useMessageListener";
 import PatientConsultationNotesList from "../PatientConsultationNotesList.js";
+import { StateType } from "../models.js";
 
 interface ConsultationDoctorNotesProps {
   patientId: string;
@@ -27,6 +28,13 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
   const dispatch = useDispatch();
 
+  const initialData: StateType = {
+    notes: [],
+    cPage: 1,
+    totalPages: 1,
+  };
+  const [state, setState] = useState(initialData);
+
   const onAddNote = () => {
     const payload = {
       note: noteField,
@@ -42,6 +50,7 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
       Notification.Success({ msg: "Note added successfully" });
       setNoteField("");
       setReload(!reload);
+      setState({ ...state, cPage: 1 });
     });
   };
 
@@ -83,6 +92,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
     >
       <div className="mx-3 my-2 flex grow flex-col rounded-lg bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
         <PatientConsultationNotesList
+          state={state}
+          setState={setState}
           patientId={patientId}
           facilityId={facilityId}
           reload={reload}

diff --git a/src/Components/Facility/PatientConsultationNotesList.tsx b/src/Components/Facility/PatientConsultationNotesList.tsx
@@ -8,23 +8,20 @@ import useSlug from "../../Common/hooks/useSlug";
 import DoctorNote from "./DoctorNote";
 
 interface PatientNotesProps {
+  state: StateType;
+  setState: any;
   patientId: string;
   facilityId: string;
   reload?: boolean;
   setReload?: any;
 }
 
-// TODO:
-// 1. Adding new note isn't refetching the notes (fix needed in PatientNotesList.tsx as)
-
 const pageSize = RESULTS_PER_PAGE_LIMIT;
 
 const PatientConsultationNotesList = (props: PatientNotesProps) => {
-  const { reload, setReload } = props;
+  const { state, setState, reload, setReload } = props;
   const consultationId = useSlug("consultation") ?? "";
 
-  const initialData: StateType = { notes: [], cPage: 0, totalPages: 1 };
-  const [state, setState] = useState(initialData);
   const [isLoading, setIsLoading] = useState(true);
 
   useQuery(routes.getPatientNotes, {
@@ -33,18 +30,27 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
     },
     query: {
       consultation: consultationId,
-      offset: state.cPage * RESULTS_PER_PAGE_LIMIT,
+      offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
     },
-    prefetch: reload && state.cPage < state.totalPages,
+    prefetch: reload,
     onResponse: ({ res, data }) => {
       setIsLoading(true);
+      console.log(data);
       console.log(state);
       if (res?.status === 200 && data) {
-        setState((prevState: any) => ({
-          cPage: prevState.cPage + 1,
-          notes: [...prevState.notes, ...data.results],
-          totalPages: Math.ceil(data.count / pageSize),
-        }));
+        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),
+          }));
+        }
       }
       setReload(false);
       setIsLoading(false);

diff --git a/src/Components/Facility/PatientNotesList.tsx b/src/Components/Facility/PatientNotesList.tsx
@@ -7,6 +7,8 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 
 interface PatientNotesProps {
+  state: StateType;
+  setState: any;
   patientId: string;
   facilityId: string;
   reload?: boolean;
@@ -16,28 +18,36 @@ interface PatientNotesProps {
 const pageSize = RESULTS_PER_PAGE_LIMIT;
 
 const PatientNotesList = (props: PatientNotesProps) => {
-  const { reload, setReload } = props;
+  const { state, setState, reload, setReload } = props;
 
-  const initialData: StateType = { notes: [], cPage: 0, totalPages: 1 };
-  const [state, setState] = useState(initialData);
   const [isLoading, setIsLoading] = useState(true);
 
   useQuery(routes.getPatientNotes, {
     pathParams: {
       patientId: props.patientId,
     },
     query: {
-      offset: state.cPage * RESULTS_PER_PAGE_LIMIT,
+      offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
     },
-    prefetch: reload && state.cPage < state.totalPages,
+    prefetch: reload,
     onResponse: ({ res, data }) => {
       setIsLoading(true);
+      console.log(data);
+      console.log(state);
       if (res?.status === 200 && data) {
-        setState((prevState: any) => ({
-          cPage: prevState.cPage + 1,
-          notes: [...prevState.notes, ...data.results],
-          totalPages: Math.ceil(data.count / pageSize),
-        }));
+        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),
+          }));
+        }
       }
       setReload(false);
       setIsLoading(false);

diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
@@ -9,6 +9,7 @@ import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import PatientNotesList from "../Facility/PatientNotesList";
 import Page from "../Common/components/Page";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";
+import { StateType } from "../Facility/models";
 
 interface PatientNotesProps {
   patientId: any;
@@ -26,6 +27,9 @@ const PatientNotes = (props: PatientNotesProps) => {
 
   const dispatch = useDispatch();
 
+  const initialData: StateType = { notes: [], cPage: 0, totalPages: 1 };
+  const [state, setState] = useState(initialData);
+
   const onAddNote = () => {
     const payload = {
       note: noteField,
@@ -40,6 +44,7 @@ const PatientNotes = (props: PatientNotesProps) => {
       Notification.Success({ msg: "Note added successfully" });
       setNoteField("");
       setReload(!reload);
+      setState({ ...state, cPage: 1 });
     });
   };
 
@@ -81,6 +86,8 @@ const PatientNotes = (props: PatientNotesProps) => {
     >
       <div className="mx-3 my-2 flex grow flex-col rounded-lg bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
         <PatientNotesList
+          state={state}
+          setState={setState}
           patientId={patientId}
           facilityId={facilityId}
           reload={reload}

diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
@@ -618,7 +618,7 @@ const routes = {
     path: "/api/v1/patient/{patientId}/notes/",
     method: "GET",
     TBody: Type<PatientNotesModel[]>(),
-    TRes: Type<PaginatedResponse<PatientNotesModel[]>>(),
+    TRes: Type<PaginatedResponse<PatientNotesModel>>(),
   },
   addPatientNote: {
     path: "/api/v1/patient/{patientId}/notes/",