Skip to content

Commit

Permalink
chore(web): Move organization subpage content into separate component (…
Browse files Browse the repository at this point in the history 
…#16915)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@RunarVestmann @kodiakhq
RunarVestmann and kodiakhq[bot] authored Nov 18, 2024
1 parent a8e03f5 commit 6e102a0
Showing 1 changed file with 156 additions and 129 deletions.
285 changes: 156 additions & 129 deletions apps/web/screens/Organization/SubPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Locale } from '@island.is/shared/types'
import { useRouter } from 'next/router'
import { ParsedUrlQuery } from 'querystring'

Expand All @@ -14,6 +13,7 @@ import {
Stack,
Text,
} from '@island.is/island-ui/core'
import { Locale } from '@island.is/shared/types'
import {
getThemeConfig,
OrganizationWrapper,
Expand Down Expand Up @@ -60,46 +60,13 @@ export interface SubPageProps {
customContentfulIds?: (string | undefined)[]
}

const SubPage: Screen<SubPageProps> = ({
organizationPage,
const SubPageContent = ({
subpage,
namespace,
locale,
customContent,
customBreadcrumbItems,
customContentfulIds,
backLink,
}) => {
const router = useRouter()
const { activeLocale } = useI18n()

organizationPage,
}: Pick<SubPageProps, 'subpage' | 'organizationPage' | 'namespace'>) => {
const n = useNamespace(namespace)
const { linkResolver } = useLinkResolver()

const contentfulIds = customContentfulIds
? customContentfulIds
: [organizationPage?.id, subpage?.id]

useContentfulId(...contentfulIds)

const pathname = new URL(router.asPath, 'https://island.is').pathname
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
const navList: NavigationItem[] = organizationPage?.menuLinks.map(
({ primaryLink, childrenLinks }) => ({
title: primaryLink?.text,
href: primaryLink?.url,
active:
primaryLink?.url === pathname ||
childrenLinks.some((link) => link.url === pathname),
items: childrenLinks.map(({ text, url }) => ({
title: text,
href: url,
active: url === pathname,
})),
}),
)

const { activeLocale } = useI18n()
const content = (
<>
{subpage?.showTableOfContents && (
Expand Down Expand Up @@ -147,45 +114,8 @@ const SubPage: Screen<SubPageProps> = ({
</GridRow>
</>
)

return (
<OrganizationWrapper
showExternalLinks={true}
showReadSpeaker={false}
pageTitle={subpage?.title ?? ''}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
organizationPage={organizationPage}
fullWidthContent={true}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
pageFeaturedImage={
subpage?.featuredImage ?? organizationPage?.featuredImage
}
backLink={backLink}
breadcrumbItems={
customBreadcrumbItems
? customBreadcrumbItems
: [
{
title: 'Ísland.is',
href: linkResolver('homepage', [], locale).href,
},
{
title: organizationPage?.title ?? '',
href: linkResolver(
'organizationpage',
[organizationPage?.slug ?? ''],
locale,
).href,
},
]
}
navigationData={{
title: n('navigationTitle', 'Efnisyfirlit'),
items: navList,
}}
>
<>
<GridContainer>
<Box paddingTop={4}>
<GridRow>
Expand All @@ -199,62 +129,58 @@ const SubPage: Screen<SubPageProps> = ({
subpage?.links?.length ? '7/12' : '12/12',
]}
>
{customContent ? (
customContent
) : (
<>
<Box className="rs_read" marginBottom={2}>
<Text variant="h1" as="h1">
{subpage?.title}
</Text>
</Box>
<Box
display="flex"
alignItems="center"
columnGap={2}
rowGap={2}
marginBottom={3}
flexWrap="wrap"
>
<Webreader
marginTop={0}
marginBottom={0}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
readId={null}
readClass="rs_read"
<>
<Box className="rs_read" marginBottom={2}>
<Text variant="h1" as="h1">
{subpage?.title}
</Text>
</Box>
<Box
display="flex"
alignItems="center"
columnGap={2}
rowGap={2}
marginBottom={3}
flexWrap="wrap"
>
<Webreader
marginTop={0}
marginBottom={0}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
readId={null}
readClass="rs_read"
/>
{subpage?.signLanguageVideo?.url && (
<SignLanguageButton
videoUrl={subpage.signLanguageVideo.url}
videoThumbnailImageUrl={
subpage.signLanguageVideo.thumbnailImageUrl
}
content={
<>
<Box className="rs_read" marginBottom={2}>
<Text variant="h2">{subpage.title}</Text>
</Box>
{content}
{renderSlices(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
subpage.slices,
subpage.sliceCustomRenderer,
subpage.sliceExtraText,
namespace,
organizationPage?.slug,
)}
</>
}
/>
{subpage?.signLanguageVideo?.url && (
<SignLanguageButton
videoUrl={subpage.signLanguageVideo.url}
videoThumbnailImageUrl={
subpage.signLanguageVideo.thumbnailImageUrl
}
content={
<>
<Box className="rs_read" marginBottom={2}>
<Text variant="h2">{subpage.title}</Text>
</Box>
{content}
{renderSlices(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
subpage.slices,
subpage.sliceCustomRenderer,
subpage.sliceExtraText,
namespace,
organizationPage?.slug,
)}
</>
}
/>
)}
</Box>
</>
)}
)}
</Box>
</>
</GridColumn>
</GridRow>
{!customContent && content}
{content}
</GridContainer>
</GridColumn>
</GridRow>
Expand All @@ -277,6 +203,107 @@ const SubPage: Screen<SubPageProps> = ({
organizationPage.slug,
)}
</Stack>
</>
)
}

const SubPage: Screen<SubPageProps> = ({
organizationPage,
subpage,
namespace,
locale,
customContent,
customBreadcrumbItems,
customContentfulIds,
backLink,
}) => {
const router = useRouter()

const n = useNamespace(namespace)
const { linkResolver } = useLinkResolver()

const contentfulIds = customContentfulIds
? customContentfulIds
: [organizationPage?.id, subpage?.id]

useContentfulId(...contentfulIds)

const pathname = new URL(router.asPath, 'https://island.is').pathname
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
const navList: NavigationItem[] = organizationPage?.menuLinks.map(
({ primaryLink, childrenLinks }) => ({
title: primaryLink?.text,
href: primaryLink?.url,
active:
primaryLink?.url === pathname ||
childrenLinks.some((link) => link.url === pathname),
items: childrenLinks.map(({ text, url }) => ({
title: text,
href: url,
active: url === pathname,
})),
}),
)

return (
<OrganizationWrapper
showExternalLinks={true}
showReadSpeaker={false}
pageTitle={subpage?.title ?? ''}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
organizationPage={organizationPage}
fullWidthContent={true}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore make web strict
pageFeaturedImage={
subpage?.featuredImage ?? organizationPage?.featuredImage
}
backLink={backLink}
breadcrumbItems={
customBreadcrumbItems
? customBreadcrumbItems
: [
{
title: 'Ísland.is',
href: linkResolver('homepage', [], locale).href,
},
{
title: organizationPage?.title ?? '',
href: linkResolver(
'organizationpage',
[organizationPage?.slug ?? ''],
locale,
).href,
},
]
}
navigationData={{
title: n('navigationTitle', 'Efnisyfirlit'),
items: navList,
}}
>
{customContent ? (
<GridContainer>
<Box paddingTop={4}>
<GridRow>
<GridColumn
span={['9/9', '9/9', '7/9']}
offset={['0', '0', '1/9']}
>
{customContent}
</GridColumn>
</GridRow>
</Box>
</GridContainer>
) : (
<SubPageContent
subpage={subpage}
namespace={namespace}
organizationPage={organizationPage}
/>
)}
</OrganizationWrapper>
)
}
Expand Down

0 comments on commit 6e102a0

Please sign in to comment.