Add custom breadcrumbs hook

IFRCGo · Oct 1, 2024 · 86b1707 · 86b1707
1 parent 3a1ca4b
commit 86b1707
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/packages/ui/src/components/Breadcrumbs/index.tsx b/packages/ui/src/components/Breadcrumbs/index.tsx
@@ -5,6 +5,8 @@ import {
     isNotDefined,
 } from '@togglecorp/fujs';
 
+import { useBreadcrumbs } from '#hooks/useBreadcrumbs';
+
 import styles from './styles.module.css';
 
 interface RendererProps {
@@ -38,7 +40,13 @@ function Breadcrumbs<KEY, DATUM, RENDERER_PROPS extends RendererProps>(
         labelSelector,
     } = props;
 
-    if (isNotDefined(data)) {
+    const breadcrumbs = useBreadcrumbs({
+        data,
+        keySelector,
+        labelSelector,
+    });
+
+    if (isNotDefined(breadcrumbs)) {
         return null;
     }
 
@@ -47,14 +55,16 @@ function Breadcrumbs<KEY, DATUM, RENDERER_PROPS extends RendererProps>(
             className={_cs(styles.breadcrumbs, className)}
             aria-label="breadcrumb"
         >
-            {data.map(
-                (datum, i, array) => {
-                    const key = keySelector(datum, i);
+            {breadcrumbs.map(
+                (breadcrumb, i, array) => {
+                    const {
+                        key, datum, index, label,
+                    } = breadcrumb;
                     const rendererProps = {
-                        ...rendererParams(key, datum, i, data),
+                        ...rendererParams(key, datum, index, data || []),
                         children: (
                             <div className={styles.label}>
-                                {labelSelector(datum, i)}
+                                {label}
                             </div>
                         ),
                     } as RENDERER_PROPS;

diff --git a/packages/ui/src/hooks/useBreadcrumbs.ts b/packages/ui/src/hooks/useBreadcrumbs.ts
@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { isNotDefined } from '@togglecorp/fujs';
+
+interface UseBreadcrumbsParams<KEY, DATUM> {
+    data: DATUM[] | undefined | null;
+    keySelector(datum: DATUM, index: number): KEY;
+    labelSelector(datum: DATUM, index: number): React.ReactNode;
+}
+
+interface Breadcrumb<KEY, DATUM> {
+    key: KEY;
+    label: React.ReactNode;
+    datum: DATUM;
+    index: number;
+}
+
+export function useBreadcrumbs<KEY, DATUM>({
+    data,
+    keySelector,
+    labelSelector,
+}: UseBreadcrumbsParams<KEY, DATUM>): Breadcrumb<KEY, DATUM>[] | null {
+    const breadcrumbs = useMemo(() => {
+        if (isNotDefined(data)) {
+            return null;
+        }
+        return data.map((datum, index) => ({
+            key: keySelector(datum, index),
+            label: labelSelector(datum, index),
+            datum,
+            index,
+        }));
+    }, [data, keySelector, labelSelector]);
+
+    return breadcrumbs;
+}
+
+export default useBreadcrumbs;