Skip to content

Commit eb395d0

Browse files
karisal-anderskarisal-anders
committed
refactor: unify SimilarEvents.tsx files, use useClickCapture(1000)
make identical: - apps/*/src/domain/event/similarEvents/SimilarEvents.tsx files - apps/*/src/domain/event/useEventCards.tsx files (added two of these) by: - duplicating useEventCards.tsx file from sports-helsinki app - making all versions use useClickCapture(1000) as was previously only in one app - moving different URL handlings to utils so useEventCards.tsx files can be made identical - making all SimilarEvents.tsx files use useEventCards so SimilarEvents.tsx files can be made identical So the card URLs should be purely refactored but there's the addition of useClickCapture(1000) to two of the three apps that didn't use it previously. This should be hopefully safe. refs LIIKUNTA-455
1 parent 727d37d commit eb395d0

8 files changed

Lines changed: 127 additions & 82 deletions

File tree

‎apps/events-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx‎

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
import { LoadingSpinner, useLocale } from '@events-helsinki/components';
1+
import {
2+
LoadingSpinner,
3+
useEventTranslation,
4+
} from '@events-helsinki/components';
25
import type { EventFields } from '@events-helsinki/components';
3-
import { useTranslation } from 'next-i18next';
6+
import { useRouter } from 'next/router';
47
import React from 'react';
58
import type { CollectionProps } from 'react-helsinki-headless-cms';
69
import {
7-
Card,
8-
getEventCardProps,
9-
useConfig,
1010
Collection,
1111
PageSection,
1212
ContentContainer,
1313
} from 'react-helsinki-headless-cms';
14-
15-
import { ROUTES } from '../../../constants';
16-
import routerHelper from '../../../domain/app/routerHelper';
1714
import { useSimilarEventsQuery } from '../queryUtils';
15+
import useEventCards from '../useEventCards';
1816
import styles from './similarEvents.module.scss';
1917

