Get labels in breadcrumb from meta-data labels, not path components

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -60,9 +60,19 @@ export const routeToLabel = (route: string): string =>
 function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
 {
    const routes: string[] | any = route.slice(0, -1);
-   const {pageHeader, setPageHeader} = useContext(QContext);
+   const {pageHeader, pathToLabelMap, branding} = useContext(QContext);
 
-   let pageTitle = "ColdTrack Live";
+   const fullPathToLabel = (fullPath: string, route: string): string =>
+   {
+      if(pathToLabelMap && pathToLabelMap[fullPath])
+      {
+         return pathToLabelMap[fullPath];
+      }
+
+      return (routeToLabel(route));
+   }
+
+   let pageTitle = branding?.appName ?? "";
    const fullRoutes: string[] = [];
    let accumulatedPath = "";
    for (let i = 0; i < routes.length; i++)
@@ -74,7 +84,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
 
       accumulatedPath = `${accumulatedPath}/${routes[i]}`;
       fullRoutes.push(accumulatedPath);
-      pageTitle = `${routeToLabel(routes[i])} | ${pageTitle}`;
+      pageTitle = `${fullPathToLabel(accumulatedPath, routes[i])} | ${pageTitle}`;
    }
 
    document.title = `${ucFirst(title)} | ${pageTitle}`;
@@ -110,7 +120,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
                      opacity={light ? 0.8 : 0.5}
                      sx={{lineHeight: 0}}
                   >
-                     {routeToLabel(fullRoute.replace(/.*\//, ""))}
+                     {fullPathToLabel(fullRoute, fullRoute.replace(/.*\//, ""))}
                   </MDTypography>
                </Link>
             ))}

src/qqq/components/horseshoe/NavBar.tsx

@@ -30,8 +30,9 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
+import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
 import {navbar, navbarContainer, navbarIconButton, navbarRow,} from "qqq/components/horseshoe/Styles";
 import {setTransparentNavbar, useMaterialUIController,} from "qqq/context";
@@ -60,6 +61,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const [openMenu, setOpenMenu] = useState<any>(false);
    const [history, setHistory] = useState<any>([] as HistoryEntry[]);
    const [autocompleteValue, setAutocompleteValue] = useState<any>(null);
+   const fullPath = useLocation().pathname;
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
@@ -206,7 +208,18 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       },
    });
 
-   const breadcrumbTitle = routeToLabel(route[route.length - 1]);
+   const {pathToLabelMap} = useContext(QContext);
+   const fullPathToLabel = (fullPath: string, route: string): string =>
+   {
+      if(pathToLabelMap && pathToLabelMap[fullPath])
+      {
+         return pathToLabelMap[fullPath];
+      }
+
+      return (routeToLabel(route));
+   }
+
+   const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
 
    return (
       <AppBar