Browse Source

fix(dashboard): Fix wrong breadcrumbs sometimes being rendered

Use of the "basePath" in the breadcrumb logic was causing issues
in certain cases and it seems to not be needed at all.
Michael Bromley 3 months ago
parent
commit
927c5ff6e2

+ 4 - 12
packages/dashboard/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -7,9 +7,8 @@ import {
 } from '@/vdb/components/ui/breadcrumb.js';
 } from '@/vdb/components/ui/breadcrumb.js';
 import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
-import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useLingui } from '@lingui/react';
 import { useLingui } from '@lingui/react';
-import { Link, useRouter, useRouterState } from '@tanstack/react-router';
+import { Link, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';
 import * as React from 'react';
 import { Fragment } from 'react';
 import { Fragment } from 'react';
 
 
@@ -25,11 +24,8 @@ export type PageBreadcrumb = BreadcrumbPair | BreadcrumbShorthand;
 export function GeneratedBreadcrumbs() {
 export function GeneratedBreadcrumbs() {
     const matches = useRouterState({ select: s => s.matches });
     const matches = useRouterState({ select: s => s.matches });
     const currentPath = useRouterState({ select: s => s.location.pathname });
     const currentPath = useRouterState({ select: s => s.location.pathname });
-    const router = useRouter();
     const { i18n } = useLingui();
     const { i18n } = useLingui();
     const navMenuConfig = getNavMenuConfig();
     const navMenuConfig = getNavMenuConfig();
-    const { bcp47Tag } = useDisplayLocale();
-    const basePath = router.basepath || '';
 
 
     const normalizeBreadcrumb = (breadcrumb: any, pathname: string): BreadcrumbPair[] => {
     const normalizeBreadcrumb = (breadcrumb: any, pathname: string): BreadcrumbPair[] => {
         if (typeof breadcrumb === 'string') {
         if (typeof breadcrumb === 'string') {
@@ -58,12 +54,11 @@ export function GeneratedBreadcrumbs() {
             .flatMap(({ pathname, loaderData }) => normalizeBreadcrumb(loaderData.breadcrumb, pathname));
             .flatMap(({ pathname, loaderData }) => normalizeBreadcrumb(loaderData.breadcrumb, pathname));
     }, [matches]);
     }, [matches]);
 
 
-    const isBaseRoute = (p: string) => p === basePath || p === `${basePath}/`;
+    const isBaseRoute = (p: string) => p === '' || p === `/`;
     const pageCrumbs: BreadcrumbPair[] = rawCrumbs.filter(c => !isBaseRoute(c.path));
     const pageCrumbs: BreadcrumbPair[] = rawCrumbs.filter(c => !isBaseRoute(c.path));
 
 
     const normalizePath = (path: string): string => {
     const normalizePath = (path: string): string => {
-        const normalizedPath = basePath && path.startsWith(basePath) ? path.slice(basePath.length) : path;
-        return normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`;
+        return path.startsWith('/') ? path : `/${path}`;
     };
     };
 
 
     const pathMatches = (cleanPath: string, rawUrl?: string): boolean => {
     const pathMatches = (cleanPath: string, rawUrl?: string): boolean => {
@@ -115,10 +110,7 @@ export function GeneratedBreadcrumbs() {
         return undefined;
         return undefined;
     };
     };
 
 
-    const sectionCrumb = React.useMemo(
-        () => findSectionCrumb(currentPath),
-        [currentPath, basePath, navMenuConfig],
-    );
+    const sectionCrumb = React.useMemo(() => findSectionCrumb(currentPath), [currentPath, navMenuConfig]);
     const breadcrumbs: BreadcrumbPair[] = React.useMemo(() => {
     const breadcrumbs: BreadcrumbPair[] = React.useMemo(() => {
         const arr = sectionCrumb ? [sectionCrumb, ...pageCrumbs] : pageCrumbs;
         const arr = sectionCrumb ? [sectionCrumb, ...pageCrumbs] : pageCrumbs;
         return arr.filter(
         return arr.filter(