Merge pull request #46 from djnunez-aot/breadcrumb-and-side-nav-touchups

Breadcrumb and side nav touchups

submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Breadcrumbs, Typography } from "@mui/material";
+import { Box, Breadcrumbs } from "@mui/material";
 import { Link, useRouterState } from "@tanstack/react-router";
 import { theme } from "@/styles/theme";
 
@@ -32,11 +32,9 @@ const BreadcrumbNav: React.FC = () => {
   });
 
   const uniqueBreadcrumbs = filterUniqueRoutes(breadcrumbs as RouteSegment[]);
-  const isRoot = uniqueBreadcrumbs.length === 1;
-
   return (
     <>
-      {!isRoot && (
+      {
         <Box
           sx={{
             p: 1,
@@ -46,14 +44,9 @@ const BreadcrumbNav: React.FC = () => {
         >
           <Breadcrumbs aria-label="breadcrumb">
             {uniqueBreadcrumbs.map(
-              (segment: { title: string; path?: string }, index: number) => {
+              (segment: { title: string; path?: string }) => {
                 const { title, path } = segment;
-                const isLast = index === uniqueBreadcrumbs.length - 1;
-                return isLast ? (
-                  <Typography key={path} color="text.primary">
-                    {title}
-                  </Typography>
-                ) : (
+                return (
                   <Link
                     key={path}
                     style={{
@@ -69,7 +62,7 @@ const BreadcrumbNav: React.FC = () => {
             )}
           </Breadcrumbs>
         </Box>
-      )}
+      }
     </>
   );
 };

submit-web/src/components/Shared/layout/SideNav/SideNavBar.tsx

@@ -8,20 +8,24 @@ import {
 } from "@mui/material";
 import { Link } from "@tanstack/react-router";
 import { theme } from "@/styles/theme";
-import { useAuth } from "react-oidc-context";
-import { AuthenticatedRoutes, Routes } from "./SideNavElements";
+import {
+  AuthenticatedRoutes,
+  createProjectRoutes,
+} from "./SideNavElements";
 import { alpha } from "@mui/system";
 import { useDrawer } from "../../Drawers/DrawerStore";
+import { useGetProjects } from "@/hooks/api/useProjects";
+import { useAccount } from "@/store/accountStore";
 
 export default function SideNavBar() {
-  const { isAuthenticated } = useAuth();
   const [currentPath, setCurrentPath] = useState(window.location.pathname);
   const { isOpen, setClose } = useDrawer();
-  let routeMenuItems = Routes;
-
-  if (isAuthenticated) {
-    routeMenuItems = routeMenuItems.concat(AuthenticatedRoutes);
-  }
+  const { accountId } = useAccount();
+  const { data: projects } = useGetProjects({
+    accountId,
+  });
+  const projectRoutes = createProjectRoutes(projects);
+  const routeMenuItems = projectRoutes.concat(AuthenticatedRoutes);
 
   const handleRouteChange = (path: string) => {
     setCurrentPath(path);

submit-web/src/components/Shared/layout/SideNav/SideNavElements.tsx

@@ -1,21 +1,22 @@
-export const Routes: RouteType[] = [
-  {
-    name: "All Projects",
-    path: "/projects",
-  },
-  {
-    name: "Plans",
-    path: "/eao-plans",
-  },
-  {
-    name: "Users",
-    path: "/users",
-  },
-];
+import { Project } from "@/models/Project";
+
+export const createProjectRoutes = (projects: Project[]): RouteType[] => {
+  const projectRoutes = projects?.map((project) => ({
+    name: project.name,
+    path: `/projects/${project.id}`,
+  }));
+  return [
+    {
+      name: "All Projects",
+      path: "/projects",
+      routes: projectRoutes,
+    },
+  ];
+};
 
 export const AuthenticatedRoutes: RouteType[] = [
   {
-    name: "Profile",
+    name: "Admin",
     path: "/profile",
   },
 ];

submit-web/src/routes/__root.tsx

@@ -15,7 +15,6 @@ type RouterContext = {
 export const Route = createRootRouteWithContext<RouterContext>()({
   component: Layout,
   notFoundComponent: PageNotFound,
-  meta: () => [{ title: "Home" }],
 });
 
 function Layout() {

submit-web/src/routes/_authenticated/_dashboard.tsx

@@ -6,7 +6,6 @@ import { Outlet, createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_authenticated/_dashboard")({
   component: DashboardLayout,
-  meta: () => [{ title: "Dashboard" }],
 });
 
 function DashboardLayout() {

submit-web/src/routes/_authenticated/_dashboard/profile.tsx

@@ -11,7 +11,7 @@ import { useAuth } from "react-oidc-context";
 
 export const Route = createFileRoute("/_authenticated/_dashboard/profile")({
   component: Profile,
-  meta: () => [{ title: "Profile" }],
+  meta: () => [{ title: "Admin" }],
 });
 
 function Profile() {

submit-web/src/routes/_authenticated/_dashboard/projects/index.tsx

@@ -10,7 +10,7 @@ import { notify } from "@/components/Shared/Snackbar/snackbarStore";
 
 export const Route = createFileRoute("/_authenticated/_dashboard/projects/")({
   component: ProjectsPage,
-  meta: () => [{ title: "Projects" }],
+  meta: () => [{ title: "All Projects" }],
 });
 
 function ProjectsPage() {

submit-web/src/routes/index.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
   component: Index,
-  meta: () => [{ title: "Home" }],
 });
 
 function Index() {
@@ -29,7 +28,7 @@ function Index() {
         <Button
           variant="outlined"
           color="primary"
-          onClick={() => navigate({ to: "/eao-plans" })}
+          onClick={() => navigate({ to: "/projects" })}
         >
           See Plans
         </Button>