Migrate to react-dynamic-breadcrumbs

client/app/bundles/course/container/Breadcrumbs/Breadcrumbs.tsx

@@ -1,9 +1,8 @@
-import { useCallback } from 'react';
+import { useMemo } from 'react';
 import { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
 
 import LoadingEllipsis from 'lib/components/core/LoadingEllipsis';
-import { CrumbData } from 'lib/hooks/router/dynamicNest';
-import { CrumbContent } from 'lib/hooks/router/dynamicNest/crumbs';
+import { CrumbData, forEachFlatCrumb } from 'lib/hooks/router/dynamicNest';
 import useTranslation, { translatable } from 'lib/hooks/useTranslation';
 
 import Crumb from './Crumb';
@@ -22,34 +21,19 @@ const Breadcrumbs = (props: BreadcrumbProps): JSX.Element => {
 
   const sliders = useSliders();
 
-  const getCrumbElement = useCallback(
-    (content: CrumbContent, disabled: boolean, key: string): JSX.Element => (
-      <Crumb key={key} to={!disabled && content.url}>
-        {translatable(content.title) ? t(content.title) : content.title}
-      </Crumb>
-    ),
-    [],
-  );
-
-  const validCrumbs = crumbs.reduce<JSX.Element[]>((elements, crumb, index) => {
-    const content = crumb.content;
-    if (!content) return elements;
-
-    const isLastCrumb = index >= crumbs.length - 1;
-
-    if (Array.isArray(content)) {
-      content.forEach((item, itemIndex) => {
-        const isLastItem = isLastCrumb && itemIndex >= content.length - 1;
-        const key = `${crumb.pathname}-${itemIndex}`;
+  const validCrumbs = useMemo(() => {
+    const elements: JSX.Element[] = [];
 
-        elements.push(getCrumbElement(item, isLastItem, key));
-      });
-    } else {
-      elements.push(getCrumbElement(content, isLastCrumb, crumb.pathname));
-    }
+    forEachFlatCrumb(crumbs, (content, isLastCrumb, key) => {
+      elements.push(
+        <Crumb key={key} to={!isLastCrumb && content.url}>
+          {translatable(content.title) ? t(content.title) : content.title}
+        </Crumb>,
+      );
+    });
 
     return elements;
-  }, []);
+  }, [crumbs]);
 
   return (
     <div className={`relative flex items-center ${props.className ?? ''}`}>

client/app/bundles/course/container/CourseContainer.tsx

@@ -7,9 +7,12 @@ import { CourseLayoutData } from 'types/course/courses';
 import CikgoSidebarItems from 'course/stories/components/CikgoSidebarItems';
 import PopupNotifier from 'course/user-notification/PopupNotifier';
 import Footer from 'lib/components/core/layouts/Footer';
-import { DataHandle, useDynamicNest } from 'lib/hooks/router/dynamicNest';
-import { DEFAULT_WINDOW_TITLE } from 'lib/hooks/router/dynamicNest/constants';
-import { getLastCrumbTitle } from 'lib/hooks/router/dynamicNest/crumbs';
+import {
+  DataHandle,
+  DEFAULT_WINDOW_TITLE,
+  getLastCrumbTitle,
+  useDynamicNest,
+} from 'lib/hooks/router/dynamicNest';
 import useTranslation, { translatable } from 'lib/hooks/useTranslation';
 
 import Breadcrumbs from './Breadcrumbs';

client/app/lib/containers/CourselessContainer.tsx

@@ -2,9 +2,11 @@ import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Footer from 'lib/components/core/layouts/Footer';
-import { useDynamicNest } from 'lib/hooks/router/dynamicNest';
-import { DEFAULT_WINDOW_TITLE } from 'lib/hooks/router/dynamicNest/constants';
-import { getLastCrumbTitle } from 'lib/hooks/router/dynamicNest/crumbs';
+import {
+  DEFAULT_WINDOW_TITLE,
+  getLastCrumbTitle,
+  useDynamicNest,
+} from 'lib/hooks/router/dynamicNest';
 import useTranslation, { translatable } from 'lib/hooks/useTranslation';
 
 import BrandingHead from '../components/navigation/BrandingHead';

client/app/lib/hooks/router/dynamicNest.ts

@@ -0,0 +1,39 @@
+import {
+  type CrumbContent as RDBCrumbContent,
+  type CrumbData as RDBCrumbData,
+  type CrumbPath as RDBCrumbPath,
+  type DataHandle as RDBDataHandle,
+  forEachFlatCrumb,
+  getLastCrumbTitle,
+  type Match as RDBMatch,
+  useDynamicBreadcrumbs,
+} from 'react-dynamic-breadcrumbs';
+import { Location, useLocation, useMatches } from 'react-router-dom';
+
+import type { Descriptor } from '../useTranslation';
+
+type CrumbTitle = string | Descriptor | null | undefined;
+
+export type CrumbData = RDBCrumbData<CrumbTitle>;
+export type CrumbContent = RDBCrumbContent<CrumbTitle>;
+export type CrumbPath = RDBCrumbPath<CrumbTitle>;
+export type DataHandle = RDBDataHandle<
+  Location,
+  Omit<ReturnType<typeof useMatches>[number], 'handle'>,
+  CrumbTitle
+>;
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const useDynamicNest = () => {
+  const matches = useMatches() as RDBMatch<Location, CrumbTitle>[];
+  const location = useLocation();
+
+  return useDynamicBreadcrumbs<Location, CrumbTitle>({
+    matches,
+    context: location,
+  });
+};
+
+export const DEFAULT_WINDOW_TITLE = 'Coursemology';
+
+export { forEachFlatCrumb, getLastCrumbTitle };

client/package.json

@@ -80,6 +80,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
+    "react-dynamic-breadcrumbs": "^1.0.1",
     "react-google-recaptcha": "^3.1.0",
     "react-hook-form": "^7.51.1",
     "react-hot-keys": "^2.7.3",