2018
interface Props {
@@ -32,33 +30,10 @@ const SimilarEvents: React.FC<Props> = ({
3230
type = 'carousel',
3331
onEventsLoaded,
3432
}) => {
35-
const { t } = useTranslation('event');
36-
const locale = useLocale();
33+
const { t } = useEventTranslation();
34+
const router = useRouter();
3735
const { data: events, loading } = useSimilarEventsQuery(event);
38-
const {
39-
components: { EventCardContent },
40-
} = useConfig();
41-
42-
const cards = events.map((event, i) => {
43-
const cardProps = getEventCardProps(event, locale);
44-
const url = routerHelper.getLocalizedCmsItemUrl(
45-
ROUTES.EVENTS,
46-
{ eventId: event.id },
47-
locale
48-
);
49-
return (
50-
<Card
51-
key={cardProps.id}
52-
{...cardProps}
53-
url={url}
54-
direction="fixed-vertical"
55-
customContent={
56-
EventCardContent && <EventCardContent event={events[i]} />
57-
}
58-
/>
59-
);
60-
});
61-
36+
const cards = useEventCards({ events, returnPath: router.asPath });
6237
const hasCards = !!cards.length;
6338

6439
React.useEffect(() => {
@@ -83,7 +58,7 @@ const SimilarEvents: React.FC<Props> = ({
8358
>
8459
<Collection
8560
type={type}
86-
title={t('similarEvents.title')}
61+
title={t('event:similarEvents.title')}
8762
cards={cards}
8863
loading={loading}
8964
/>

‎apps/events-helsinki/src/domain/event/useEventCards.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type { EventFields } from '@events-helsinki/components';
2+
import { useClickCapture, useLocale } from '@events-helsinki/components';
3+
import React from 'react';
4+
import {
5+
Card,
6+
getEventCardProps,
7+
useConfig,
8+
} from 'react-helsinki-headless-cms';
9+
import { getCardUrl } from '../search/eventSearch/utils';
10+
11+
type useEventCardsProps = {
12+
events?: EventFields[] | null;
13+
returnPath?: string;
14+
};
15+
16+
function useEventCards({ events, returnPath }: useEventCardsProps) {
17+
const locale = useLocale();
18+
const {
19+
components: { EventCardContent },
20+
} = useConfig();
21+
useClickCapture(1000);
22+
return (
23+
events?.map((event, i) => {
24+
const cardProps = getEventCardProps(event, locale);
25+
return (
26+
<Card
27+
key={cardProps.id}
28+
{...cardProps}
29+
url={getCardUrl(event, locale, returnPath)}
30+
direction="fixed-vertical"
31+
customContent={
32+
EventCardContent && <EventCardContent event={events[i]} />
33+
}
34+
/>
35+
);
36+
}) ?? []
37+
);
38+
}
39+
40+
export default useEventCards;

‎apps/events-helsinki/src/domain/search/eventSearch/utils.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,6 +388,13 @@ export const getPlainEventUrl = (
388388
);
389389
};
390390

391+
export const getCardUrl = (
392+
event: EventFields,
393+
locale: AppLanguage,
394+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
395+
returnPath?: string
396+
): string => getPlainEventUrl(event, locale);
397+
391398
export const getOrganizationSearchUrl = (
392399
event: EventFields,
393400
router: NextRouter,

‎apps/hobbies-helsinki/src/domain/event/similarEvents/SimilarEvents.tsx‎

Lines changed: 7 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
11
import {
22
LoadingSpinner,
3-
useClickCapture,
4-
useLocale,
3+
useEventTranslation,
54
} from '@events-helsinki/components';
65
import type { EventFields } from '@events-helsinki/components';
7-
import { useTranslation } from 'next-i18next';
6+
import { useRouter } from 'next/router';
87
import React from 'react';
98
import type { CollectionProps } from 'react-helsinki-headless-cms';
109
import {
11-
Card,
12-
getEventCardProps,
13-
useConfig,
1410
Collection,
1511
PageSection,
1612
ContentContainer,
1713
} from 'react-helsinki-headless-cms';
18-
19-
import { ROUTES } from '../../../constants';
20-
import routerHelper from '../../app/routerHelper';
2114
import { useSimilarEventsQuery } from '../queryUtils';
15+
import useEventCards from '../useEventCards';
2216
import styles from './similarEvents.module.scss';
2317

2418
interface Props {
@@ -36,35 +30,10 @@ const SimilarEvents: React.FC<Props> = ({
3630
type = 'carousel',
3731
onEventsLoaded,
3832
}) => {
39-
const { t } = useTranslation('event');
40-
const locale = useLocale();
33+
const { t } = useEventTranslation();
34+
const router = useRouter();
4135
const { data: events, loading } = useSimilarEventsQuery(event);
42-
const {
43-
components: { EventCardContent },
44-
} = useConfig();
45-
useClickCapture(1000);
46-
47-
const cards = events.map((event, i) => {
48-
const cardProps = getEventCardProps(event, locale);
49-
const url = routerHelper.getLocalizedCmsItemUrl(
50-
ROUTES.COURSES,
51-
{ eventId: event.id },
52-
locale
53-
);
54-
55-
return (
56-
<Card
57-
key={cardProps.id}
58-
{...cardProps}
59-
url={url}
60-
direction="fixed-vertical"
61-
customContent={
62-
EventCardContent && <EventCardContent event={events[i]} />
63-
}
64-
/>
65-
);
66-
});
67-
36+
const cards = useEventCards({ events, returnPath: router.asPath });
6837
const hasCards = !!cards.length;
6938

7039
React.useEffect(() => {
@@ -89,7 +58,7 @@ const SimilarEvents: React.FC<Props> = ({
8958
>
9059
<Collection
9160
type={type}
92-
title={t('similarEvents.title')}
61+
title={t('event:similarEvents.title')}
9362
cards={cards}
9463
loading={loading}
9564
/>

‎apps/hobbies-helsinki/src/domain/event/useEventCards.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type { EventFields } from '@events-helsinki/components';
2+
import { useClickCapture, useLocale } from '@events-helsinki/components';
3+
import React from 'react';
4+
import {
5+
Card,
6+
getEventCardProps,
7+
useConfig,
8+
} from 'react-helsinki-headless-cms';
9+
import { getCardUrl } from '../search/eventSearch/utils';
10+
11+
type useEventCardsProps = {
12+
events?: EventFields[] | null;
13+
returnPath?: string;
14+
};
15+
16+
function useEventCards({ events, returnPath }: useEventCardsProps) {
17+
const locale = useLocale();
18+
const {
19+
components: { EventCardContent },
20+
} = useConfig();
21+
useClickCapture(1000);
22+
return (
23+
events?.map((event, i) => {
24+
const cardProps = getEventCardProps(event, locale);
25+
return (
26+
<Card
27+
key={cardProps.id}
28+
{...cardProps}
29+
url={getCardUrl(event, locale, returnPath)}
30+
direction="fixed-vertical"
31+
customContent={
32+
EventCardContent && <EventCardContent event={events[i]} />
33+
}
34+
/>
35+
);
36+
}) ?? []
37+
);
38+
}
39+
40+
export default useEventCards;

‎apps/hobbies-helsinki/src/domain/search/eventSearch/utils.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -486,6 +486,13 @@ export const getOrganizationSearchUrl = (
486486
);
487487
};
488488

489+
export const getCardUrl = (
490+
event: EventFields,
491+
locale: AppLanguage,
492+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
493+
returnPath?: string
494+
): string => getPlainEventUrl(event, locale);
495+
489496
export const getEventListLinkUrl = (
490497
event: EventFields,
491498
router: NextRouter,

‎apps/sports-helsinki/src/domain/event/useEventCards.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import type { EventFields } from '@events-helsinki/components';
2-
import { useLocale } from '@events-helsinki/components';
2+
import { useClickCapture, useLocale } from '@events-helsinki/components';
33
import React from 'react';
44
import {
55
Card,
66
getEventCardProps,
77
useConfig,
88
} from 'react-helsinki-headless-cms';
9-
import { ROUTES } from '../../constants';
10-
import routerHelper from '../../domain/app/routerHelper';
9+
import { getCardUrl } from '../search/eventSearch/utils';
1110

1211
type useEventCardsProps = {
1312
events?: EventFields[] | null;
@@ -19,19 +18,15 @@ function useEventCards({ events, returnPath }: useEventCardsProps) {
1918
const {
2019
components: { EventCardContent },
2120
} = useConfig();
21+
useClickCapture(1000);
2222
return (
2323
events?.map((event, i) => {
2424
const cardProps = getEventCardProps(event, locale);
25-
const url = routerHelper.getLocalizedCmsItemUrl(
26-
ROUTES.COURSES,
27-
{ eventId: event.id, returnPath },
28-
locale
29-
);
3025
return (
3126
<Card
3227
key={cardProps.id}
3328
{...cardProps}
34-
url={url}
29+
url={getCardUrl(event, locale, returnPath)}
3530
direction="fixed-vertical"
3631
customContent={
3732
EventCardContent && <EventCardContent event={events[i]} />

‎apps/sports-helsinki/src/domain/search/eventSearch/utils.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,18 @@ export const getPlainEventUrl = (
397397
);
398398
};
399399

400+
export const getCardUrl = (
401+
event: EventFields,
402+
locale: AppLanguage,
403+
returnPath?: string
404+
): string => {
405+
return routerHelper.getLocalizedCmsItemUrl(
406+
ROUTES.COURSES,
407+
{ eventId: event.id, returnPath },
408+
locale
409+
);
410+
};
411+
400412
export const getOrganizationSearchUrl = (
401413
event: EventFields,
402414
router: NextRouter,

0 commit comments

Comments
 (0)