Merge branch 'develop' of https://github.com/ohcnetwork/care_fe into …

…quest-ui-redesign
ohcnetwork · Feb 20, 2025 · 3a65239 · 3a65239
2 parents e52aa6c + 0d089c3
commit 3a65239
Show file tree

Hide file tree

Showing 13 changed files with 555 additions and 103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "care_fe",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Care is a Digital Public Good enabling TeleICU & Decentralised Administration of Healthcare Capacity across States.",
   "private": true,
   "repository": {
@@ -95,7 +95,7 @@
     "i18next-http-backend": "^3.0.1",
     "i18next-resources-to-backend": "^1.2.1",
     "input-otp": "^1.4.2",
-    "jspdf": "^2.5.2",
+    "jspdf": "^3.0.0",
     "libphonenumber-js": "^1.11.18",
     "lucide-react": "^0.475.0",
     "markdown-it": "^14.1.0",

diff --git a/public/locale/en.json b/public/locale/en.json
@@ -2383,6 +2383,7 @@
   "view_consultation_and_log_updates": "View Consultation / Log Updates",
   "view_dashboard": "View Dashboard",
   "view_details": "View Details",
+  "view_encounter": "View Encounter",
   "view_facility": "View Facility",
   "view_files": "View Files",
   "view_patient": "View Patient",

diff --git a/src/PluginEngine.tsx b/src/PluginEngine.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable i18next/no-literal-string */
 import React, { Suspense } from "react";
 
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
@@ -52,7 +51,11 @@ export function PLUGIN_Component<K extends keyof SupportedPluginComponents>({
           return null;
         }
 
-        return <Component {...props} key={plugin.plugin} />;
+        return (
+          <React.Suspense key={plugin.plugin} fallback={<div>Loading...</div>}>
+            <Component {...props} />
+          </React.Suspense>
+        );
       })}
     </>
   );

diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
@@ -19,30 +19,50 @@ const consultationRoutes: AppRoutes = {
     ({ facilityId, encounterId }) => (
       <TreatmentSummary facilityId={facilityId} encounterId={encounterId} />
     ),
-  "/facility/:facilityId/encounter/:encounterId/:tab": ({
-    facilityId,
-    encounterId,
-    tab,
-  }) => (
-    <EncounterShow
-      facilityId={facilityId}
-      encounterId={encounterId}
-      tab={tab}
-    />
-  ),
-  "/facility/:facilityId/encounter/:encounterId/:tab/:subPage": ({
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire":
+    ({ facilityId, encounterId, patientId }) => (
+      <EncounterQuestionnaire
+        facilityId={facilityId}
+        encounterId={encounterId}
+        patientId={patientId}
+      />
+    ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire/:slug":
+    ({ facilityId, encounterId, slug, patientId }) => (
+      <EncounterQuestionnaire
+        facilityId={facilityId}
+        encounterId={encounterId}
+        questionnaireSlug={slug}
+        patientId={patientId}
+      />
+    ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire_response/:id":
+    ({ patientId, id }) => (
+      <QuestionnaireResponseView responseId={id} patientId={patientId} />
+    ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/:tab": ({
     facilityId,
+    patientId,
     encounterId,
     tab,
-    subPage,
   }) => (
     <EncounterShow
       facilityId={facilityId}
+      patientId={patientId}
       encounterId={encounterId}
       tab={tab}
-      subPage={subPage}
     />
   ),
+  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/:tab/:subPage":
+    ({ facilityId, encounterId, patientId, tab, subPage }) => (
+      <EncounterShow
+        facilityId={facilityId}
+        patientId={patientId}
+        encounterId={encounterId}
+        tab={tab}
+        subPage={subPage}
+      />
+    ),
   "/facility/:facilityId/patient/:patientId/consultation": ({
     facilityId,
     patientId,
@@ -63,27 +83,6 @@ const consultationRoutes: AppRoutes = {
       subjectType="patient"
     />
   ),
-  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire":
-    ({ facilityId, encounterId, patientId }) => (
-      <EncounterQuestionnaire
-        facilityId={facilityId}
-        encounterId={encounterId}
-        patientId={patientId}
-      />
-    ),
-  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire/:slug":
-    ({ facilityId, encounterId, slug, patientId }) => (
-      <EncounterQuestionnaire
-        facilityId={facilityId}
-        encounterId={encounterId}
-        questionnaireSlug={slug}
-        patientId={patientId}
-      />
-    ),
-  "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire_response/:id":
-    ({ patientId, id }) => (
-      <QuestionnaireResponseView responseId={id} patientId={patientId} />
-    ),
 };
 
 export default consultationRoutes;
diff --git a/src/components/Encounter/CreateEncounterForm.tsx b/src/components/Encounter/CreateEncounterForm.tsx
@@ -154,7 +154,9 @@ export default function CreateEncounterForm({
       form.reset();
       queryClient.invalidateQueries({ queryKey: ["encounters", patientId] });
       onSuccess?.();
-      navigate(`/facility/${facilityId}/encounter/${data.id}/updates`);
+      navigate(
+        `/facility/${facilityId}/patient/${patientId}/encounter/${data.id}/updates`,
+      );
     },
     onError: (error) => {
       const errorData = error.cause as { errors: { msg: string[] } };

diff --git a/src/components/Facility/EncounterCard.tsx b/src/components/Facility/EncounterCard.tsx
@@ -92,15 +92,15 @@ export const EncounterCard = (props: EncounterCardProps) => {
         </div>
 
         <Link
-          href={`/facility/${encounter.facility.id}/encounter/${encounter.id}/updates`}
+          href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/updates`}
           className={cn(
             buttonVariants({ variant: "secondary" }),
             "mt-2 shadow-none border border-secondary-300",
             !encounter.period.start && "pointer-events-none opacity-50",
           )}
         >
           <CareIcon icon="l-plus-circle" />
-          {t("View Encounter")}
+          {t("view_encounter")}
         </Link>
       </div>
     </>

diff --git a/src/components/Files/FilesTab.tsx b/src/components/Files/FilesTab.tsx
@@ -655,15 +655,15 @@ export const FilesTab = (props: FilesTabProps) => {
           <TabsTrigger value="all" asChild>
             <Link
               className="text-gray-600"
-              href={`/facility/${encounter?.facility.id}/encounter/${encounter?.id}/files/all`}
+              href={`/facility/${encounter?.facility.id}/patient/${patientId}/encounter/${encounter?.id}/files/all`}
             >
               {t("all")}
             </Link>
           </TabsTrigger>
           <TabsTrigger value="discharge_summary" asChild>
             <Link
               className="text-gray-600"
-              href={`/facility/${encounter?.facility.id}/encounter/${encounter?.id}/files/discharge_summary`}
+              href={`/facility/${encounter?.facility.id}/patient/${patientId}/encounter/${encounter?.id}/files/discharge_summary`}
             >
               {t("discharge_summary")}
             </Link>

diff --git a/src/components/Patient/EncounterQuestionnaire.tsx b/src/components/Patient/EncounterQuestionnaire.tsx
@@ -37,7 +37,7 @@ export default function EncounterQuestionnaire({
             onSubmit={() => {
               if (encounterId) {
                 navigate(
-                  `/facility/${facilityId}/encounter/${encounterId}/updates`,
+                  `/facility/${facilityId}/patient/${patientId}/encounter/${encounterId}/updates`,
                 );
               } else {
                 navigate(`/patient/${patientId}/updates`);

diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
@@ -464,7 +464,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                     </DropdownMenuItem>
                     <DropdownMenuItem asChild>
                       <Link
-                        href={`/facility/${encounter.facility.id}/encounter/${encounter.id}/files/discharge_summary`}
+                        href={`/facility/${encounter.facility.id}/patient/${patient.id}/encounter/${encounter.id}/files/discharge_summary`}
                         className="cursor-pointer text-gray-800"
                       >
                         {t("discharge_summary")}

diff --git a/src/hooks/useCareApps.ts → src/hooks/useCareApps.tsx b/src/hooks/useCareApps.ts → src/hooks/useCareApps.tsx
@@ -1,5 +1,6 @@
-import { createContext, useContext } from "react";
+import { Suspense, createContext, useContext } from "react";
 
+import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
 import { PluginManifest } from "@/pluginTypes";
 
 export const CareAppsContext = createContext<PluginManifest[]>([]);
@@ -22,11 +23,29 @@ export const useCareApps = () => {
 //   return navItems;
 // };
 
-export const useCareAppConsultationTabs = () => {
+const withSuspense = (Component: React.ComponentType<EncounterTabProps>) => {
+  // eslint-disable-next-line react/display-name
+  return (props: EncounterTabProps) => {
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
+};
+
+export const useCareAppEncounterTabs = () => {
   const careApps = useCareApps();
 
   return careApps.reduce((acc, app) => {
-    return { ...acc, ...(app.encounterTabs ?? {}) };
+    const appTabs = Object.entries(app.encounterTabs ?? {}).reduce(
+      (acc, [key, Component]) => {
+        return { ...acc, [key]: withSuspense(Component) };
+      },
+      {},
+    );
+
+    return { ...acc, ...appTabs };
   }, {});
 };
 

diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
@@ -721,7 +721,7 @@ export function EncounterList({
                       </div>
                       <Separator className="my-2" />
                       <Link
-                        href={`/facility/${facilityId}/encounter/${encounter.id}/updates`}
+                        href={`/facility/${facilityId}/patient/${encounter.patient.id}/encounter/${encounter.id}/updates`}
                         className="text-sm text-primary hover:underline text-right flex items-center justify-end group-hover:translate-x-1 transition-transform"
                       >
                         View Details

diff --git a/src/pages/Encounters/EncounterShow.tsx b/src/pages/Encounters/EncounterShow.tsx
@@ -8,7 +8,7 @@ import PageTitle from "@/components/Common/PageTitle";
 import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
 import PatientInfoCard from "@/components/Patient/PatientInfoCard";
 
-import { useCareAppConsultationTabs } from "@/hooks/useCareApps";
+import { useCareAppEncounterTabs } from "@/hooks/useCareApps";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
@@ -42,16 +42,17 @@ const defaultTabs = {
 } as Record<string, React.FC<EncounterTabProps>>;
 
 interface Props {
-  encounterId: string;
   facilityId: string;
+  patientId: string;
+  encounterId: string;
   tab?: string;
   subPage?: string;
 }
 
 export const EncounterShow = (props: Props) => {
-  const { facilityId, encounterId, subPage } = props;
+  const { facilityId, encounterId, patientId, subPage } = props;
   const { t } = useTranslation();
-  const pluginTabs = useCareAppConsultationTabs();
+  const pluginTabs = useCareAppEncounterTabs();
 
   const tabs: Record<string, React.FC<EncounterTabProps>> = {
     ...defaultTabs,
@@ -64,6 +65,7 @@ export const EncounterShow = (props: Props) => {
       pathParams: { id: encounterId },
       queryParams: {
         facility: facilityId,
+        patient: patientId,
       },
     }),
     enabled: !!encounterId,
@@ -169,7 +171,7 @@ export const EncounterShow = (props: Props) => {
                   <Link
                     key={tab}
                     className={tabButtonClasses(props.tab === tab)}
-                    href={`/facility/${facilityId}/encounter/${encounterData.id}/${tab}`}
+                    href={`/facility/${facilityId}/patient/${patientId}/encounter/${encounterData.id}/${tab}`}
                   >
                     {t(`ENCOUNTER_TAB__${tab}`)}
                   </Link>