Skip to content

Commit 0e9218f

Browse files
RunarVestmannRunarVestmann
committed
Move subpage content into separate component
1 parent d89ae9c commit 0e9218f

File tree

1 file changed

+156
-129
lines changed

1 file changed

+156
-129
lines changed

‎apps/web/screens/Organization/SubPage.tsx

+156-129
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Locale } from '@island.is/shared/types'
21
import { useRouter } from 'next/router'
32
import { ParsedUrlQuery } from 'querystring'
43

@@ -14,6 +13,7 @@ import {
1413
Stack,
1514
Text,
1615
} from '@island.is/island-ui/core'
16+
import { Locale } from '@island.is/shared/types'
1717
import {
1818
getThemeConfig,
1919
OrganizationWrapper,
@@ -60,46 +60,13 @@ export interface SubPageProps {
6060
customContentfulIds?: (string | undefined)[]
6161
}
6262

63-
const SubPage: Screen<SubPageProps> = ({
64-
organizationPage,
63+
const SubPageContent = ({
6564
subpage,
6665
namespace,
67-
locale,
68-
customContent,
69-
customBreadcrumbItems,
70-
customContentfulIds,
71-
backLink,
72-
}) => {
73-
const router = useRouter()
74-
const { activeLocale } = useI18n()
75-
66+
organizationPage,
67+
}: Pick<SubPageProps, 'subpage' | 'organizationPage' | 'namespace'>) => {
7668
const n = useNamespace(namespace)
77-
const { linkResolver } = useLinkResolver()
78-
79-
const contentfulIds = customContentfulIds
80-
? customContentfulIds
81-
: [organizationPage?.id, subpage?.id]
82-
83-
useContentfulId(...contentfulIds)
84-
85-
const pathname = new URL(router.asPath, 'https://island.is').pathname
86-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
87-
// @ts-ignore make web strict
88-
const navList: NavigationItem[] = organizationPage?.menuLinks.map(
89-
({ primaryLink, childrenLinks }) => ({
90-
title: primaryLink?.text,
91-
href: primaryLink?.url,
92-
active:
93-
primaryLink?.url === pathname ||
94-
childrenLinks.some((link) => link.url === pathname),
95-
items: childrenLinks.map(({ text, url }) => ({
96-
title: text,
97-
href: url,
98-
active: url === pathname,
99-
})),
100-
}),
101-
)
102-
69+
const { activeLocale } = useI18n()
10370
const content = (
10471
<>
10572
{subpage?.showTableOfContents && (
@@ -147,45 +114,8 @@ const SubPage: Screen<SubPageProps> = ({
147114
</GridRow>
148115
</>
149116
)
150-
151117
return (
152-
<OrganizationWrapper
153-
showExternalLinks={true}
154-
showReadSpeaker={false}
155-
pageTitle={subpage?.title ?? ''}
156-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
157-
// @ts-ignore make web strict
158-
organizationPage={organizationPage}
159-
fullWidthContent={true}
160-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
161-
// @ts-ignore make web strict
162-
pageFeaturedImage={
163-
subpage?.featuredImage ?? organizationPage?.featuredImage
164-
}
165-
backLink={backLink}
166-
breadcrumbItems={
167-
customBreadcrumbItems
168-
? customBreadcrumbItems
169-
: [
170-
{
171-
title: 'Ísland.is',
172-
href: linkResolver('homepage', [], locale).href,
173-
},
174-
{
175-
title: organizationPage?.title ?? '',
176-
href: linkResolver(
177-
'organizationpage',
178-
[organizationPage?.slug ?? ''],
179-
locale,
180-
).href,
181-
},
182-
]
183-
}
184-
navigationData={{
185-
title: n('navigationTitle', 'Efnisyfirlit'),
186-
items: navList,
187-
}}
188-
>
118+
<>
189119
<GridContainer>
190120
<Box paddingTop={4}>
191121
<GridRow>
@@ -199,62 +129,58 @@ const SubPage: Screen<SubPageProps> = ({
199129
subpage?.links?.length ? '7/12' : '12/12',
200130
]}
201131
>
202-
{customContent ? (
203-
customContent
204-
) : (
205-
<>
206-
<Box className="rs_read" marginBottom={2}>
207-
<Text variant="h1" as="h1">
208-
{subpage?.title}
209-
</Text>
210-
</Box>
211-
<Box
212-
display="flex"
213-
alignItems="center"
214-
columnGap={2}
215-
rowGap={2}
216-
marginBottom={3}
217-
flexWrap="wrap"
218-
>
219-
<Webreader
220-
marginTop={0}
221-
marginBottom={0}
222-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
223-
// @ts-ignore make web strict
224-
readId={null}
225-
readClass="rs_read"
132+
<>
133+
<Box className="rs_read" marginBottom={2}>
134+
<Text variant="h1" as="h1">
135+
{subpage?.title}
136+
</Text>
137+
</Box>
138+
<Box
139+
display="flex"
140+
alignItems="center"
141+
columnGap={2}
142+
rowGap={2}
143+
marginBottom={3}
144+
flexWrap="wrap"
145+
>
146+
<Webreader
147+
marginTop={0}
148+
marginBottom={0}
149+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
150+
// @ts-ignore make web strict
151+
readId={null}
152+
readClass="rs_read"
153+
/>
154+
{subpage?.signLanguageVideo?.url && (
155+
<SignLanguageButton
156+
videoUrl={subpage.signLanguageVideo.url}
157+
videoThumbnailImageUrl={
158+
subpage.signLanguageVideo.thumbnailImageUrl
159+
}
160+
content={
161+
<>
162+
<Box className="rs_read" marginBottom={2}>
163+
<Text variant="h2">{subpage.title}</Text>
164+
</Box>
165+
{content}
166+
{renderSlices(
167+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
168+
// @ts-ignore make web strict
169+
subpage.slices,
170+
subpage.sliceCustomRenderer,
171+
subpage.sliceExtraText,
172+
namespace,
173+
organizationPage?.slug,
174+
)}
175+
</>
176+
}
226177
/>
227-
{subpage?.signLanguageVideo?.url && (
228-
<SignLanguageButton
229-
videoUrl={subpage.signLanguageVideo.url}
230-
videoThumbnailImageUrl={
231-
subpage.signLanguageVideo.thumbnailImageUrl
232-
}
233-
content={
234-
<>
235-
<Box className="rs_read" marginBottom={2}>
236-
<Text variant="h2">{subpage.title}</Text>
237-
</Box>
238-
{content}
239-
{renderSlices(
240-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
241-
// @ts-ignore make web strict
242-
subpage.slices,
243-
subpage.sliceCustomRenderer,
244-
subpage.sliceExtraText,
245-
namespace,
246-
organizationPage?.slug,
247-
)}
248-
</>
249-
}
250-
/>
251-
)}
252-
</Box>
253-
</>
254-
)}
178+
)}
179+
</Box>
180+
</>
255181
</GridColumn>
256182
</GridRow>
257-
{!customContent && content}
183+
{content}
258184
</GridContainer>
259185
</GridColumn>
260186
</GridRow>
@@ -277,6 +203,107 @@ const SubPage: Screen<SubPageProps> = ({
277203
organizationPage.slug,
278204
)}
279205
</Stack>
206+
</>
207+
)
208+
}
209+
210+
const SubPage: Screen<SubPageProps> = ({
211+
organizationPage,
212+
subpage,
213+
namespace,
214+
locale,
215+
customContent,
216+
customBreadcrumbItems,
217+
customContentfulIds,
218+
backLink,
219+
}) => {
220+
const router = useRouter()
221+
222+
const n = useNamespace(namespace)
223+
const { linkResolver } = useLinkResolver()
224+
225+
const contentfulIds = customContentfulIds
226+
? customContentfulIds
227+
: [organizationPage?.id, subpage?.id]
228+
229+
useContentfulId(...contentfulIds)
230+
231+
const pathname = new URL(router.asPath, 'https://island.is').pathname
232+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
233+
// @ts-ignore make web strict
234+
const navList: NavigationItem[] = organizationPage?.menuLinks.map(
235+
({ primaryLink, childrenLinks }) => ({
236+
title: primaryLink?.text,
237+
href: primaryLink?.url,
238+
active:
239+
primaryLink?.url === pathname ||
240+
childrenLinks.some((link) => link.url === pathname),
241+
items: childrenLinks.map(({ text, url }) => ({
242+
title: text,
243+
href: url,
244+
active: url === pathname,
245+
})),
246+
}),
247+
)
248+
249+
return (
250+
<OrganizationWrapper
251+
showExternalLinks={true}
252+
showReadSpeaker={false}
253+
pageTitle={subpage?.title ?? ''}
254+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
255+
// @ts-ignore make web strict
256+
organizationPage={organizationPage}
257+
fullWidthContent={true}
258+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
259+
// @ts-ignore make web strict
260+
pageFeaturedImage={
261+
subpage?.featuredImage ?? organizationPage?.featuredImage
262+
}
263+
backLink={backLink}
264+
breadcrumbItems={
265+
customBreadcrumbItems
266+
? customBreadcrumbItems
267+
: [
268+
{
269+
title: 'Ísland.is',
270+
href: linkResolver('homepage', [], locale).href,
271+
},
272+
{
273+
title: organizationPage?.title ?? '',
274+
href: linkResolver(
275+
'organizationpage',
276+
[organizationPage?.slug ?? ''],
277+
locale,
278+
).href,
279+
},
280+
]
281+
}
282+
navigationData={{
283+
title: n('navigationTitle', 'Efnisyfirlit'),
284+
items: navList,
285+
}}
286+
>
287+
{customContent ? (
288+
<GridContainer>
289+
<Box paddingTop={4}>
290+
<GridRow>
291+
<GridColumn
292+
span={['9/9', '9/9', '7/9']}
293+
offset={['0', '0', '1/9']}
294+
>
295+
{customContent}
296+
</GridColumn>
297+
</GridRow>
298+
</Box>
299+
</GridContainer>
300+
) : (
301+
<SubPageContent
302+
subpage={subpage}
303+
namespace={namespace}
304+
organizationPage={organizationPage}
305+
/>
306+
)}
280307
</OrganizationWrapper>
281308
)
282309
}

0 commit comments

Comments
 (0)