From fd5e894620e4f20456406bdebb58bbabc947e99a Mon Sep 17 00:00:00 2001 From: shreeyash07 Date: Tue, 1 Oct 2024 15:25:52 +0545 Subject: [PATCH] Add GoBreadcrumbs component --- app/src/components/GoBreadcrumbs/index.tsx | 43 ++++++++++++++++++++++ app/src/views/Country/index.tsx | 27 +------------- app/src/views/Emergency/index.tsx | 27 ++------------ app/src/views/FieldReportDetails/index.tsx | 27 +------------- app/src/views/FlashUpdateDetails/index.tsx | 26 +------------ 5 files changed, 52 insertions(+), 98 deletions(-) create mode 100644 app/src/components/GoBreadcrumbs/index.tsx diff --git a/app/src/components/GoBreadcrumbs/index.tsx b/app/src/components/GoBreadcrumbs/index.tsx new file mode 100644 index 000000000..657465ed6 --- /dev/null +++ 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; +} + +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 ( + + 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 index f4314eb27..8c08522a5 100644 --- 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; }; -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={( - - data={breadCrumbsData} - keySelector={keySelector} - labelSelector={labelSelector} - renderer={Link} - rendererParams={rendererParams} - /> + )} description={ isDefined(countryResponse) diff --git a/app/src/views/Emergency/index.tsx b/app/src/views/Emergency/index.tsx index c534b6659..d64973f7f 100644 --- 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; }; -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( () => ({ emergencyResponse, @@ -266,17 +254,8 @@ export function Component() { className={styles.emergency} title={strings.emergencyPageTitle} breadCrumbs={( - - keySelector={keySelector} - labelSelector={labelSelector} - data={breadCrumbsData} - rendererParams={rendererParams} - renderer={Link} + )} actions={isAuthenticated && ( diff --git a/app/src/views/FieldReportDetails/index.tsx b/app/src/views/FieldReportDetails/index.tsx index 239c7f098..6f4a7e1ec 100644 --- 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; }; -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={( - - data={breadCrumbsData} - keySelector={keySelector} - labelSelector={labelSelector} - renderer={Link} - rendererParams={rendererParams} - /> + )} actions={( ; }; -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={( - - data={breadCrumbsData} - keySelector={keySelector} - labelSelector={labelSelector} - renderer={Link} - rendererParams={rendererParams} - /> + )} actions={flashUpdateResponse && ( <>