fix: landing page hero refactoring (#539)

City-of-Helsinki · Nov 14, 2023 · 5065889 · 5065889
1 parent 5c56baa
commit 5065889
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 163 deletions.
diff --git a/apps/events-helsinki/config/jest/index.test.tsx b/apps/events-helsinki/config/jest/index.test.tsx
@@ -3,7 +3,7 @@ import App from '../../src/pages/index';
 
 describe('App', () => {
   it.skip('renders without crashing', () => {
-    render(<App landingPage={undefined} page={undefined} locale={'fi'} />);
+    render(<App page={undefined} locale={'fi'} />);
     expect(screen.getByText('Hobbies-Helsinki')).toBeInTheDocument();
   });
 });
diff --git a/apps/events-helsinki/src/domain/search/landingPage/LandingPage.tsx b/apps/events-helsinki/src/domain/search/landingPage/LandingPage.tsx
@@ -1,23 +1,27 @@
 import { HeroComponent } from '@events-helsinki/components';
 import React from 'react';
-import type { PageContentLayoutProps } from 'react-helsinki-headless-cms';
+import type {
+  PageContentLayoutProps,
+  PageType,
+} from 'react-helsinki-headless-cms';
 import { PageSection, ContentContainer } from 'react-helsinki-headless-cms';
-import type { LandingPageQuery } from 'react-helsinki-headless-cms/apollo';
 
 import LandingPageSearch from '../landingPageSearch/LandingPageSearch';
 import styles from './landingPage.module.scss';
 
 export type LandingPageProps = {
-  landingPage?: LandingPageQuery['landingPage'];
+  page?: PageType;
 };
 
 export function LandingPageContentLayout({
-  landingPage,
+  page,
   collections,
 }: LandingPageProps & PageContentLayoutProps) {
-  const { title, description, heroLink } = landingPage?.translation || {};
-  const heroImage =
-    landingPage?.desktopImage?.edges?.[0]?.node?.mediaItemUrl ?? undefined;
+  const heroImage = page?.featuredImage?.node?.mediaItemUrl ?? '';
+  const heroLinkTitle = page?.hero?.link?.title ?? '';
+  const heroLinkUrl = page?.hero?.link?.url ?? '';
+  const title = page?.hero?.title ?? '';
+  const description = page?.hero?.description ?? '';
 
   const [firstCollection, ...restCollections] =
     (collections as React.ReactNode[]) ?? [];
@@ -27,27 +31,25 @@ export function LandingPageContentLayout({
     <div className={styles.layout}>
       <div className={styles.main}>
         <div className={styles.highlight}>
-          {landingPage?.translation && (
-            <PageSection
-              className={styles.sectionHero}
-              korosBottom
-              korosBottomClassName={styles.korosBottomHero}
-              backgroundImageUrl={heroImage}
-            >
-              <ContentContainer>
-                {heroLink && heroLink.length > 0 && (
-                  <HeroComponent
-                    title={title ?? ''}
-                    description={description ?? ''}
-                    cta={{
-                      label: heroLink[0] ?? '',
-                      href: heroLink[1] ?? '',
-                    }}
-                  />
-                )}
-              </ContentContainer>
-            </PageSection>
-          )}
+          <PageSection
+            className={styles.sectionHero}
+            korosBottom
+            korosBottomClassName={styles.korosBottomHero}
+            backgroundImageUrl={heroImage}
+          >
+            <ContentContainer>
+              {heroLinkTitle && heroLinkUrl && (
+                <HeroComponent
+                  title={title ?? ''}
+                  description={description ?? ''}
+                  cta={{
+                    label: heroLinkTitle ?? '',
+                    href: heroLinkUrl ?? '',
+                  }}
+                />
+              )}
+            </ContentContainer>
+          </PageSection>
           <PageSection className={styles.sectionSearch}>
             <ContentContainer>
               <div className={styles.sectionSearchContent}>

diff --git a/apps/events-helsinki/src/pages/index.tsx b/apps/events-helsinki/src/pages/index.tsx
@@ -22,24 +22,18 @@ import {
 import type {
   PageByTemplateQuery,
   PageByTemplateQueryVariables,
-  LandingPageQuery,
-  LandingPageQueryVariables,
-} from 'react-helsinki-headless-cms/apollo';
-import {
-  PageByTemplateDocument,
-  LandingPageDocument,
 } from 'react-helsinki-headless-cms/apollo';
+import { PageByTemplateDocument } from 'react-helsinki-headless-cms/apollo';
 import AppConfig from '../domain/app/AppConfig';
 import getEventsStaticProps from '../domain/app/getEventsStaticProps';
 import cmsHelper from '../domain/app/headlessCmsHelper';
 import serverSideTranslationsWithCommon from '../domain/i18n/serverSideTranslationsWithCommon';
 import { LandingPageContentLayout } from '../domain/search/landingPage/LandingPage';
 
 const HomePage: NextPage<{
-  landingPage: LandingPageQuery['landingPage'];
   page: PageType;
   locale: string;
-}> = ({ landingPage, page, locale }) => {
+}> = ({ page, locale }) => {
   const {
     utils: { getRoutedInternalHref },
   } = useConfig();
@@ -56,7 +50,6 @@ const HomePage: NextPage<{
             <RouteMeta origin={AppConfig.origin} />
             <HCRCPageContent
               page={page}
-              landingPage={landingPage}
               PageContentLayoutComponent={LandingPageContentLayout}
               collections={(page: PageType | ArticleType) =>
                 cmsHelper.getDefaultCollections(page, getRoutedInternalHref)
@@ -81,17 +74,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
   return getEventsStaticProps(context, async ({ apolloClient }) => {
     try {
       const language = getLanguageOrDefault(context.locale);
-      const { data: landingPageData } = await apolloClient.query<
-        LandingPageQuery,
-        LandingPageQueryVariables
-      >({
-        query: LandingPageDocument,
-        variables: {
-          id: 'root',
-          languageCode: getQlLanguage(language),
-        },
-        fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
-      });
 
       const { data: pageData } = await apolloClient.query<
         PageByTemplateQuery,
@@ -104,15 +86,13 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         },
         fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
       });
-      if (!pageData || !landingPageData) {
+      if (!pageData) {
         return {
           notFound: true,
         };
       }
       const page = pageData.pageByTemplate;
 
-      const landingPage = landingPageData.landingPage;
-
       logger.info(
         'pages/index.tsx',
         'getStaticProps',
@@ -125,7 +105,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
             'search',
             'event',
           ])),
-          landingPage: landingPage,
           page: page,
         },
       };
@@ -141,7 +120,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
             'search',
             'event',
           ])),
-          landingPage: null,
           page: null,
         },
       };

