Skip to content

Commit 6957f21

Browse files
avivkelleravivkeller
committed
avoid passing modal via frontmatter
1 parent fb31b90 commit 6957f21

File tree

8 files changed

+95
-117
lines changed

8 files changed

+95
-117
lines changed

‎apps/site/app/[locale]/page.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,7 @@ const getPage: FC<DynamicParams> = async props => {
150150
// within a server-side context
151151
return (
152152
<MatterProvider {...sharedContext}>
153-
<WithLayout layout={frontmatter.layout} modal={frontmatter.modal}>
154-
{content}
155-
</WithLayout>
153+
<WithLayout layout={frontmatter.layout}>{content}</WithLayout>
156154
</MatterProvider>
157155
);
158156
}

‎apps/site/components/Downloads/DownloadReleasesTable/index.tsx‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
'use client';
2+
13
import Badge from '@node-core/ui-components/Common/Badge';
24
import { useTranslations } from 'next-intl';
35
import type { FC } from 'react';
46

57
import FormattedTime from '#site/components/Common/FormattedTime';
68
import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
79
import provideReleaseData from '#site/next-data/providers/releaseData';
10+
import { ModalProvider } from '#site/providers/modalProvider';
11+
12+
import ReleaseModal from '../ReleaseModal';
813

914
const BADGE_KIND_MAP = {
1015
'End-of-life': 'warning',
@@ -19,41 +24,43 @@ const DownloadReleasesTable: FC = () => {
1924
const t = useTranslations();
2025

2126
return (
22-
<table id="tbVersions">
23-
<thead>
24-
<tr>
25-
<th>{t('components.downloadReleasesTable.version')}</th>
26-
<th>{t('components.downloadReleasesTable.codename')}</th>
27-
<th>{t('components.downloadReleasesTable.firstReleased')}</th>
28-
<th>{t('components.downloadReleasesTable.lastUpdated')}</th>
29-
<th>{t('components.downloadReleasesTable.status')}</th>
30-
<th></th>
31-
</tr>
32-
</thead>
33-
<tbody>
34-
{releaseData.map(release => (
35-
<tr key={release.major}>
36-
<td data-label="Version">v{release.major}</td>
37-
<td data-label="LTS">{release.codename || '-'}</td>
38-
<td data-label="Date">
39-
<FormattedTime date={release.currentStart} />
40-
</td>
41-
<td data-label="Date">
42-
<FormattedTime date={release.releaseDate} />
43-
</td>
44-
<td data-label="Status">
45-
<Badge kind={BADGE_KIND_MAP[release.status]} size="small">
46-
{release.status}
47-
{release.status === 'End-of-life' ? ' (EoL)' : ''}
48-
</Badge>
49-
</td>
50-
<td>
51-
<DetailsButton data={release} />
52-
</td>
27+
<ModalProvider Component={ReleaseModal}>
28+
<table id="tbVersions">
29+
<thead>
30+
<tr>
31+
<th>{t('components.downloadReleasesTable.version')}</th>
32+
<th>{t('components.downloadReleasesTable.codename')}</th>
33+
<th>{t('components.downloadReleasesTable.firstReleased')}</th>
34+
<th>{t('components.downloadReleasesTable.lastUpdated')}</th>
35+
<th>{t('components.downloadReleasesTable.status')}</th>
36+
<th></th>
5337
</tr>
54-
))}
55-
</tbody>
56-
</table>
38+
</thead>
39+
<tbody>
40+
{releaseData.map(release => (
41+
<tr key={release.major}>
42+
<td data-label="Version">v{release.major}</td>
43+
<td data-label="LTS">{release.codename || '-'}</td>
44+
<td data-label="Date">
45+
<FormattedTime date={release.currentStart} />
46+
</td>
47+
<td data-label="Date">
48+
<FormattedTime date={release.releaseDate} />
49+
</td>
50+
<td data-label="Status">
51+
<Badge kind={BADGE_KIND_MAP[release.status]} size="small">
52+
{release.status}
53+
{release.status === 'End-of-life' ? ' (EoL)' : ''}
54+
</Badge>
55+
</td>
56+
<td>
57+
<DetailsButton data={release} />
58+
</td>
59+
</tr>
60+
))}
61+
</tbody>
62+
</table>
63+
</ModalProvider>
5764
);
5865
};
5966

‎apps/site/components/EOL/EOLReleaseTable/index.tsx‎

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { useTranslations } from 'next-intl';
24
import type { FC } from 'react';
35

@@ -7,6 +9,9 @@ import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
79
import provideReleaseData from '#site/next-data/providers/releaseData';
810
import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
911
import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
12+
import { ModalProvider } from '#site/providers/modalProvider';
13+
14+
import EOLModal from '../EOLModal';
1015

1116
const EOLReleaseTable: FC = () => {
1217
const releaseData = provideReleaseData();
@@ -18,44 +23,47 @@ const EOLReleaseTable: FC = () => {
1823
const t = useTranslations();
1924

2025
return (
21-
<table id="tbVulnerabilities">
22-
<thead>
23-
<tr>
24-
<th>
25-
{t('components.eolTable.version')} (
26-
{t('components.eolTable.codename')})
27-
</th>
28-
<th>{t('components.eolTable.lastUpdated')}</th>
29-
<th>{t('components.eolTable.vulnerabilities')}</th>
30-
<th>{t('components.eolTable.details')}</th>
31-
</tr>
32-
</thead>
33-
<tbody>
34-
{eolReleases.map(release => (
35-
<tr key={release.major}>
36-
<td data-label="Version">
37-
v{release.major} {release.codename ? `(${release.codename})` : ''}
38-
</td>
39-
<td data-label="Date">
40-
<FormattedTime date={release.releaseDate} />
41-
</td>
42-
<td>
43-
<VulnerabilityChips
44-
vulnerabilities={vulnerabilities[release.major]}
45-
/>
46-
</td>
47-
<td>
48-
<DetailsButton
49-
data={{
50-
release: release,
51-
vulnerabilities: vulnerabilities[release.major],
52-
}}
53-
/>
54-
</td>
26+
<ModalProvider Component={EOLModal}>
27+
<table id="tbVulnerabilities">
28+
<thead>
29+
<tr>
30+
<th>
31+
{t('components.eolTable.version')} (
32+
{t('components.eolTable.codename')})
33+
</th>
34+
<th>{t('components.eolTable.lastUpdated')}</th>
35+
<th>{t('components.eolTable.vulnerabilities')}</th>
36+
<th>{t('components.eolTable.details')}</th>
5537
</tr>
56-
))}
57-
</tbody>
58-
</table>
38+
</thead>
39+
<tbody>
40+
{eolReleases.map(release => (
41+
<tr key={release.major}>
42+
<td data-label="Version">
43+
v{release.major}{' '}
44+
{release.codename ? `(${release.codename})` : ''}
45+
</td>
46+
<td data-label="Date">
47+
<FormattedTime date={release.releaseDate} />
48+
</td>
49+
<td>
50+
<VulnerabilityChips
51+
vulnerabilities={vulnerabilities[release.major]}
52+
/>
53+
</td>
54+
<td>
55+
<DetailsButton
56+
data={{
57+
release: release,
58+
vulnerabilities: vulnerabilities[release.major],
59+
}}
60+
/>
61+
</td>
62+
</tr>
63+
))}
64+
</tbody>
65+
</table>
66+
</ModalProvider>
5967
);
6068
};
6169

‎apps/site/components/withLayout.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import DownloadLayout from '#site/layouts/Download';
88
import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop';
99
import LearnLayout from '#site/layouts/Learn';
1010
import PostLayout from '#site/layouts/Post';
11-
import { ModalProvider } from '#site/providers/modalProvider';
12-
import type { Layouts, ModalType } from '#site/types';
11+
import type { Layouts } from '#site/types';
1312

1413
const layouts = {
1514
about: AboutLayout,
@@ -24,24 +23,11 @@ const layouts = {
2423

2524
type WithLayoutProps<L = Layouts> = PropsWithChildren<{
2625
layout: L;
27-
modal?: ModalType;
2826
}>;
2927

30-
const WithLayout: FC<WithLayoutProps<Layouts>> = ({
31-
layout,
32-
children,
33-
modal,
34-
}) => {
28+
const WithLayout: FC<WithLayoutProps<Layouts>> = ({ layout, children }) => {
3529
const LayoutComponent = layouts[layout] ?? DefaultLayout;
3630

37-
if (modal) {
38-
return (
39-
<ModalProvider type={modal}>
40-
<LayoutComponent>{children}</LayoutComponent>
41-
</ModalProvider>
42-
);
43-
}
44-
4531
return <LayoutComponent>{children}</LayoutComponent>;
4632
};
4733

‎apps/site/pages/en/about/previous-releases.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: Node.js Releases
33
layout: about
4-
modal: release
54
---
65

76
# Node.js Releases

‎apps/site/pages/en/eol.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
title: End-Of-Life
33
layout: article
4-
modal: eol
54
---
65

76
# End-Of-Life (EOL)

‎apps/site/providers/modalProvider.tsx‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
11
'use client';
22

3-
import type { FC, ComponentType } from 'react';
43
import { createContext, useState } from 'react';
4+
import type { FC, ComponentType, PropsWithChildren } from 'react';
55

6-
import ReleaseModal from '#site/components/Downloads/ReleaseModal';
7-
import EOLModal from '#site/components/EOL/EOLModal';
8-
import type {
9-
ModalContextType,
10-
ModalProps,
11-
ModalProviderProps,
12-
ModalType,
13-
} from '#site/types/modal';
6+
import type { ModalContextType, ModalProps } from '#site/types/modal';
147

158
export const ModalContext = createContext<ModalContextType>({
169
data: null,
1710
openModal: () => {},
1811
closeModal: () => {},
1912
});
2013

21-
const MODALS = {
22-
release: ReleaseModal,
23-
eol: EOLModal,
24-
} satisfies Record<ModalType, ComponentType<ModalProps>>;
25-
26-
export const ModalProvider: FC<ModalProviderProps> = ({ type, children }) => {
14+
export const ModalProvider: FC<
15+
PropsWithChildren<{ Component: ComponentType<ModalProps> }>
16+
> = ({ Component, children }) => {
2717
const [data, setData] = useState<unknown>(null);
28-
const ModalComponent = MODALS[type];
2918

3019
const openModal = (newData: unknown) => {
3120
setData(newData);
@@ -39,7 +28,7 @@ export const ModalProvider: FC<ModalProviderProps> = ({ type, children }) => {
3928
<ModalContext.Provider value={{ data, openModal, closeModal }}>
4029
{children}
4130
{!!data && (
42-
<ModalComponent open={!!data} closeModal={closeModal} data={data} />
31+
<Component open={!!data} closeModal={closeModal} data={data} />
4332
)}
4433
</ModalContext.Provider>
4534
);

‎apps/site/types/modal.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import type { PropsWithChildren } from 'react';
2-
31
export type ModalProps = {
42
open: boolean;
53
closeModal: () => void;
@@ -11,9 +9,3 @@ export type ModalContextType = {
119
openModal: (data: unknown) => void;
1210
closeModal: () => void;
1311
};
14-
15-
export type ModalType = 'release' | 'eol';
16-
17-
export type ModalProviderProps = PropsWithChildren<{
18-
type: ModalType;
19-
}>;

0 commit comments

Comments
 (0)