From a813fe04beb3077e1fa49a4c802a9279c8c6c21d Mon Sep 17 00:00:00 2001
From: LuukvH <luuk@drieam.com>
Date: Sat, 20 Jul 2024 22:20:14 +0200
Subject: [PATCH] feat: Improve crumbs translations

Move the translation of the crumbs inside the router.
This will make sure translations can be correctly extracted
from the source.
---
 src/web/src/App.tsx                          | 123 +++++++++++--------
 src/web/src/components/RouterBreadcrumbs.tsx |   4 +-
 2 files changed, 72 insertions(+), 55 deletions(-)

diff --git a/src/web/src/App.tsx b/src/web/src/App.tsx
index 0dcffa0b..8ef6b3e0 100644
--- a/src/web/src/App.tsx
+++ b/src/web/src/App.tsx
@@ -1,70 +1,87 @@
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import ErrorPage from "./components/ErrorPage";
 import MainLayout from "./components/AuthProviderLayout";
+import { type TFunction } from "i18next";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <MainLayout />,
-    errorElement: <ErrorPage />,
-    handle: {
-      crumb: () => "Home",
-    },
-    children: [
-      {
-        path: "children/:childId",
-        lazy: () => import("./pages/children/UpdateChildPage"),
-      },
-      {
-        path: "children",
-        lazy: () => import("./pages/children/IndexChildPage"),
-        handle: {
-          crumb: () => "Children",
+const router = (t: TFunction<"translation", undefined>) =>
+  createBrowserRouter([
+    {
+      path: "/",
+      element: <MainLayout />,
+      errorElement: <ErrorPage />,
+      handle: {
+        crumb: () => {
+          return t("Home");
         },
       },
-      {
-        path: "people",
-        lazy: () => import("./pages/people/IndexPersonPage"),
-        handle: {
-          crumb: () => "People",
+      children: [
+        {
+          path: "children/:childId",
+          lazy: () => import("./pages/children/UpdateChildPage"),
         },
-      },
-      {
-        path: "children/new",
-        lazy: () => import("./pages/children/NewChildPage"),
-      },
-      {
-        path: "groups",
-        lazy: () => import("./pages/groups/ListGroupsPage"),
-        handle: {
-          crumb: () => "Groups",
+        {
+          path: "children",
+          lazy: () => import("./pages/children/IndexChildPage"),
+          handle: {
+            crumb: () => {
+              return t("Children");
+            },
+          },
         },
-      },
-      {
-        path: "settings",
-        handle: {
-          crumb: () => "Settings",
+        {
+          path: "people",
+          lazy: () => import("./pages/people/IndexPersonPage"),
+          handle: {
+            crumb: () => {
+              return t("People");
+            },
+          },
         },
-        children: [
-          {
-            index: true,
-            lazy: () => import("./pages/settings/SettingsPage"),
+        {
+          path: "children/new",
+          lazy: () => import("./pages/children/NewChildPage"),
+        },
+        {
+          path: "groups",
+          lazy: () => import("./pages/groups/ListGroupsPage"),
+          handle: {
+            crumb: () => {
+              return t("Groups");
+            },
           },
-          {
-            path: "scheduling",
-            lazy: () => import("./pages/settings/SchedulingSettingsPage"),
-            handle: {
-              crumb: () => "Scheduling",
+        },
+        {
+          path: "settings",
+          handle: {
+            crumb: () => {
+              return t("Settings");
             },
           },
-        ],
-      },
-    ],
-  },
-]);
+          children: [
+            {
+              index: true,
+              lazy: () => import("./pages/settings/SettingsPage"),
+            },
+            {
+              path: "scheduling",
+              lazy: () => import("./pages/settings/SchedulingSettingsPage"),
+              handle: {
+                crumb: () => {
+                  return t("Scheduling");
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ]);
 
 function App() {
-  return <RouterProvider router={router} />;
+  const { t } = useTranslation();
+
+  return <RouterProvider router={router(t)} />;
 }
 
 export default App;
diff --git a/src/web/src/components/RouterBreadcrumbs.tsx b/src/web/src/components/RouterBreadcrumbs.tsx
index 06522a5e..ef1447e3 100644
--- a/src/web/src/components/RouterBreadcrumbs.tsx
+++ b/src/web/src/components/RouterBreadcrumbs.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { Typography } from "@mui/material";
 
 type Handle = {
-  crumb: (data: any) => string;
+  crumb: (data: any) => React.ReactElement;
 };
 
 const RouterBreadcrumbs: React.FC = () => {
@@ -38,7 +38,7 @@ const RouterBreadcrumbs: React.FC = () => {
             color="inherit"
             to={crumb.pathname}
           >
-            {t(crumb.crumbElement)}
+            {crumb.crumbElement}
           </Link>
         ),
       )}