diff --git a/apps/hobbies-helsinki/config/jest/index.test.tsx b/apps/hobbies-helsinki/config/jest/index.test.tsx
@@ -3,7 +3,7 @@ import App from '../../src/pages/index';
 
 describe('App', () => {
   it.skip('renders without crashing', () => {
-    render(<App landingPage={undefined} page={undefined} locale={'fi'} />);
+    render(<App page={undefined} locale={'fi'} />);
     expect(screen.getByText('Hobbies-Helsinki')).toBeInTheDocument();
   });
 });
diff --git a/apps/hobbies-helsinki/src/domain/search/landingPage/LandingPage.tsx b/apps/hobbies-helsinki/src/domain/search/landingPage/LandingPage.tsx
@@ -1,23 +1,27 @@
 import { HeroComponent } from '@events-helsinki/components';
 import React from 'react';
-import type { PageContentLayoutProps } from 'react-helsinki-headless-cms';
+import type {
+  PageContentLayoutProps,
+  PageType,
+} from 'react-helsinki-headless-cms';
 import { PageSection, ContentContainer } from 'react-helsinki-headless-cms';
-import type { LandingPageQuery } from 'react-helsinki-headless-cms/apollo';
 
 import LandingPageSearch from '../landingPageSearch/LandingPageSearch';
 import styles from './landingPage.module.scss';
 
 export type LandingPageProps = {
-  landingPage?: LandingPageQuery['landingPage'];
+  page?: PageType;
 };
 
 export function LandingPageContentLayout({
-  landingPage,
+  page,
   collections,
 }: LandingPageProps & PageContentLayoutProps) {
-  const { title, description, heroLink } = landingPage?.translation || {};
-  const heroImage =
-    landingPage?.desktopImage?.edges?.[0]?.node?.mediaItemUrl ?? undefined;
+  const heroImage = page?.featuredImage?.node?.mediaItemUrl ?? '';
+  const heroLinkTitle = page?.hero?.link?.title ?? '';
+  const heroLinkUrl = page?.hero?.link?.url ?? '';
+  const title = page?.hero?.title ?? '';
+  const description = page?.hero?.description ?? '';
 
   const [firstCollection, ...restCollections] =
     (collections as React.ReactNode[]) ?? [];
@@ -27,27 +31,25 @@ export function LandingPageContentLayout({
     <div className={styles.layout}>
       <div className={styles.main}>
         <div className={styles.highlight}>
-          {landingPage?.translation && (
-            <PageSection
-              className={styles.sectionHero}
-              korosBottom
-              korosBottomClassName={styles.korosBottomHero}
-              backgroundImageUrl={heroImage}
-            >
-              <ContentContainer>
-                {heroLink && heroLink.length > 0 && (
-                  <HeroComponent
-                    title={title ?? ''}
-                    description={description ?? ''}
-                    cta={{
-                      label: heroLink[0] ?? '',
-                      href: heroLink[1] ?? '',
-                    }}
-                  />
-                )}
-              </ContentContainer>
-            </PageSection>
-          )}
+          <PageSection
+            className={styles.sectionHero}
+            korosBottom
+            korosBottomClassName={styles.korosBottomHero}
+            backgroundImageUrl={heroImage}
+          >
+            <ContentContainer>
+              {heroLinkTitle && heroLinkUrl && (
+                <HeroComponent
+                  title={title ?? ''}
+                  description={description ?? ''}
+                  cta={{
+                    label: heroLinkTitle ?? '',
+                    href: heroLinkUrl ?? '',
+                  }}
+                />
+              )}
+            </ContentContainer>
+          </PageSection>
           <PageSection className={styles.sectionSearch}>
             <ContentContainer>
               <div className={styles.sectionSearchContent}>

diff --git a/apps/hobbies-helsinki/src/pages/index.tsx b/apps/hobbies-helsinki/src/pages/index.tsx
@@ -22,24 +22,18 @@ import {
 import type {
   PageByTemplateQuery,
   PageByTemplateQueryVariables,
-  LandingPageQuery,
-  LandingPageQueryVariables,
-} from 'react-helsinki-headless-cms/apollo';
-import {
-  PageByTemplateDocument,
-  LandingPageDocument,
 } from 'react-helsinki-headless-cms/apollo';
+import { PageByTemplateDocument } from 'react-helsinki-headless-cms/apollo';
 import AppConfig from '../domain/app/AppConfig';
 import getHobbiesStaticProps from '../domain/app/getHobbiesStaticProps';
 import cmsHelper from '../domain/app/headlessCmsHelper';
 import serverSideTranslationsWithCommon from '../domain/i18n/serverSideTranslationsWithCommon';
 import { LandingPageContentLayout } from '../domain/search/landingPage/LandingPage';
 
 const HomePage: NextPage<{
-  landingPage: LandingPageQuery['landingPage'];
   page: PageType;
   locale: string;
-}> = ({ landingPage, page, locale }) => {
+}> = ({ page, locale }) => {
   const {
     utils: { getRoutedInternalHref },
   } = useConfig();
@@ -55,7 +49,6 @@ const HomePage: NextPage<{
             <RouteMeta origin={AppConfig.origin} />
             <HCRCPageContent
               page={page}
-              landingPage={landingPage}
               PageContentLayoutComponent={LandingPageContentLayout}
               collections={(page: PageType | ArticleType) =>
                 cmsHelper.getDefaultCollections(page, getRoutedInternalHref)
@@ -80,17 +73,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
   return getHobbiesStaticProps(context, async ({ apolloClient }) => {
     try {
       const language = getLanguageOrDefault(context.locale);
-      const { data: landingPageData } = await apolloClient.query<
-        LandingPageQuery,
-        LandingPageQueryVariables
-      >({
-        query: LandingPageDocument,
-        variables: {
-          id: 'root',
-          languageCode: getQlLanguage(language),
-        },
-        fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
-      });
 
       const { data: pageData } = await apolloClient.query<
         PageByTemplateQuery,
@@ -103,15 +85,13 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         },
         fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
       });
-      if (!pageData || !landingPageData) {
+      if (!pageData) {
         return {
           notFound: true,
         };
       }
       const page = pageData.pageByTemplate;
 
-      const landingPage = landingPageData.landingPage;
-
       logger.info(
         'pages/index.tsx',
         'getStaticProps',
@@ -125,7 +105,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
             'search',
             'event',
           ])),
-          landingPage: landingPage,
           page: page,
         },
       };
@@ -141,7 +120,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
             'home',
             'search',
           ])),
-          landingPage: null,
           page: null,
         },
       };

diff --git a/apps/sports-helsinki/config/jest/index.test.tsx b/apps/sports-helsinki/config/jest/index.test.tsx
@@ -3,7 +3,7 @@ import App from '../../src/pages/index';
 
 describe('App', () => {
   it.skip('renders without crashing', () => {
-    render(<App landingPage={undefined} page={undefined} locale={'fi'} />);
+    render(<App page={undefined} locale={'fi'} />);
     expect(screen.getByText('Hobbies-Helsinki')).toBeInTheDocument();
   });
 });