Add GoBreadcrumbs component

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

Hide file tree

Showing 5 changed files with 52 additions and 98 deletions.
diff --git a/app/src/components/GoBreadcrumbs/index.tsx b/app/src/components/GoBreadcrumbs/index.tsx
@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { Breadcrumbs } from '@ifrc-go/ui';
+
+import Link, { type InternalLinkProps } from '../Link';
+
+interface RouteData {
+    to: InternalLinkProps['to'];
+    label: React.ReactNode;
+    urlParams?: Record<string, string | number | null | undefined>;
+}
+
+interface GoBreadcrumbsProps {
+    routeData: RouteData[]
+}
+
+function GoBreadcrumbs(props: GoBreadcrumbsProps) {
+    const { routeData } = props;
+
+    const rendererParams = useCallback((_: RouteData['to'], item: RouteData)
+    : InternalLinkProps => (
+        {
+            to: item.to,
+            urlParams: item.urlParams,
+        }
+    ), []);
+
+    return (
+        <Breadcrumbs
+            <
+                RouteData['to'],
+                RouteData,
+                (InternalLinkProps & { children: React.ReactNode })
+            >
+            data={routeData}
+            keySelector={(datum) => datum.to}
+            labelSelector={(datum) => datum.label}
+            renderer={Link}
+            rendererParams={rendererParams}
+        />
+    );
+}
+
+export default GoBreadcrumbs;
diff --git a/app/src/views/Country/index.tsx b/app/src/views/Country/index.tsx
@@ -1,5 +1,4 @@
 import {
-    useCallback,
     useContext,
     useMemo,
 } from 'react';
@@ -11,7 +10,6 @@ import {
 } from 'react-router-dom';
 import { PencilFillIcon } from '@ifrc-go/icons';
 import {
-    Breadcrumbs,
     Message,
     NavigationTabList,
 } from '@ifrc-go/ui';
@@ -24,6 +22,7 @@ import {
     isTruthyString,
 } from '@togglecorp/fujs';
 
+import GoBreadcrumbs from '#components/GoBreadcrumbs';
 import Link, { type InternalLinkProps } from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
 import Page from '#components/Page';
@@ -50,9 +49,6 @@ type BreadcrumbsDataType = {
         urlParams?: Record<string, string | number | null | undefined>;
 };
 
-const keySelector = (option: BreadcrumbsDataType) => option.to;
-const labelSelector = (option: BreadcrumbsDataType) => option.label;
-
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const { countryId } = useParams<{ countryId: string }>();
@@ -131,14 +127,6 @@ export function Component() {
         country?.name,
     ]);
 
