refactor(homepage): decouple layout to component props and rendering …

…logic

homepage/src/layouts/contentMapper.jsx

@@ -4,76 +4,22 @@ import ThreeColumns from '../components/threeColumns';
 import ImageAndText from '../components/imageAndText';
 import Section from '../components/section';
 import Headline from '../components/headline';
+import { componentTypes } from '../lib/componentMapper';
 
-const contentMapper = (layout) => {
-  switch (layout.type) {
-    case 'layout_banner':
-      return (
-        <Banner
-          key={layout.title}
-          id={layout.id}
-          title={layout.title}
-          subtitle={layout.subtitle}
-          heroImage={layout.hero_image}
-          highlights={layout.highlights}
-        />
-      );
-    case 'layout_section':
-      if (layout.columns?.length === 2) {
-        return (
-          <TwoColumns
-            key={layout.title}
-            id={layout.id}
-            title={layout.title}
-            columns={layout.columns}
-            markdown={true}
-          />
-        );
-      } else if (layout.columns?.length === 3) {
-        return (
-          <ThreeColumns
-            key={layout.title}
-            id={layout.id}
-            title={layout.title}
-            columns={layout.columns}
-            markdown={true}
-          />
-        );
-      } else {
-        return (
-          <Section
-            key={layout.title}
-            id={layout.id}
-            title={layout.title}
-            subtitle={layout.columns?.[0]?.title}
-            image={layout.columns?.[0]?.image}
-            content={layout.columns?.[0]?.text}
-            markdown={true}
-          />
-        );
-      }
-    case 'layout_image_text':
-      return (
-        <ImageAndText
-          key={layout.title}
-          id={layout.id}
-          image={layout.image}
-          title={layout.title}
-          subtitle={layout.subtitle}
-          content={layout.text}
-          highlights={layout.highlights}
-          markdown={true}
-        />
-      );
-    case 'layout_headline':
-      return (
-        <Headline
-          key={layout.title}
-          id={layout.id}
-          title={layout.title}
-          subtitle={layout.subtitle}
-        />
-      );
+const contentMapper = (component) => {
+  switch (component.type) {
+    case componentTypes.Banner:
+      return <Banner key={component.id} {...component.props} />;
+    case componentTypes.Headline:
+      return <Headline key={component.id} {...component.props} />;
+    case componentTypes.ImageAndText:
+      return <ImageAndText key={component.id} {...component.props} />;
+    case componentTypes.OneColumn:
+      return <Section key={component.id} {...component.props} />;
+    case componentTypes.TwoColumns:
+      return <TwoColumns key={component.id} {...component.props} />;
+    case componentTypes.ThreeColumns:
+      return <ThreeColumns key={component.id} {...component.props} />;
     default:
       return null;
   }

homepage/src/lib/componentMapper.js

@@ -0,0 +1,97 @@
+import { titleToAnchorId } from './titleToAnchorId';
+
+const removeUndefined = (obj) => {
+  const newObj = {};
+  Object.keys(obj).forEach((key) => {
+    if (obj[key] !== undefined) {
+      newObj[key] = obj[key];
+    }
+  });
+  return newObj;
+}
+
+export const componentTypes = {
+  Banner: 'Banner',
+  Headline: 'Headline',
+  OneColumn: 'OneColumn',
+  TwoColumns: 'TwoColumns',
+  ThreeColumns: 'ThreeColumns',
+  ImageAndText: 'ImageAndText',
+}
+
+export const componentMapper = (layout) => {
+  let type = '';
+  let props = {};
+  switch (layout.type) {
+    case 'layout_banner': {
+      type = componentTypes.Banner;
+      props = {
+        id: titleToAnchorId(layout.title),
+        title: layout.title,
+        subtitle: layout.subtitle,
+        heroImage: layout.hero_image,
+        highlights: layout.highlights,
+      };
+      break;
+    }
+    case 'layout_headline': {
+      type = componentTypes.Headline;
+      props = {
+        id: titleToAnchorId(layout.title),
+        title: layout.title,
+        subtitle: layout.subtitle,
+      };
+      break;
+    }
+    case 'layout_image_text': {
+      type = componentTypes.ImageAndText;
+      props = {
+        id: titleToAnchorId(layout.title),
+        title: layout.title,
+        subtitle: layout.subtitle,
+        image: layout.image,
+        content: layout.text,
+        highlights: layout.highlights,
+        markdown: true,
+      };
+      break;
+    }
+    case 'layout_section': {
+      if (layout.columns?.length === 1) {
+        type = componentTypes.OneColumn;
+        props = {
+          id: titleToAnchorId(layout.title),
+          title: layout.title,
+          subtitle: layout.columns?.[0]?.title,
+          image: layout.columns?.[0]?.image,
+          content: layout.columns?.[0]?.text,
+          markdown: true,
+        };
+        break;
+      } else if (layout.columns?.length === 2) {
+        type = componentTypes.TwoColumns;
+        props = {
+          id: titleToAnchorId(layout.title),
+          title: layout.title,
+          columns: layout.columns,
+          markdown: true,
+        };
+        break;
+      } else if (layout.columns?.length === 3) {
+        type = componentTypes.ThreeColumns;
+        props = {
+          id: titleToAnchorId(layout.title),
+          title: layout.title,
+          columns: layout.columns,
+          markdown: true,
+        };
+        break;
+      }
+    }
+  }
+
+  return {
+    type,
+    props: removeUndefined(props),
+  };
+}

homepage/src/lib/fetchPage.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { join } from 'path';
 import matter from 'gray-matter';
-import { titleToAnchorId } from './titleToAnchorId';
+import { componentMapper } from './componentMapper';
 
 const pagesDirectory = join(process.cwd(), '_pages');
 
@@ -16,12 +16,7 @@ export function fetchPage(lang, page) {
     const fileContent = fs.readFileSync(filePath, 'utf8');
     const { data } = matter(fileContent);
 
-    const contentList = data['layout_list']?.map((layout) => {
-      return {
-        id: layout.id || titleToAnchorId(layout.title),
-        ...layout,
-      };
-    });
+    const contentList = data['layout_list']?.map(componentMapper);
 
     return {
       contentList,

homepage/src/pages/index.jsx

@@ -63,7 +63,7 @@ const Index = ({ headInfo, page }) => (
       `,
       }}
     />
-    {page.contentList.map(contentMapper)}
+    {page.contentList?.map(contentMapper)}
   </>
 );
 

homepage/src/pages/resource.jsx

@@ -19,5 +19,5 @@ export const getStaticProps = async ({ locale }) => {
 };
 
 export default function Resource({ page }) {
-  return <>{page.contentList.map(contentMapper)}</>;
+  return <>{page.contentList?.map(contentMapper)}</>;
 }