From adac786157297d22618c6edee38d95ab711b45e4 Mon Sep 17 00:00:00 2001 From: Gigin George Date: Wed, 8 Jan 2025 10:44:20 +0530 Subject: [PATCH] Cleanup Navbars --- src/Routers/PatientRouter.tsx | 8 +- src/components/ui/sidebar/app-sidebar.tsx | 137 +++------------------ src/components/ui/sidebar/facility-nav.tsx | 63 ++++++++++ src/components/ui/sidebar/nav-user.tsx | 15 +-- src/components/ui/sidebar/org-nav.tsx | 26 ++++ src/components/ui/sidebar/patient-nav.tsx | 59 +++++++++ 6 files changed, 171 insertions(+), 137 deletions(-) create mode 100644 src/components/ui/sidebar/facility-nav.tsx create mode 100644 src/components/ui/sidebar/org-nav.tsx create mode 100644 src/components/ui/sidebar/patient-nav.tsx diff --git a/src/Routers/PatientRouter.tsx b/src/Routers/PatientRouter.tsx index 2079b213eaa..bf16c8c3e30 100644 --- a/src/Routers/PatientRouter.tsx +++ b/src/Routers/PatientRouter.tsx @@ -2,15 +2,13 @@ import careConfig from "@careConfig"; import { useRoutes } from "raviger"; import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; -import { AppSidebar } from "@/components/ui/sidebar/app-sidebar"; +import { AppSidebar, SidebarFor } from "@/components/ui/sidebar/app-sidebar"; import ErrorBoundary from "@/components/Common/ErrorBoundary"; import ErrorPage from "@/components/ErrorPages/DefaultErrorPage"; import { patientTabs } from "@/components/Patient/PatientDetailsTab"; import { PatientHome } from "@/components/Patient/PatientHome"; -import { usePatientContext } from "@/hooks/usePatientUser"; - import PatientUserProvider from "@/Providers/PatientUserProvider"; import { PatientRegistration } from "@/pages/Appoinments/PatientRegistration"; import PatientSelect from "@/pages/Appoinments/PatientSelect"; @@ -70,8 +68,6 @@ export default function PatientRouter() { const appointmentPages = useRoutes(AppointmentRoutes); - const patientUserContext = usePatientContext(); - if (!pages) { if (appointmentPages) { return {appointmentPages}; @@ -82,7 +78,7 @@ export default function PatientRouter() { return ( - +
{ user?: UserModel; facilitySidebar?: boolean; - patientUserContext?: PatientUserContextType; + sidebarFor?: SidebarFor; } -function generateFacilityLinks( - selectedFacility: UserFacilityModel | null, - t: TFunction, - // TODO: switch to UserBase once getcurrentuser serializer is updated - user?: UserModel, -) { - if (!selectedFacility) return []; - - const baseUrl = `/facility/${selectedFacility.id}`; - const links: NavigationLink[] = [ - { name: t("facility"), url: baseUrl, icon: "d-hospital" }, - { - name: t("appointments"), - url: `${baseUrl}/appointments`, - icon: "d-calendar", - }, - { - name: t("search_patients"), - url: `${baseUrl}/patients`, - icon: "d-patient", - }, - { name: t("encounters"), url: `${baseUrl}/encounters`, icon: "d-patient" }, - // { name: t("assets"), url: `${baseUrl}/assets`, icon: "d-folder" }, - { name: t("resource"), url: "/resource", icon: "d-book-open" }, - { name: t("users"), url: `${baseUrl}/users`, icon: "d-people" }, - { - name: t("organization"), - url: `${baseUrl}/organization`, - icon: "d-book-open", - }, - ]; - - if (user) { - links.push({ - name: t("schedules"), - url: `${baseUrl}/users/${user.username}/availability`, - icon: "d-calendar", - }); - } - - return links; -} - -function generateOrganizationLinks( - organizations: Organization[], -): NavigationLink[] { - return organizations.map((org) => ({ - name: org.name, - url: `/organization/${org.id}`, - })); -} - -function generatePatientLinks( - selectedUser: AppointmentPatient | null, - t: TFunction, -): NavigationLink[] { - if (!selectedUser) return []; - - const { geo_organization } = selectedUser; - let parentOrganization = geo_organization?.parent; - while (parentOrganization?.parent) { - if (parentOrganization.level_cache === 1) { - break; - } - parentOrganization = parentOrganization.parent; - } - - const queryParams = new URLSearchParams(); - - if (parentOrganization) { - queryParams.set("organization", String(parentOrganization?.id)); - } - - return [ - { name: t("appointments"), url: "/patient/home", icon: "d-patient" }, - { - name: t("nearby_facilities"), - url: `/nearby_facilities/?${queryParams.toString()}`, - icon: "d-patient", - }, - ]; +export enum SidebarFor { + FACILITY = "facility", + PATIENT = "patient", } export function AppSidebar({ user, - patientUserContext, - facilitySidebar = true, + sidebarFor = SidebarFor.FACILITY, ...props }: AppSidebarProps) { const exactMatch = usePathParams("/facility/:facilityId"); @@ -139,11 +48,12 @@ export function AppSidebar({ const orgSubpathMatch = usePathParams("/organization/:id/*"); const organizationId = orgMatch?.id || orgSubpathMatch?.id; + const facilitySidebar = sidebarFor === SidebarFor.FACILITY; + const patientSidebar = sidebarFor === SidebarFor.PATIENT; + const [selectedFacility, setSelectedFacility] = React.useState(null); - const { t } = useTranslation(); - const selectedOrganization = React.useMemo(() => { if (!user?.organizations || !organizationId) return undefined; return user.organizations.find((org) => org.id === organizationId); @@ -207,34 +117,17 @@ export function AppSidebar({ {facilitySidebar && !selectedOrganization && ( - + )} {selectedOrganization && ( - - )} - {patientUserContext && ( - <> - - - + )} + {patientSidebar && } {(facilitySidebar || selectedOrganization) && } - {patientUserContext && ( - - )} + {patientSidebar && } diff --git a/src/components/ui/sidebar/facility-nav.tsx b/src/components/ui/sidebar/facility-nav.tsx new file mode 100644 index 00000000000..75c6957919f --- /dev/null +++ b/src/components/ui/sidebar/facility-nav.tsx @@ -0,0 +1,63 @@ +import { TFunction } from "i18next"; +import { useTranslation } from "react-i18next"; + +import { NavMain } from "@/components/ui/sidebar/nav-main"; + +import { UserFacilityModel, UserModel } from "@/components/Users/models"; + +interface NavigationLink { + name: string; + url: string; + icon?: string; +} + +interface FacilityNavProps { + selectedFacility: UserFacilityModel | null; + user?: UserModel; +} + +function generateFacilityLinks( + selectedFacility: UserFacilityModel | null, + t: TFunction, + user?: UserModel, +) { + if (!selectedFacility) return []; + + const baseUrl = `/facility/${selectedFacility.id}`; + const links: NavigationLink[] = [ + { name: t("facility"), url: baseUrl, icon: "d-hospital" }, + { + name: t("appointments"), + url: `${baseUrl}/appointments`, + icon: "d-calendar", + }, + { + name: t("search_patients"), + url: `${baseUrl}/patients`, + icon: "d-patient", + }, + { name: t("encounters"), url: `${baseUrl}/encounters`, icon: "d-patient" }, + { name: t("resource"), url: "/resource", icon: "d-book-open" }, + { name: t("users"), url: `${baseUrl}/users`, icon: "d-people" }, + { + name: t("organization"), + url: `${baseUrl}/organization`, + icon: "d-book-open", + }, + ]; + + if (user) { + links.push({ + name: t("schedules"), + url: `${baseUrl}/users/${user.username}/availability`, + icon: "d-calendar", + }); + } + + return links; +} + +export function FacilityNav({ selectedFacility, user }: FacilityNavProps) { + const { t } = useTranslation(); + return ; +} diff --git a/src/components/ui/sidebar/nav-user.tsx b/src/components/ui/sidebar/nav-user.tsx index 56857862ad4..9a36b79a8ae 100644 --- a/src/components/ui/sidebar/nav-user.tsx +++ b/src/components/ui/sidebar/nav-user.tsx @@ -25,8 +25,7 @@ import { Avatar } from "@/components/Common/Avatar"; import useAuthUser, { useAuthContext } from "@/hooks/useAuthUser"; import { usePatientSignOut } from "@/hooks/usePatientSignOut"; - -import { AppointmentPatient } from "@/pages/Patient/Utils"; +import { usePatientContext } from "@/hooks/usePatientUser"; export function FacilityNavUser() { const { t } = useTranslation(); @@ -117,16 +116,14 @@ export function FacilityNavUser() { ); } -export function PatientNavUser({ - patient, - phoneNumber, -}: { - patient: AppointmentPatient | null; - phoneNumber: string; -}) { +export function PatientNavUser() { const { t } = useTranslation(); const { isMobile, open } = useSidebar(); const signOut = usePatientSignOut(); + const patientUserContext = usePatientContext(); + + const patient = patientUserContext?.selectedPatient; + const phoneNumber = patientUserContext?.tokenData.phoneNumber; return ( diff --git a/src/components/ui/sidebar/org-nav.tsx b/src/components/ui/sidebar/org-nav.tsx new file mode 100644 index 00000000000..cb4e3990554 --- /dev/null +++ b/src/components/ui/sidebar/org-nav.tsx @@ -0,0 +1,26 @@ +import { NavMain } from "@/components/ui/sidebar/nav-main"; + +import { Organization } from "@/types/organization/organization"; + +interface NavigationLink { + name: string; + url: string; + icon?: string; +} + +interface OrgNavProps { + organizations: Organization[]; +} + +function generateOrganizationLinks( + organizations: Organization[], +): NavigationLink[] { + return organizations.map((org) => ({ + name: org.name, + url: `/organization/${org.id}`, + })); +} + +export function OrgNav({ organizations }: OrgNavProps) { + return ; +} diff --git a/src/components/ui/sidebar/patient-nav.tsx b/src/components/ui/sidebar/patient-nav.tsx new file mode 100644 index 00000000000..b52cb5b4481 --- /dev/null +++ b/src/components/ui/sidebar/patient-nav.tsx @@ -0,0 +1,59 @@ +import { TFunction } from "i18next"; +import { useTranslation } from "react-i18next"; + +import { NavMain } from "@/components/ui/sidebar/nav-main"; +import { PatientSwitcher } from "@/components/ui/sidebar/patient-switcher"; + +import { usePatientContext } from "@/hooks/usePatientUser"; + +import { AppointmentPatient } from "@/pages/Patient/Utils"; + +interface NavigationLink { + name: string; + url: string; + icon?: string; +} + +function generatePatientLinks( + selectedUser: AppointmentPatient | null, + t: TFunction, +): NavigationLink[] { + if (!selectedUser) return []; + + const { geo_organization } = selectedUser; + let parentOrganization = geo_organization?.parent; + while (parentOrganization?.parent) { + if (parentOrganization.level_cache === 1) { + break; + } + parentOrganization = parentOrganization.parent; + } + + const queryParams = new URLSearchParams(); + + if (parentOrganization) { + queryParams.set("organization", String(parentOrganization?.id)); + } + + return [ + { name: t("appointments"), url: "/patient/home", icon: "d-patient" }, + { + name: t("nearby_facilities"), + url: `/nearby_facilities/?${queryParams.toString()}`, + icon: "d-patient", + }, + ]; +} + +export function PatientNav() { + const { t } = useTranslation(); + const patientUserContext = usePatientContext(); + const selectedPatient = patientUserContext?.selectedPatient; + + return ( + <> + + + + ); +}