Refactor MenuLayout context

beda-software · Nov 25, 2024 · 7a3bb36 · 7a3bb36
1 parent 0706b05
commit 7a3bb36
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 39 deletions.
diff --git a/src/components/BaseLayout/Sidebar/SidebarTop/context.tsx b/src/components/BaseLayout/Sidebar/SidebarTop/context.tsx
@@ -1,4 +1,7 @@
-import { Role } from 'src/utils/role';
+import { t } from '@lingui/macro';
+import { Patient } from 'fhir/r4b';
+import { createContext } from 'react';
+
 import { EncountersIcon } from 'src/icons/menu/EncountersIcon';
 import { InvoicesIcon } from 'src/icons/menu/InvoicesIcon';
 import { MedicationsIcon } from 'src/icons/menu/MedicationsIcon';
@@ -7,40 +10,41 @@ import { PractitionersIcon } from 'src/icons/menu/PractitionersIcon';
 import { PrescriptionsIcon } from 'src/icons/menu/PrescriptionsIcon';
 import { QuestionnairesIcon } from 'src/icons/menu/QuestionnairesIcon';
 import { ServicesIcon } from 'src/icons/menu/ServicesIcon';
-import { t } from '@lingui/macro';
-import { createContext } from 'react';
+import { Role, matchCurrentUserRole } from 'src/utils/role';
 
 interface Layout {
-    label: string,
-    path: string,
-    icon: React.ReactElement,
+    label: string;
+    path: string;
+    icon: React.ReactElement;
 }
 
-export type MenuLayoutValue = Record<Role, () => Array<Layout>>;
+export type MenuLayoutValue = () => Array<Layout>;
 
-const defaultMenuLayout:MenuLayoutValue = {
-    [Role.Admin]: () => [
-        { label: t`Invoices`, path: '/invoices', icon: <InvoicesIcon /> },
-        { label: t`Services`, path: '/healthcare-services', icon: <ServicesIcon /> },
-        { label: t`Encounters`, path: '/encounters', icon: <EncountersIcon /> },
-        { label: t`Patients`, path: '/patients', icon: <PatientsIcon /> },
-        { label: t`Practitioners`, path: '/practitioners', icon: <PractitionersIcon /> },
-        { label: t`Questionnaires`, path: '/questionnaires', icon: <QuestionnairesIcon /> },
-    ],
-    [Role.Practitioner]: () => [
-        { label: t`Encounters`, path: '/encounters', icon: <EncountersIcon /> },
-        { label: t`Patients`, path: '/patients', icon: <PatientsIcon /> },
-        { label: t`Questionnaires`, path: '/questionnaires', icon: <QuestionnairesIcon /> },
-    ],
-    [Role.Patient]: () => [{
-        label: t`Invoices`, path: '/invoices', icon: <InvoicesIcon />
-    }],
-    [Role.Receptionist]: () => [
-        { label: t`Scheduling`, path: '/scheduling', icon: <EncountersIcon /> },
-        { label: t`Invoices`, path: '/invoices', icon: <InvoicesIcon /> },
-        { label: t`Medications`, path: '/medications', icon: <MedicationsIcon /> },
-        { label: t`Prescriptions`, path: '/prescriptions', icon: <PrescriptionsIcon /> },
-    ],
-};
+const defaultMenuLayout: MenuLayoutValue = () =>
+    matchCurrentUserRole({
+        [Role.Admin]: () => [
+            { label: t`Invoices`, path: '/invoices', icon: <InvoicesIcon /> },
+            { label: t`Services`, path: '/healthcare-services', icon: <ServicesIcon /> },
+            { label: t`Encounters`, path: '/encounters', icon: <EncountersIcon /> },
+            { label: t`Patients`, path: '/patients', icon: <PatientsIcon /> },
+            { label: t`Practitioners`, path: '/practitioners', icon: <PractitionersIcon /> },
+            { label: t`Questionnaires`, path: '/questionnaires', icon: <QuestionnairesIcon /> },
+        ],
+        [Role.Practitioner]: () => [
+            { label: t`Encounters`, path: '/encounters', icon: <EncountersIcon /> },
+            { label: t`Patients`, path: '/patients', icon: <PatientsIcon /> },
+            { label: t`Questionnaires`, path: '/questionnaires', icon: <QuestionnairesIcon /> },
+        ],
+        [Role.Patient]: (patient: Patient) => [
+            { label: t`Patient`, path: `/patients/${patient!.id}`, icon: <PatientsIcon /> },
+            { label: t`Invoices`, path: '/invoices', icon: <InvoicesIcon /> },
+        ],
+        [Role.Receptionist]: () => [
+            { label: t`Scheduling`, path: '/scheduling', icon: <EncountersIcon /> },
+            { label: t`Invoices`, path: '/invoices', icon: <InvoicesIcon /> },
+            { label: t`Medications`, path: '/medications', icon: <MedicationsIcon /> },
+            { label: t`Prescriptions`, path: '/prescriptions', icon: <PrescriptionsIcon /> },
+        ],
+    });
 
 export const MenuLayout = createContext<MenuLayoutValue>(defaultMenuLayout);
diff --git a/src/components/BaseLayout/Sidebar/SidebarTop/index.tsx b/src/components/BaseLayout/Sidebar/SidebarTop/index.tsx
@@ -1,16 +1,15 @@
 import { Menu } from 'antd';
 import classNames from 'classnames';
+import { useContext } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 import { CompanyName } from 'src/icons/brand/CompanyName';
 import { LogoSmall } from 'src/icons/brand/LogoSmall';
 import { getToken } from 'src/services/auth';
-import {  matchCurrentUserRole } from 'src/utils/role';
 
+import { MenuLayout } from './context';
 import s from './SidebarTop.module.scss';
 import { S } from './SidebarTop.styles';
-import { useContext } from 'react';
-import { MenuLayout } from './context';
 
 export interface RouteItem {
     path: string;
@@ -34,9 +33,7 @@ export function SidebarTop(props: Props) {
     const navigate = useNavigate();
     const layout = useContext(MenuLayout);
 
-    const menuItems: RouteItem[] = !isAnonymousUser
-        ? matchCurrentUserRole(layout)
-        : [];
+    const menuItems: RouteItem[] = !isAnonymousUser ? layout() : [];
 
     const activeMenu = `/${location.pathname.split('/')[1]}`;
     const onMenuItemClick = (path: string) => {

diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx
@@ -24,7 +24,6 @@ import { QuestionnaireList } from 'src/containers/QuestionnaireList';
 import { SignIn } from 'src/containers/SignIn';
 import { VideoCall } from 'src/containers/VideoCall';
 import { getToken, parseOAuthState, setToken } from 'src/services/auth';
-import { selectUserRole } from 'src/utils/role';
 
 import { restoreUserSession } from './utils';
 import { AidboxFormsBuilder } from '../AidboxFormsBuilder';
@@ -52,7 +51,7 @@ export function App({ authenticatedRoutes, anonymousRoutes }: AppProps) {
 
     const renderRoutes = (user: User | null) => {
         if (user) {
-            const layout = selectUserRole(user, menuLayout);
+            const layout = menuLayout();
             const defaultRoute = layout[0]?.path ?? '/encounters';
             return <AuthenticatedUserApp defaultRoute={defaultRoute} extra={authenticatedRoutes} />;
         }