🚧 add footerComponent to magazine article (#1290)

equinor · Sep 30, 2022 · fec1fe8 · fernandolucchesi · Oct 3, 2022 · SvSven
1 parent 34e2d44
commit fec1fe8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/web/lib/queries/magazine.ts b/web/lib/queries/magazine.ts
@@ -5,6 +5,27 @@ import downloadableFileFields from './common/actions/linkSelectorFields'
 import downloadableImageFields from './common/actions/linkSelectorFields'
 import markDefs from './common/blockEditorMarks'
 
+const footerComponentFields = `
+  title,
+  text[]{
+    ...,
+    ${markDefs},
+  },
+  "designOptions": {
+    "background": coalesce(background.title, 'White'),
+    "imagePosition": coalesce(imagePosition, 'left'),
+  },
+  "image": image{
+    ...,
+    "extension": asset-> extension
+  },
+  "action": action[0]{
+    ${linkSelectorFields},
+    ${downloadableFileFields},
+    ${downloadableImageFields},
+  },
+`
+
 const promotedmagazineTags = `"": *[_type == "magazineIndex" && _lang == $lang][0] {"magazineTags":promotedMagazineTags[]->title[$lang]}`
 export const magazineQuery = /* groq */ `
 *[_type == "magazine" && slug.current == $slug && _lang == $lang] {
@@ -35,6 +56,11 @@ export const magazineQuery = /* groq */ `
           ${pageContentFields}
       },
       ${slugsForNewsAndMagazine('magazine')},
+    "footerComponent": *[_id == 'magazineIndex'][0]{
+      "data": footerComponent{
+        ${footerComponentFields}
+      }
+    }
 }`
 
 export const magazineIndexQuery = /* groq */ `
@@ -48,23 +74,6 @@ export const magazineIndexQuery = /* groq */ `
     backgroundImage,
     "magazineTags":promotedMagazineTags[]->title[$lang],
     "footerComponent": footerComponent{
-      title,
-      text[]{
-        ...,
-        ${markDefs},
-      },
-      "designOptions": {
-        "background": coalesce(background.title, 'White'),
-        "imagePosition": coalesce(imagePosition, 'left'),
-      },
-      "image": image{
-        ...,
-        "extension": asset-> extension
-      },
-      "action": action[0]{
-        ${linkSelectorFields},
-        ${downloadableFileFields},
-        ${downloadableImageFields},
-      },
+      ${footerComponentFields}
     }
   }`
diff --git a/web/pageComponents/pageTemplates/MagazinePage.tsx b/web/pageComponents/pageTemplates/MagazinePage.tsx
@@ -10,6 +10,7 @@ import { metaTitleSuffix } from '../../languages'
 import { PageContent } from './shared/SharedPageContent'
 import { MagazinePageSchema } from '../../types/types'
 import { SharedBanner } from './shared/SharedBanner'
+import Teaser from '../topicPages/Teaser'
 
 const MagazinePageLayout = styled.main`
   /* The neverending spacing story... If two sections with the same background colour
@@ -53,6 +54,8 @@ const MagazinePage = ({ data }: MagazinePageProps) => {
     }
   })
 
+  const { footerComponent } = data
+
   const ogImage = data?.seoAndSome?.openGraphImage?.asset ? data?.seoAndSome?.openGraphImage : data?.heroImage?.image
   return (
     <>
@@ -79,6 +82,7 @@ const MagazinePage = ({ data }: MagazinePageProps) => {
           />
         )}
         <PageContent data={data} />
+        {footerComponent?.data && <Teaser data={footerComponent.data} />}
       </MagazinePageLayout>
     </>
   )

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -208,6 +208,9 @@ export type TopicPageSchema = PageSchemaV2
 
 export type MagazinePageSchema = PageSchemaV2 & {
   magazineTags?: string[]
+  footerComponent?: {
+    data?: TeaserData
+  }
 }
 
 export type LandingPageSchema = {