set up tanstack for routes and meta property for segments

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

@@ -1,20 +1,37 @@
 import React from "react";
-import { Box, Breadcrumbs, Link, Typography } from "@mui/material";
-import { useRouter } from "@tanstack/react-router";
+import { Box, Breadcrumbs, Typography } from "@mui/material";
+import { Link, useRouter } from "@tanstack/react-router";
+import { theme } from "@/styles/theme";
 
-// Helper function to format segment names
-const formatSegmentName = (segment: string) => {
-  return segment
-    .split("-")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
+interface RouteSegment {
+  title: string;
+  path: string;
+}
+
+const filterUniqueRoutes = (breadcrumbs: RouteSegment[]) => {
+  const seenPaths = new Set();
+  return breadcrumbs.filter((segment) => {
+    const isUnique = !seenPaths.has(segment.path);
+    if (isUnique) {
+      seenPaths.add(segment.path);
+    }
+    return isUnique;
+  });
 };
 
 const BreadcrumbNav: React.FC = () => {
   const router = useRouter();
-  const { pathname } = router.state.location;
-  const pathSegments = pathname.split("/").filter((segment) => segment !== "");
-  const isRoot = pathSegments.length === 0;
+  const breadcrumbs = router.state.matches.map((match) => {
+    const { meta, pathname } = match;
+    if (meta)
+      return {
+        title: meta[0].title,
+        path: pathname,
+      };
+  });
+
+  const uniqueBreadcrumbs = filterUniqueRoutes(breadcrumbs as RouteSegment[]);
+  const isRoot = uniqueBreadcrumbs.length === 1;
 
   return (
     <>
@@ -27,20 +44,25 @@ const BreadcrumbNav: React.FC = () => {
           }}
         >
           <Breadcrumbs aria-label="breadcrumb">
-            {pathSegments.map((segment, index) => {
-              const url = `/${pathSegments.slice(0, index + 1).join("/")}`;
-              const isLast = index === pathSegments.length - 1;
-              const path = formatSegmentName(segment);
-              return isLast ? (
-                <Typography key={path} color="text.primary">
-                  {path}
-                </Typography>
-              ) : (
-                <Link key={path} color="primary" href={url}>
-                  {path}
-                </Link>
-              );
-            })}
+            {uniqueBreadcrumbs.map(
+              (segment: { title: string; path: string }, index: number) => {
+                const { title, path } = segment;
+                const isLast = index === uniqueBreadcrumbs.length - 1;
+                return isLast ? (
+                  <Typography key={path} color="text.primary">
+                    {title}
+                  </Typography>
+                ) : (
+                  <Link
+                    key={path}
+                    style={{ color: theme.palette.primary.dark }}
+                    to={path}
+                  >
+                    {title}
+                  </Link>
+                );
+              }
+            )}
           </Breadcrumbs>
         </Box>
       )}

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

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

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

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

submit-web/src/routes/_authenticated/users/index.tsx

@@ -25,6 +25,7 @@ import ConfirmationModal from "@/components/Shared/Modals/ConfirmationModal";
 
 export const Route = createFileRoute("/_authenticated/users/")({
   component: UsersPage,
+  meta: () => [{ title: "Users" }],
 });
 
 function UsersPage() {
@@ -78,7 +79,7 @@ function UsersPage() {
         title="Delete User"
         description="Are you sure you want to delete this user?"
         onConfirm={handleDeleteUser}
-      />,
+      />
     );
   };
 

submit-web/src/routes/aboutpage.lazy.tsx

@@ -3,6 +3,7 @@ import { AppConfig } from "@/utils/config";
 
 export const Route = createLazyFileRoute("/aboutpage")({
   component: About,
+  meta: () => [{ title: "About" }],
 });
 
 function About() {

submit-web/src/routes/eao-plans/$planId.tsx

@@ -1,23 +1,24 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 import { usePlanById } from "@/hooks/usePlans";
 import { Plan } from "@/models/Plan";
 import { Box, Button, Chip } from "@mui/material";
 import { Link, useParams } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/eao-plans/$planId')({
+export const Route = createFileRoute("/eao-plans/$planId")({
   component: PlanPage,
+  meta: () => [{ title: "Plan" }],
   notFoundComponent: () => {
-    return <p>Plan not found!</p>
-  }
-})
+    return <p>Plan not found!</p>;
+  },
+});
 
 function PlanPage() {
   const { planId: planIdParam } = useParams({ strict: false });
   const planId = Number(planIdParam);
   const { status, data, isError, error, isFetching, isLoading } =
     usePlanById(planId);
 
-  const plan: Plan = (data as Plan);
+  const plan: Plan = data as Plan;
 
   if (isLoading) {
     return <h2>Loading...</h2>;

submit-web/src/routes/eao-plans/index.tsx

@@ -16,6 +16,7 @@ import { OpenInNew } from "@mui/icons-material";
 
 export const Route = createFileRoute("/eao-plans/")({
   component: PlanListPage,
+  meta: () => [{ title: "Plans" }],
 });
 
 function PlanListPage() {

submit-web/src/routes/error.tsx

@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/error")({
   component: Error,
+  meta: () => [{ title: "Error" }],
 });
 
 function Error() {

submit-web/src/routes/index.tsx

@@ -4,14 +4,21 @@ import { useNavigate } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/")({
   component: Index,
+  meta: () => [{ title: "Home" }],
 });
 
 function Index() {
   const navigate = useNavigate();
-  
+
   return (
     <>
-      <Paper elevation={2} sx={{ padding: "1.5rem 2.5rem", backgroundColor: 'primary.accent.light' }}>
+      <Paper
+        elevation={2}
+        sx={{
+          padding: "1.5rem 2.5rem",
+          backgroundColor: "primary.accent.light",
+        }}
+      >
         <h2>Environmental Assessments</h2>
         <p>
           British Columbia's environmental assessment process provides
@@ -22,12 +29,11 @@ function Index() {
         <Button
           variant="outlined"
           color="primary"
-          onClick={() => navigate({to: "/registration/create-account"})}
+          onClick={() => navigate({ to: "/registration/create-account" })}
         >
           See Plans
         </Button>
       </Paper>
     </>
   );
 }
-

submit-web/src/routes/newpage.lazy.tsx

@@ -2,13 +2,17 @@ import { createLazyFileRoute } from "@tanstack/react-router";
 
 export const Route = createLazyFileRoute("/newpage")({
   component: NewPage,
+  meta: () => [{ title: "New Page" }],
 });
 
 function NewPage() {
   return (
     <>
       <h3>Hello! This is a lazy loaded page</h3>
-      <p>This page wont be loaded initially, go back to <b>Root</b>, refresh the tab, and check the network tab</p>
+      <p>
+        This page wont be loaded initially, go back to <b>Root</b>, refresh the
+        tab, and check the network tab
+      </p>
     </>
   );
 }