Replace useDispatch in Patient Files (src/Components/Patient/) (#7078)

* replaced useDispatch in patientHome * replace usedispatch in patientfiler and managepatinet * add patientfilter * replace useDispatch in dailyroundslistdetials * replaced useDispatch in sampleDetails * replace useDispatch in sampleFilters * replace useDispatch in samplePreview * sampleTestCard * replace useDispatch in sampleTest * replace useDispatch in sampleViewAdmin * replace useDispatch in shiftCreate * fix * fix * revert managePatients and patientFilter useDispatch * replace useDispatch in managePatients * fix * fix * replace useDispatch in PatientFilter * fix prefetch * minor fix * add trailing slashes to api's * fix based on review * Update package-lock.json * Update package-lock.json * replace reload * implement paginated list * fix types * rm Timeline from paginatedList * Update button styling in CommentsSection component * Fix API paths in Redux file * Update API paths * remove unused actions * fix eslint * fix daily rounds and filters * fix sample view admin * fix shifting * fix based on review * minor fix * fix lint --------- Co-authored-by: rithviknishad <[email protected]> Co-authored-by: Mohammed Nihal <[email protected]>
ohcnetwork · Feb 14, 2024 · d36c0f2 · d36c0f2
1 parent 3d0e6f2
commit d36c0f2
Show file tree

Hide file tree

Showing 15 changed files with 540 additions and 884 deletions.
diff --git a/src/CAREUI/display/Timeline.tsx b/src/CAREUI/display/Timeline.tsx
@@ -14,7 +14,7 @@ export interface TimelineEvent<TType = string> {
 }
 
 interface TimelineProps {
-  className: string;
+  className?: string;
   children: React.ReactNode | React.ReactNode[];
   name: string;
 }

diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx
@@ -7,7 +7,6 @@ import ButtonV2, {
 import CareIcon from "../icons/CareIcon";
 import { classNames } from "../../Utils/utils";
 import Pagination from "../../Components/Common/Pagination";
-import Timeline from "../display/Timeline";
 
 const DEFAULT_PER_PAGE_LIMIT = 14;
 
@@ -135,21 +134,19 @@ const Items = <TItem extends object>(props: ItemsProps<TItem>) => {
   }
 
   return (
-    <Timeline className="rounded-lg bg-white p-2 shadow" name="log update">
-      <ul className={props.className}>
-        {loading && props.shimmer
-          ? Array.from({ length: props.shimmerCount ?? 8 }).map((_, i) => (
-              <li key={i} className="w-full">
-                {props.shimmer}
-              </li>
-            ))
-          : items.map((item, index, items) => (
-              <li key={index} className="w-full">
-                {props.children(item, items)}
-              </li>
-            ))}
-      </ul>
-    </Timeline>
+    <ul className={props.className}>
+      {loading && props.shimmer
+        ? Array.from({ length: props.shimmerCount ?? 8 }).map((_, i) => (
+            <li key={i} className="w-full">
+              {props.shimmer}
+            </li>
+          ))
+        : items.map((item, index, items) => (
+            <li key={index} className="w-full">
+              {props.children(item, items)}
+            </li>
+          ))}
+    </ul>
   );
 };
 

diff --git a/src/Components/Facility/Consultations/DailyRoundsList.tsx b/src/Components/Facility/Consultations/DailyRoundsList.tsx
@@ -10,7 +10,8 @@ import PageTitle from "../../Common/PageTitle";
 import DailyRoundsFilter from "./DailyRoundsFilter";
 import { ConsultationModel } from "../models";
 import { useSlugs } from "../../../Common/hooks/useSlug";
-import { TimelineNode } from "../../../CAREUI/display/Timeline";
+
+import Timeline, { TimelineNode } from "../../../CAREUI/display/Timeline";
 import { useState } from "react";
 import { QueryParams } from "../../../Utils/request/types";
 
@@ -52,69 +53,71 @@ export default function DailyRoundsList({ consultation }: Props) {
               <PaginatedList.WhenLoading>
                 <LoadingLogUpdateCard />
               </PaginatedList.WhenLoading>
-              <PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
-                {(item, items) => {
-                  if (item.rounds_type === "AUTOMATED") {
+              <Timeline name="log update">
+                <PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3 rounded-lg bg-white p-2 shadow">
+                  {(item, items) => {
+                    if (item.rounds_type === "AUTOMATED") {
+                      return (
+                        <TimelineNode
+                          event={{
+                            type: "created",
+                            timestamp: item.taken_at?.toString() ?? "",
+                            by: {
+                              user_type: "",
+                              first_name: "Virtual",
+                              last_name: "Assistant",
+                              username: "",
+                              id: "",
+                              email: "",
+                              last_login: "",
+                            },
+                            icon: "l-robot",
+                          }}
+                          isLast={items.indexOf(item) == items.length - 1}
+                        >
+                          <VirtualNursingAssistantLogUpdateCard
+                            round={item}
+                            previousRound={items[items.indexOf(item) + 1]}
+                          />
+                        </TimelineNode>
+                      );
+                    }
+
+                    const itemUrl = ["NORMAL", "TELEMEDICINE"].includes(
+                      item.rounds_type as string
+                    )
+                      ? `${consultationUrl}/daily-rounds/${item.id}`
+                      : `${consultationUrl}/daily_rounds/${item.id}`;
+
                     return (
                       <TimelineNode
                         event={{
                           type: "created",
                           timestamp: item.taken_at?.toString() ?? "",
                           by: {
-                            user_type: "",
-                            first_name: "Virtual",
-                            last_name: "Assistant",
+                            user_type: item.created_by?.user_type ?? "",
+                            first_name: item.created_by?.first_name ?? "",
+                            last_name: item.created_by?.last_name ?? "",
                             username: "",
                             id: "",
                             email: "",
                             last_login: "",
                           },
-                          icon: "l-robot",
+                          icon: "l-user-nurse",
                         }}
                         isLast={items.indexOf(item) == items.length - 1}
                       >
-                        <VirtualNursingAssistantLogUpdateCard
+                        <DefaultLogUpdateCard
                           round={item}
-                          previousRound={items[items.indexOf(item) + 1]}
+                          consultationData={consultation}
+                          onViewDetails={() => navigate(itemUrl)}
+                          onUpdateLog={() => navigate(`${itemUrl}/update`)}
                         />
                       </TimelineNode>
                     );
-                  }
-
-                  const itemUrl = ["NORMAL", "TELEMEDICINE"].includes(
-                    item.rounds_type
-                  )
-                    ? `${consultationUrl}/daily-rounds/${item.id}`
-                    : `${consultationUrl}/daily_rounds/${item.id}`;
-
-                  return (
-                    <TimelineNode
-                      event={{
-                        type: "created",
-                        timestamp: item.taken_at?.toString() ?? "",
-                        by: {
-                          user_type: item.created_by?.user_type ?? "",
-                          first_name: item.created_by?.first_name ?? "",
-                          last_name: item.created_by?.last_name ?? "",
-                          username: "",
-                          id: "",
-                          email: "",
-                          last_login: "",
-                        },
-                        icon: "l-user-nurse",
-                      }}
-                      isLast={items.indexOf(item) == items.length - 1}
-                    >
-                      <DefaultLogUpdateCard
-                        round={item}
-                        consultationData={consultation}
-                        onViewDetails={() => navigate(itemUrl)}
-                        onUpdateLog={() => navigate(`${itemUrl}/update`)}
-                      />
-                    </TimelineNode>
-                  );
-                }}
-              </PaginatedList.Items>
+                  }}
+                </PaginatedList.Items>
+              </Timeline>
               <div className="flex w-full items-center justify-center">
                 <PaginatedList.Paginator hideIfSinglePage />
               </div>

diff --git a/src/Components/Patient/DailyRoundListDetails.tsx b/src/Components/Patient/DailyRoundListDetails.tsx
@@ -1,75 +1,53 @@
-import { lazy, useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
+import { lazy, useState } from "react";
 import {
   CONSCIOUSNESS_LEVEL,
   CURRENT_HEALTH_CHANGE,
   SYMPTOM_CHOICES,
 } from "../../Common/constants";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import { getConsultationDailyRoundsDetails } from "../../Redux/actions";
 import { DailyRoundsModel } from "./models";
 import Page from "../Common/components/Page";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { formatDateTime } from "../../Utils/utils";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 const Loading = lazy(() => import("../Common/Loading"));
 const symptomChoices = [...SYMPTOM_CHOICES];
 const currentHealthChoices = [...CURRENT_HEALTH_CHANGE];
 
 export const DailyRoundListDetails = (props: any) => {
   const { facilityId, patientId, consultationId, id } = props;
-  const dispatch: any = useDispatch();
   const [dailyRoundListDetailsData, setDailyRoundListDetails] =
     useState<DailyRoundsModel>({});
-  const [isLoading, setIsLoading] = useState(false);
 
-  const fetchpatient = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      const res = await dispatch(
-        getConsultationDailyRoundsDetails({ consultationId, id })
-      );
-      if (!status.aborted) {
-        if (res && res.data) {
-          const currentHealth = currentHealthChoices.find(
-            (i) => i.text === res.data.current_health
-          );
+  const { loading: isLoading } = useQuery(routes.getDailyReport, {
+    pathParams: { consultationId, id },
+    onResponse: ({ res, data }) => {
+      if (res && data) {
+        const currentHealth = currentHealthChoices.find(
+          (i) => i.text === data.current_health
+        );
 
-          const data: DailyRoundsModel = {
-            ...res.data,
-            temperature: Number(res.data.temperature)
-              ? res.data.temperature
-              : "",
-            additional_symptoms_text: "",
-            medication_given:
-              Object.keys(res.data.medication_given).length === 0
-                ? []
-                : res.data.medication_given,
-            current_health: currentHealth
-              ? currentHealth.desc
-              : res.data.current_health,
-          };
-          if (res.data.additional_symptoms?.length) {
-            const symptoms = res.data.additional_symptoms.map(
-              (symptom: number) => {
-                const option = symptomChoices.find((i) => i.id === symptom);
-                return option ? option.text.toLowerCase() : symptom;
-              }
-            );
-            data.additional_symptoms_text = symptoms.join(", ");
-          }
-          setDailyRoundListDetails(data);
+        const tdata: DailyRoundsModel = {
+          ...data,
+          temperature: Number(data.temperature) ? data.temperature : "",
+          additional_symptoms_text: "",
+          medication_given: data.medication_given ?? [],
+
+          current_health: currentHealth
+            ? currentHealth.desc
+            : data.current_health,
+        };
+        if (data.additional_symptoms?.length) {
+          const symptoms = data.additional_symptoms.map((symptom: number) => {
+            const option = symptomChoices.find((i) => i.id === symptom);
+            return option ? option.text.toLowerCase() : symptom;
+          });
+          tdata.additional_symptoms_text = symptoms.join(", ");
         }
-        setIsLoading(false);
+        setDailyRoundListDetails(tdata);
       }
     },
-    [consultationId, dispatch, id]
-  );
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchpatient(status);
-    },
-    [dispatch, fetchpatient]
-  );
+  });
 
   if (isLoading) {
     return <Loading />;