♻️ - refactor: semi automatic breadcrumbs

maykinmedia · Jun 18, 2024 · 0a988c9 · 0a988c9
1 parent 665b69a
commit 0a988c9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 10 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,16 +1,36 @@
-import { Logo, NavigationContext, Outline } from "@maykin-ui/admin-ui";
+import {
+  BreadcrumbItem,
+  Logo,
+  NavigationContext,
+  Outline,
+  formatMessage,
+} from "@maykin-ui/admin-ui";
 import React from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useMatches, useNavigate } from "react-router-dom";
 
 import "./App.css";
 
 function App() {
   const navigate = useNavigate();
+  const matches = useMatches();
+  const match = matches[matches.length - 1];
+  const handle = match?.handle as Record<string, unknown>;
+
+  const breadcrumbItems = (handle?.breadcrumbItems || []) as BreadcrumbItem[];
+  const lastBreadcrumbItem = breadcrumbItems[breadcrumbItems.length - 1];
+
+  if (lastBreadcrumbItem) {
+    lastBreadcrumbItem.label = formatMessage(
+      lastBreadcrumbItem.label,
+      match?.params as Record<string, string>,
+    );
+  }
 
   return (
     <div className="App">
       <NavigationContext.Provider
         value={{
+          breadcrumbItems,
           primaryNavigationItems: [
             <Logo
               key="logo"
@@ -20,7 +40,7 @@ function App() {
             {
               children: <Outline.HomeIcon />,
               title: "Home",
-              onClick: () => navigate("/"),
+              onClick: () => navigate("/destruction-lists/"),
             },
             {
               children: <Outline.PlusCircleIcon />,

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -1,7 +1,12 @@
+import { BreadcrumbItem } from "@maykin-ui/admin-ui";
 import "@maykin-ui/admin-ui/style";
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import {
+  Navigate,
+  RouterProvider,
+  createBrowserRouter,
+} from "react-router-dom";
 
 import App from "./App";
 import "./index.css";
@@ -29,20 +34,56 @@ const router = createBrowserRouter([
     children: [
       {
         path: "/",
+        element: <Navigate to="/destruction-lists"></Navigate>,
+      },
+      {
+        path: "/destruction-lists",
         loader: landingLoader,
         element: <Landing />,
+        handle: {
+          breadcrumbItems: [
+            {
+              label: "Vernietigingslijsten",
+              href: "/destruction-lists",
+            },
+          ] as BreadcrumbItem[],
+        },
       },
       {
         path: "/destruction-lists/create",
         element: <DestructionListCreatePage />,
         action: destructionListCreateAction,
         loader: destructionListCreateLoader,
+        handle: {
+          breadcrumbItems: [
+            {
+              label: "Vernietigingslijsten",
+              href: "/destruction-lists",
+            },
+            {
+              label: "Aanmaken",
+              href: "/destruction-lists/create",
+            },
+          ] as BreadcrumbItem[],
+        },
       },
       {
         path: "/destruction-lists/:uuid",
         element: <DestructionListDetailPage />,
         action: destructionListUpdateAction,
         loader: destructionListDetailLoader,
+        handle: {
+          breadcrumbItems: [
+            {
+              label: "Vernietigingslijsten",
+              href: "/destruction-lists",
+            },
+            {
+              label: "{uuid}",
+              href: "/destruction-lists/create",
+            },
+          ] as BreadcrumbItem[],
+        },
       },
       {
         path: "/destruction-lists/:uuid/review",

diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx b/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx
@@ -78,12 +78,7 @@ export function DestructionListDetailPage() {
 
   return (
     <div className="destruction-list-detail">
-      <CardBaseTemplate
-        breadcrumbItems={[
-          { label: "Vernietigingslijsten", href: "destruction-lists/" },
-          { label: destructionList.name, href: "#" },
-        ]}
-      >
+      <CardBaseTemplate>
         <Body>
           <H1>{destructionList.name}</H1>
           <P>