CORE-4674: faq to netlify (#1052)

design-v2/benefits/index.jsx

@@ -9,7 +9,6 @@ import { Layout, Section } from '../components'
 // TODO: REPLACE OLD COMPONENT
 import { Accordion, Content, Markdown } from 'components'
 import benefitsData from 'data/benefits.yml'
-import faqData from 'data/faq.yml'
 import { patchStats } from 'components/utils'
 
 const itemToURL = (id) => {
@@ -50,16 +49,15 @@ const JoinSectionItem = ({ title, picture, description, additional }) => {
   )
 }
 
-const BenefitsPageTemplate = () => {
+const BenefitsPageTemplate = ({ data }) => {
   const [showAll, setShowAll] = useState(false)
-
   const toggleShowAll = () => {
     setShowAll((prev) => !prev)
   }
 
   const itemsToShow = showAll
-    ? faqData.sections[0].items
-    : faqData.sections[0].items.slice(0, 3)
+    ? data.faqs.sections[0].items
+    : data.faqs.sections[0].items.slice(0, 3)
 
   return (
     <Layout>

pages/benefits.jsx

@@ -1,17 +1,40 @@
 import React from 'react'
 
 import BenefitsPageTemplate from '../design-v2/benefits'
+import retrieveContent from '../content'
 
 import { Page } from 'components'
 import benefitsData from 'data/benefits.yml'
 
-const benefitsPage = () => (
+const getSections = async ({ ref } = {}) => {
+  const content = await retrieveContent('faqs', {
+    ref,
+    transform: 'object',
+  })
+  return content
+}
+
+export async function getStaticProps({ previewData }) {
+  const ref = previewData?.ref
+  const sections = await getSections({ ref })
+  const data = {
+    ...sections,
+  }
+
+  return {
+    props: {
+      data,
+    },
+  }
+}
+
+const benefitsPage = ({ data }) => (
   <Page
     title={benefitsData.title}
     description={benefitsData.description}
     keywords={benefitsData.keywords}
   >
-    <BenefitsPageTemplate />
+    <BenefitsPageTemplate data={data} />
   </Page>
 )
 

pages/faq.jsx

@@ -3,9 +3,9 @@ import { classNames } from '@oacore/design/lib/utils'
 import { useRouter } from 'next/router'
 
 import styles from './index.module.scss'
+import retrieveContent from '../content'
 
 import { Accordion, Content, Markdown, Page, Section } from 'components'
-import faqData from 'data/faq.yml'
 
 const itemToURL = (id) => {
   const url = new URL(window.location)
@@ -111,15 +111,32 @@ const FAQsSection = ({
   )
 }
 
-const FAQsPage = () => (
-  <Page
-    title={faqData.title}
-    description={faqData.description}
-    keywords={faqData.keywords}
-    nav
-  >
-    <h1>{faqData.title}</h1>
-    {faqData.sections.map((section) => (
+const getSections = async ({ ref } = {}) => {
+  const content = await retrieveContent('faqs', {
+    ref,
+    transform: 'object',
+  })
+  return content
+}
+
+export async function getStaticProps({ previewData }) {
+  const ref = previewData?.ref
+  const sections = await getSections({ ref })
+  const data = {
+    ...sections,
+  }
+
+  return {
+    props: {
+      data,
+    },
+  }
+}
+
+const FAQsPage = ({ data }) => (
+  <Page title={data.faqs.title} description={data.faqs.description} nav>
+    <h1>{data.faqs.title}</h1>
+    {data.faqs.sections.map((section) => (
       <FAQsSection key={section.id} {...section} />
     ))}
   </Page>