Merge branch 'design_tokens_integration_research' of https://github.c…

…om/island-is/island.is into design_tokens_integration_research
island-is · Nov 26, 2024 · 3be297d · 3be297d
2 parents 18638d2 + 0bebc03
commit 3be297d
Show file tree

Hide file tree

Showing 15 changed files with 656 additions and 91 deletions.
diff --git a/apps/web/pages/s/[...slugs]/index.tsx b/apps/web/pages/s/[...slugs]/index.tsx
@@ -31,6 +31,9 @@ import PublishedMaterial, {
 import StandaloneHome, {
   type StandaloneHomeProps,
 } from '@island.is/web/screens/Organization/Standalone/Home'
+import StandaloneParentSubpage, {
+  StandaloneParentSubpageProps,
+} from '@island.is/web/screens/Organization/Standalone/ParentSubpage'
 import SubPage, {
   type SubPageProps,
 } from '@island.is/web/screens/Organization/SubPage'
@@ -42,6 +45,7 @@ import { getServerSidePropsWrapper } from '@island.is/web/utils/getServerSidePro
 enum PageType {
   FRONTPAGE = 'frontpage',
   STANDALONE_FRONTPAGE = 'standalone-frontpage',
+  STANDALONE_PARENT_SUBPAGE = 'standalone-parent-subpage',
   SUBPAGE = 'subpage',
   ALL_NEWS = 'news',
   PUBLISHED_MATERIAL = 'published-material',
@@ -55,6 +59,9 @@ enum PageType {
 const pageMap: Record<PageType, FC<any>> = {
   [PageType.FRONTPAGE]: (props) => <Home {...props} />,
   [PageType.STANDALONE_FRONTPAGE]: (props) => <StandaloneHome {...props} />,
+  [PageType.STANDALONE_PARENT_SUBPAGE]: (props) => (
+    <StandaloneParentSubpage {...props} />
+  ),
   [PageType.SUBPAGE]: (props) => <SubPage {...props} />,
   [PageType.ALL_NEWS]: (props) => <OrganizationNewsList {...props} />,
   [PageType.PUBLISHED_MATERIAL]: (props) => <PublishedMaterial {...props} />,
@@ -79,6 +86,10 @@ interface Props {
         type: PageType.STANDALONE_FRONTPAGE
         props: StandaloneHomeProps
       }
+    | {
+        type: PageType.STANDALONE_PARENT_SUBPAGE
+        props: StandaloneParentSubpageProps
+      }
     | {
         type: PageType.SUBPAGE
         props: {
@@ -135,40 +146,40 @@ Component.getProps = async (context) => {
   const slugs = context.query.slugs as string[]
   const locale = context.locale || 'is'
 
-  // Frontpage
-  if (slugs.length === 1) {
-    const {
-      data: { getOrganizationPage: organizationPage },
-    } = await context.apolloClient.query<Query, QueryGetOrganizationPageArgs>({
-      query: GET_ORGANIZATION_PAGE_QUERY,
-      variables: {
-        input: {
-          slug: slugs[0],
-          lang: locale,
-        },
+  const {
+    data: { getOrganizationPage: organizationPage },
+  } = await context.apolloClient.query<Query, QueryGetOrganizationPageArgs>({
+    query: GET_ORGANIZATION_PAGE_QUERY,
+    variables: {
+      input: {
+        slug: slugs[0],
+        lang: locale,
       },
-    })
+    },
+  })
 
-    if (!organizationPage) {
-      throw new CustomNextError(404)
-    }
+  if (!organizationPage) {
+    throw new CustomNextError(404, 'Organization page was not found')
+  }
+
+  const modifiedContext = { ...context, organizationPage }
+
+  const STANDALONE_THEME = 'standalone'
 
-    if (organizationPage.theme === 'standalone') {
+  if (slugs.length === 1) {
+    if (organizationPage.theme === STANDALONE_THEME) {
       return {
         page: {
           type: PageType.STANDALONE_FRONTPAGE,
-          props: await StandaloneHome.getProps({
-            ...context,
-            organizationPage,
-          }),
+          props: await StandaloneHome.getProps(modifiedContext),
         },
       }
     }
 
     return {
       page: {
         type: PageType.FRONTPAGE,
-        props: await Home.getProps({ ...context, organizationPage }),
+        props: await Home.getProps(modifiedContext),
       },
     }
   }
@@ -179,23 +190,23 @@ Component.getProps = async (context) => {
         return {
           page: {
             type: PageType.ALL_NEWS,
-            props: await OrganizationNewsList.getProps(context),
+            props: await OrganizationNewsList.getProps(modifiedContext),
           },
         }
       }
       if (slugs[1] === 'events') {
         return {
           page: {
             type: PageType.ALL_EVENTS,
-            props: await OrganizationEventList.getProps(context),
+            props: await OrganizationEventList.getProps(modifiedContext),
           },
         }
       }
       if (slugs[1] === 'published-material') {
         return {
           page: {
             type: PageType.PUBLISHED_MATERIAL,
-            props: await PublishedMaterial.getProps(context),
+            props: await PublishedMaterial.getProps(modifiedContext),
           },
         }
       }
@@ -204,34 +215,41 @@ Component.getProps = async (context) => {
         return {
           page: {
             type: PageType.ALL_NEWS,
-            props: await OrganizationNewsList.getProps(context),
+            props: await OrganizationNewsList.getProps(modifiedContext),
           },
         }
       }
       if (slugs[1] === 'vidburdir') {
         return {
           page: {
             type: PageType.ALL_EVENTS,
-            props: await OrganizationEventList.getProps(context),
+            props: await OrganizationEventList.getProps(modifiedContext),
           },
         }
       }
       if (slugs[1] === 'utgefid-efni') {
         return {
           page: {
             type: PageType.PUBLISHED_MATERIAL,
-            props: await PublishedMaterial.getProps(context),
+            props: await PublishedMaterial.getProps(modifiedContext),
           },
         }
       }
     }
 
-    // Subpage
-    const props = await SubPage.getProps(context)
+    if (organizationPage.theme === STANDALONE_THEME) {
+      return {
+        page: {
+          type: PageType.STANDALONE_PARENT_SUBPAGE,
+          props: await StandaloneParentSubpage.getProps(modifiedContext),
+        },
+      }
+    }
+
     return {
       page: {
         type: PageType.SUBPAGE,
-        props,
+        props: await SubPage.getProps(modifiedContext),
       },
     }
   }
@@ -242,15 +260,15 @@ Component.getProps = async (context) => {
         return {
           page: {
             type: PageType.NEWS_DETAILS,
-            props: await OrganizationNewsArticle.getProps(context),
+            props: await OrganizationNewsArticle.getProps(modifiedContext),
           },
         }
       }
       if (slugs[1] === 'events') {
         return {
           page: {
             type: PageType.EVENT_DETAILS,
-            props: await OrganizationEventArticle.getProps(context),
+            props: await OrganizationEventArticle.getProps(modifiedContext),
           },
         }
       }
@@ -259,24 +277,35 @@ Component.getProps = async (context) => {
         return {
           page: {
             type: PageType.NEWS_DETAILS,
-            props: await OrganizationNewsArticle.getProps(context),
+            props: await OrganizationNewsArticle.getProps(modifiedContext),
           },
         }
       }
       if (slugs[1] === 'vidburdir') {
         return {
           page: {
             type: PageType.EVENT_DETAILS,
-            props: await OrganizationEventArticle.getProps(context),
+            props: await OrganizationEventArticle.getProps(modifiedContext),
           },
         }
       }
     }
 
+    if (organizationPage.theme === STANDALONE_THEME) {
+      return {
+        page: {
+          type: PageType.STANDALONE_PARENT_SUBPAGE,
+          props: await StandaloneParentSubpage.getProps(modifiedContext),
+        },
+      }
+    }
+
     return {
       page: {
         type: PageType.GENERIC_LIST_ITEM,
-        props: await OrganizationSubPageGenericListItem.getProps(context),
+        props: await OrganizationSubPageGenericListItem.getProps(
+          modifiedContext,
+        ),
       },
     }
   }

diff --git a/apps/web/screens/GenericList/OrganizationSubPageGenericListItem.tsx b/apps/web/screens/GenericList/OrganizationSubPageGenericListItem.tsx
@@ -1,10 +1,11 @@
 import { useMemo } from 'react'
 import { useRouter } from 'next/router'
 
+import { Query } from '@island.is/web/graphql/schema'
 import { useLinkResolver } from '@island.is/web/hooks'
 import { useI18n } from '@island.is/web/i18n'
-import { type LayoutProps, withMainLayout } from '@island.is/web/layouts/main'
-import { Screen } from '@island.is/web/types'
+import { type LayoutProps } from '@island.is/web/layouts/main'
+import { Screen, ScreenContext } from '@island.is/web/types'
 
 import SubPage, { type SubPageProps } from '../Organization/SubPage'
 import GenericListItemPage, {
@@ -19,8 +20,13 @@ export interface OrganizationSubPageGenericListItemProps {
   genericListItemProps: GenericListItemPageProps
 }
 
+type OrganizationSubPageGenericListItemScreenContext = ScreenContext & {
+  organizationPage?: Query['getOrganizationPage']
+}
+
 const OrganizationSubPageGenericListItem: Screen<
-  OrganizationSubPageGenericListItemProps
+  OrganizationSubPageGenericListItemProps,
+  OrganizationSubPageGenericListItemScreenContext
 > = (props) => {
   const { organizationPage, subpage } = props.parentProps.componentProps
   const router = useRouter()

diff --git a/apps/web/screens/Organization/OrganizationEvents/OrganizationEventArticle.tsx b/apps/web/screens/Organization/OrganizationEvents/OrganizationEventArticle.tsx
@@ -41,7 +41,7 @@ import { useWindowSize } from '@island.is/web/hooks/useViewport'
 import { useI18n } from '@island.is/web/i18n'
 import { useDateUtils } from '@island.is/web/i18n/useDateUtils'
 import { withMainLayout } from '@island.is/web/layouts/main'
-import type { Screen } from '@island.is/web/types'
+import type { Screen, ScreenContext } from '@island.is/web/types'
 import { CustomNextError } from '@island.is/web/units/errors'
 import { extractNamespaceFromOrganization } from '@island.is/web/utils/extractNamespaceFromOrganization'
 import { getOrganizationSidebarNavigationItems } from '@island.is/web/utils/organization'
@@ -141,12 +141,14 @@ export interface OrganizationEventArticleProps {
   locale: Locale
 }
 
-const OrganizationEventArticle: Screen<OrganizationEventArticleProps> = ({
-  organizationPage,
-  event,
-  namespace,
-  locale,
-}) => {
+type OrganizationEventArticleScreenContext = ScreenContext & {
+  organizationPage?: Query['getOrganizationPage']
+}
+
+const OrganizationEventArticle: Screen<
+  OrganizationEventArticleProps,
+  OrganizationEventArticleScreenContext
+> = ({ organizationPage, event, namespace, locale }) => {
   const n = useNamespace(namespace)
   const router = useRouter()
 
@@ -285,19 +287,26 @@ const OrganizationEventArticle: Screen<OrganizationEventArticleProps> = ({
     </>
   )
 }
-OrganizationEventArticle.getProps = async ({ apolloClient, query, locale }) => {
+OrganizationEventArticle.getProps = async ({
+  apolloClient,
+  query,
+  locale,
+  organizationPage: _organizationPage,
+}) => {
   const [organizationPageSlug, _, eventSlug] = query.slugs as string[]
   const [organizationPageResponse, eventResponse, namespace] =
     await Promise.all([
-      apolloClient.query<Query, QueryGetOrganizationPageArgs>({
-        query: GET_ORGANIZATION_PAGE_QUERY,
-        variables: {
-          input: {
-            slug: organizationPageSlug,
-            lang: locale as Locale,
-          },
-        },
-      }),
+      !_organizationPage
+        ? apolloClient.query<Query, QueryGetOrganizationPageArgs>({
+            query: GET_ORGANIZATION_PAGE_QUERY,
+            variables: {
+              input: {
+                slug: organizationPageSlug,
+                lang: locale as Locale,
+              },
+            },
+          })
+        : { data: { getOrganizationPage: _organizationPage } },
       apolloClient.query<Query, QueryGetSingleEventArgs>({
         query: GET_SINGLE_EVENT_QUERY,
         variables: {

diff --git a/apps/web/screens/Organization/OrganizationNews/OrganizationNewsArticle.tsx b/apps/web/screens/Organization/OrganizationNews/OrganizationNewsArticle.tsx
@@ -28,7 +28,7 @@ import {
   GET_ORGANIZATION_PAGE_QUERY,
   GET_SINGLE_NEWS_ITEM_QUERY,
 } from '@island.is/web/screens/queries'
-import { Screen } from '@island.is/web/types'
+import type { Screen, ScreenContext } from '@island.is/web/types'
 import { CustomNextError } from '@island.is/web/units/errors'
 import { extractNamespaceFromOrganization } from '@island.is/web/utils/extractNamespaceFromOrganization'
 
@@ -39,12 +39,14 @@ export interface OrganizationNewsArticleProps {
   locale: Locale
 }
 
-const OrganizationNewsArticle: Screen<OrganizationNewsArticleProps> = ({
-  newsItem,
-  namespace,
-  organizationPage,
-  locale,
-}) => {
+type OrganizationNewsArticleScreenContext = ScreenContext & {
+  organizationPage?: Query['getOrganizationPage']
+}
+
+const OrganizationNewsArticle: Screen<
+  OrganizationNewsArticleProps,
+  OrganizationNewsArticleScreenContext
+> = ({ newsItem, namespace, organizationPage, locale }) => {
   const router = useRouter()
   const { linkResolver } = useLinkResolver()
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -163,22 +165,27 @@ const OrganizationNewsArticle: Screen<OrganizationNewsArticleProps> = ({
   )
 }
 
-OrganizationNewsArticle.getProps = async ({ apolloClient, locale, query }) => {
+OrganizationNewsArticle.getProps = async ({
+  apolloClient,
+  locale,
+  query,
+  organizationPage: _organizationPage,
+}) => {
   const [organizationPageSlug, _, newsSlug] = query.slugs as string[]
 
-  const organizationPage = (
-    await Promise.resolve(
-      apolloClient.query<Query, QueryGetOrganizationPageArgs>({
-        query: GET_ORGANIZATION_PAGE_QUERY,
-        variables: {
-          input: {
-            slug: organizationPageSlug,
-            lang: locale as Locale,
+  const organizationPage = !_organizationPage
+    ? (
+        await apolloClient.query<Query, QueryGetOrganizationPageArgs>({
+          query: GET_ORGANIZATION_PAGE_QUERY,
+          variables: {
+            input: {
+              slug: organizationPageSlug,
+              lang: locale as Locale,
+            },
           },
-        },
-      }),
-    )
-  ).data?.getOrganizationPage
+        })
+      ).data?.getOrganizationPage
+    : _organizationPage
 
   if (!organizationPage) {
     throw new CustomNextError(