-    const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
-    : InternalLinkProps => (
-        {
-            to: item.to,
-            urlParams: item.urlParams,
-        }
-    ), []);
-
     if (isDefined(numericCountryId) && isRegion) {
         const regionId = countryIdToRegionIdMap[numericCountryId];
 
@@ -188,18 +176,7 @@ export function Component() {
             title={pageTitle}
             heading={country?.name ?? '--'}
             breadCrumbs={(
-                <Breadcrumbs
-                    <
-                        BreadcrumbsDataType['to'],
-                        BreadcrumbsDataType,
-                        (InternalLinkProps & { children: React.ReactNode })
-                    >
-                    data={breadCrumbsData}
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    renderer={Link}
-                    rendererParams={rendererParams}
-                />
+                <GoBreadcrumbs routeData={breadCrumbsData} />
             )}
             description={
                 isDefined(countryResponse)

diff --git a/app/src/views/Emergency/index.tsx b/app/src/views/Emergency/index.tsx
@@ -1,5 +1,4 @@
 import {
-    useCallback,
     useContext,
     useMemo,
 } from 'react';
@@ -14,7 +13,6 @@ import {
     TargetedPopulationIcon,
 } from '@ifrc-go/icons';
 import {
-    Breadcrumbs,
     Button,
     KeyFigure,
     NavigationTabList,
@@ -27,6 +25,7 @@ import {
     listToMap,
 } from '@togglecorp/fujs';
 
+import GoBreadcrumbs from '#components/GoBreadcrumbs';
 import Link, { type InternalLinkProps } from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
 import Page from '#components/Page';
@@ -52,9 +51,6 @@ type BreadcrumbsDataType = {
         urlParams?: Record<string, string | number | null | undefined>;
 };
 
-const keySelector = (option: BreadcrumbsDataType) => option.to;
-const labelSelector = (option: BreadcrumbsDataType) => option.label;
-
 /*
 function getRouteIdFromName(text: string) {
     return text.toLowerCase().trim().split(' ').join('-');
@@ -242,14 +238,6 @@ export function Component() {
         emergencyResponse?.name,
     ]);
 
-    const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
-    : InternalLinkProps => (
-        {
-            to: item.to,
-            urlParams: item.urlParams,
-        }
-    ), []);
-
     const outletContext = useMemo<EmergencyOutletContext>(
         () => ({
             emergencyResponse,
@@ -266,17 +254,8 @@ export function Component() {
             className={styles.emergency}
             title={strings.emergencyPageTitle}
             breadCrumbs={(
-                <Breadcrumbs
-                    <
-                        BreadcrumbsDataType['to'],
-                        BreadcrumbsDataType,
-                        (InternalLinkProps & { children: React.ReactNode })
-                    >
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    data={breadCrumbsData}
-                    rendererParams={rendererParams}
-                    renderer={Link}
+                <GoBreadcrumbs
+                    routeData={breadCrumbsData}
                 />
             )}
             actions={isAuthenticated && (

diff --git a/app/src/views/FieldReportDetails/index.tsx b/app/src/views/FieldReportDetails/index.tsx
@@ -1,12 +1,10 @@
 import {
     Fragment,
-    useCallback,
     useMemo,
 } from 'react';
 import { useParams } from 'react-router-dom';
 import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
 import {
-    Breadcrumbs,
     Container,
     DateOutput,
     HtmlOutput,
@@ -29,6 +27,7 @@ import {
 } from '@togglecorp/fujs';
 
 import DetailsFailedToLoadMessage from '#components/domain/DetailsFailedToLoadMessage';
+import GoBreadcrumbs from '#components/GoBreadcrumbs';
 import Link, { type InternalLinkProps } from '#components/Link';
 import Page from '#components/Page';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
@@ -55,9 +54,6 @@ type BreadcrumbsDataType = {
         urlParams?: Record<string, string | number | null | undefined>;
 };
 
-const keySelector = (option: BreadcrumbsDataType) => option.to;
-const labelSelector = (option: BreadcrumbsDataType) => option.label;
-
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
@@ -242,15 +238,7 @@ export function Component() {
         fieldReportId,
     ]);
 
-    const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
-    : InternalLinkProps => (
-        {
-            to: item.to,
-            urlParams: item.urlParams,
-        }
-    ), []);
     // FIXME: Translation Warning Banner should be shown
-    // FIXME: Breadcrumbs
 
     const shouldHideDetails = fetchingFieldReport
         || isDefined(fieldReportResponseError);
@@ -261,18 +249,7 @@ export function Component() {
             className={styles.fieldReportDetails}
             heading={shouldHideDetails ? strings.fieldReportDefaultHeading : summary}
             breadCrumbs={(
-                <Breadcrumbs
-                    <
-                        BreadcrumbsDataType['to'],
-                        BreadcrumbsDataType,
-                        (InternalLinkProps & { children: React.ReactNode })
-                    >
-                    data={breadCrumbsData}
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    renderer={Link}
-                    rendererParams={rendererParams}
-                />
+                <GoBreadcrumbs routeData={breadCrumbsData} />
             )}
             actions={(
                 <Link

diff --git a/app/src/views/FlashUpdateDetails/index.tsx b/app/src/views/FlashUpdateDetails/index.tsx
@@ -1,6 +1,5 @@
 import {
     Fragment,
-    useCallback,
     useMemo,
 } from 'react';
 import { useParams } from 'react-router-dom';
@@ -9,7 +8,6 @@ import {
     PencilFillIcon,
 } from '@ifrc-go/icons';
 import {
-    Breadcrumbs,
     Button,
     Container,
     DateOutput,
@@ -30,6 +28,7 @@ import {
 } from '@togglecorp/fujs';
 
 import DetailsFailedToLoadMessage from '#components/domain/DetailsFailedToLoadMessage';
+import GoBreadcrumbs from '#components/GoBreadcrumbs';
 import Link, { type InternalLinkProps } from '#components/Link';
 import Page from '#components/Page';
 import { useRequest } from '#utils/restRequest';
@@ -46,9 +45,6 @@ type BreadcrumbsDataType = {
         urlParams?: Record<string, string | number | null | undefined>;
 };
 
-const keySelector = (option: BreadcrumbsDataType) => option.to;
-const labelSelector = (option: BreadcrumbsDataType) => option.label;
-
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
@@ -137,13 +133,6 @@ export function Component() {
         flashUpdateResponse?.title,
     ]);
 
-    const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
-    : InternalLinkProps => (
-        {
-            to: item.to,
-            urlParams: item.urlParams,
-        }
-    ), []);
     const shouldHideDetails = fetchingFlashUpdate
         || isDefined(flashUpdateResponseError);
 
@@ -155,18 +144,7 @@ export function Component() {
             className={styles.flashUpdateDetails}
             heading={flashUpdateResponse?.title ?? strings.flashUpdateDetailsHeading}
             breadCrumbs={(
-                <Breadcrumbs
-                    <
-                        BreadcrumbsDataType['to'],
-                        BreadcrumbsDataType,
-                        (InternalLinkProps & { children: React.ReactNode })
-                    >
-                    data={breadCrumbsData}
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    renderer={Link}
-                    rendererParams={rendererParams}
-                />
+                <GoBreadcrumbs routeData={breadCrumbsData} />
             )}
             actions={flashUpdateResponse && (
                 <>