Skip to content

Commit 7a4a376

Browse files
shreeyash07shreeyash07
committed
Update breadcrumb component
1 parent 008749e commit 7a4a376

File tree

8 files changed

+288
-118
lines changed

8 files changed

+288
-118
lines changed

‎app/src/views/Country/index.tsx‎

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
useCallback,
23
useContext,
34
useMemo,
45
} from 'react';
@@ -23,7 +24,7 @@ import {
2324
isTruthyString,
2425
} from '@togglecorp/fujs';
2526

26-
import Link from '#components/Link';
27+
import Link, { type InternalLinkProps } from '#components/Link';
2728
import NavigationTab from '#components/NavigationTab';
2829
import Page from '#components/Page';
2930
import { adminUrl } from '#config';
@@ -43,6 +44,15 @@ import { useRequest } from '#utils/restRequest';
4344
import i18n from './i18n.json';
4445
import styles from './styles.module.css';
4546

47+
type BreadcrumbsDataType = {
48+
to: InternalLinkProps['to'];
49+
label: string;
50+
urlParams?: Record<string, string | number | null | undefined>;
51+
};
52+
53+
const keySelector = (option: BreadcrumbsDataType) => option.to;
54+
const labelSelector = (option: BreadcrumbsDataType) => option.label;
55+
4656
// eslint-disable-next-line import/prefer-default-export
4757
export function Component() {
4858
const { countryId } = useParams<{ countryId: string }>();
@@ -94,6 +104,41 @@ export function Component() {
94104
{ countryName: country?.name ?? strings.countryPageTitleFallbackCountry },
95105
);
96106

107+
const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
108+
{
109+
to: 'home',
110+
label: strings.home,
111+
},
112+
{
113+
to: 'regionsLayout',
114+
label: region?.region_name ?? '-',
115+
urlParams: {
116+
regionId: country?.region,
117+
},
118+
},
119+
{
120+
to: 'countriesLayout',
121+
label: country?.name ?? '-',
122+
urlParams: {
123+
countryId,
124+
},
125+
},
126+
]), [
127+
strings.home,
128+
region?.region_name,
129+
country?.region,
130+
countryId,
131+
country?.name,
132+
]);
133+
134+
const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
135+
: InternalLinkProps => (
136+
{
137+
to: item.to,
138+
urlParams: item.urlParams,
139+
}
140+
), []);
141+
97142
if (isDefined(numericCountryId) && isRegion) {
98143
const regionId = countryIdToRegionIdMap[numericCountryId];
99144

@@ -143,29 +188,18 @@ export function Component() {
143188
title={pageTitle}
144189
heading={country?.name ?? '--'}
145190
breadCrumbs={(
146-
<Breadcrumbs>
147-
<Link
148-
to="home"
191+
<Breadcrumbs
192+
<
193+
BreadcrumbsDataType['to'],
194+
BreadcrumbsDataType,
195+
(InternalLinkProps & { children: React.ReactNode })
149196
>
150-
{strings.home}
151-
</Link>
152-
<Link
153-
to="regionsLayout"
154-
urlParams={{
155-
regionId: country?.region,
156-
}}
157-
>
158-
{region?.region_name}
159-
</Link>
160-
<Link
161-
to="countriesLayout"
162-
urlParams={{
163-
countryId,
164-
}}
165-
>
166-
{country?.name}
167-
</Link>
168-
</Breadcrumbs>
197+
data={breadCrumbsData}
198+
keySelector={keySelector}
199+
labelSelector={labelSelector}
200+
renderer={Link}
201+
rendererParams={rendererParams}
202+
/>
169203
)}
170204
description={
171205
isDefined(countryResponse)

‎app/src/views/Emergency/index.tsx‎

Lines changed: 53 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
useCallback,
23
useContext,
34
useMemo,
45
} from 'react';
@@ -26,7 +27,7 @@ import {
2627
listToMap,
2728
} from '@togglecorp/fujs';
2829

29-
import Link from '#components/Link';
30+
import Link, { type InternalLinkProps } from '#components/Link';
3031
import NavigationTab from '#components/NavigationTab';
3132
import Page from '#components/Page';
3233
import { adminUrl } from '#config';
@@ -45,6 +46,15 @@ import {
4546
import i18n from './i18n.json';
4647
import styles from './styles.module.css';
4748

49+
type BreadcrumbsDataType = {
50+
to: InternalLinkProps['to'];
51+
label: string;
52+
urlParams?: Record<string, string | number | null | undefined>;
53+
};
54+
55+
const keySelector = (option: BreadcrumbsDataType) => option.to;
56+
const labelSelector = (option: BreadcrumbsDataType) => option.label;
57+
4858
/*
4959
function getRouteIdFromName(text: string) {
5060
return text.toLowerCase().trim().split(' ').join('-');
@@ -209,6 +219,37 @@ export function Component() {
209219
].filter((tabInfo) => tabInfo.snippets.length > 0);
210220
}, [emergencyResponse, emergencySnippetResponse]);
211221

222+
const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
223+
{
224+
to: 'home',
225+
label: strings.home,
226+
},
227+
{
228+
to: 'emergencies',
229+
label: strings.emergencies,
230+
},
231+
{
232+
to: 'emergencyDetails',
233+
label: emergencyResponse?.name ?? '-',
234+
urlParams: {
235+
emergencyId,
236+
},
237+
},
238+
]), [
239+
strings.home,
240+
strings.emergencies,
241+
emergencyId,
242+
emergencyResponse?.name,
243+
]);
244+
245+
const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
246+
: InternalLinkProps => (
247+
{
248+
to: item.to,
249+
urlParams: item.urlParams,
250+
}
251+
), []);
252+
212253
const outletContext = useMemo<EmergencyOutletContext>(
213254
() => ({
214255
emergencyResponse,
@@ -225,20 +266,18 @@ export function Component() {
225266
className={styles.emergency}
226267
title={strings.emergencyPageTitle}
227268
breadCrumbs={(
228-
<Breadcrumbs>
229-
<Link to="home">
230-
{strings.home}
231-
</Link>
232-
<Link to="emergencies">
233-
{strings.emergencies}
234-
</Link>
235-
<Link
236-
to="emergencyDetails"
237-
urlParams={{ emergencyId }}
269+
<Breadcrumbs
270+
<
271+
BreadcrumbsDataType['to'],
272+
BreadcrumbsDataType,
273+
(InternalLinkProps & { children: React.ReactNode })
238274
>
239-
{emergencyResponse?.name}
240-
</Link>
241-
</Breadcrumbs>
275+
keySelector={keySelector}
276+
labelSelector={labelSelector}
277+
data={breadCrumbsData}
278+
rendererParams={rendererParams}
279+
renderer={Link}
280+
/>
242281
)}
243282
actions={isAuthenticated && (
244283
<>

‎app/src/views/FieldReportDetails/index.tsx‎

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Fragment,
3+
useCallback,
34
useMemo,
45
} from 'react';
56
import { useParams } from 'react-router-dom';
@@ -28,7 +29,7 @@ import {
2829
} from '@togglecorp/fujs';
2930

3031
import DetailsFailedToLoadMessage from '#components/domain/DetailsFailedToLoadMessage';
31-
import Link from '#components/Link';
32+
import Link, { type InternalLinkProps } from '#components/Link';
3233
import Page from '#components/Page';
3334
import useGlobalEnums from '#hooks/domain/useGlobalEnums';
3435
import {
@@ -48,6 +49,15 @@ import EventNumericDetails from './EventNumericDetails';
4849
import i18n from './i18n.json';
4950
import styles from './styles.module.css';
5051

52+
type BreadcrumbsDataType = {
53+
to: InternalLinkProps['to'];
54+
label: string;
55+
urlParams?: Record<string, string | number | null | undefined>;
56+
};
57+
58+
const keySelector = (option: BreadcrumbsDataType) => option.to;
59+
const labelSelector = (option: BreadcrumbsDataType) => option.label;
60+
5161
// eslint-disable-next-line import/prefer-default-export
5262
export function Component() {
5363
const strings = useTranslation(i18n);
@@ -209,6 +219,36 @@ export function Component() {
209219
},
210220
].filter((plannedResponse) => isDefined(plannedResponse.value) && plannedResponse.value !== 0);
211221

222+
const breadCrumbsData: BreadcrumbsDataType[] = useMemo(() => ([
223+
{
224+
to: 'home',
225+
label: strings.home,
226+
},
227+
{
228+
to: 'emergencies',
229+
label: strings.emergencies,
230+
},
231+
{
232+
to: 'fieldReportDetails',
233+
label: fieldReportResponse?.summary ?? '-',
234+
urlParams: {
235+
fieldReportId,
236+
},
237+
},
238+
]), [
239+
strings.home,
240+
strings.emergencies,
241+
fieldReportResponse?.summary,
242+
fieldReportId,
243+
]);
244+
245+
const rendererParams = useCallback((_: BreadcrumbsDataType['to'], item: BreadcrumbsDataType)
246+
: InternalLinkProps => (
247+
{
248+
to: item.to,
249+
urlParams: item.urlParams,
250+
}
251+
), []);
212252
// FIXME: Translation Warning Banner should be shown
213253
// FIXME: Breadcrumbs
214254

@@ -221,24 +261,18 @@ export function Component() {
221261
className={styles.fieldReportDetails}
222262
heading={shouldHideDetails ? strings.fieldReportDefaultHeading : summary}
223263
breadCrumbs={(
224-
<Breadcrumbs>
225-
<Link
226-
to="home"
264+
<Breadcrumbs
265+
<
266+
BreadcrumbsDataType['to'],
267+
BreadcrumbsDataType,
268+
(InternalLinkProps & { children: React.ReactNode })
227269
>
228-
{strings.home}
229-
</Link>
230-
<Link
231-
to="emergencies"
232-
>
233-
{strings.emergencies}
234-
</Link>
235-
<Link
236-
to="fieldReportDetails"
237-
urlParams={{ fieldReportId }}
238-
>
239-
{fieldReportResponse?.summary}
240-
</Link>
241-
</Breadcrumbs>
270+
data={breadCrumbsData}
271+
keySelector={keySelector}
272+
labelSelector={labelSelector}
273+
renderer={Link}
274+
rendererParams={rendererParams}
275+
/>
242276
)}
243277
actions={(
244278
<Link

0 commit comments

Comments
 (0)