From 3f46f624c9b6fd353efadf7b8f4cf1646df3777e Mon Sep 17 00:00:00 2001
From: Bryan de Jong <bryandejong99@gmail.com>
Date: Fri, 25 Aug 2023 11:17:32 +0200
Subject: [PATCH] feat(vth): show homepage cms data

---
 apps/vth-frontend/src/app/[locale]/page.tsx   | 21 +++++++++++--------
 .../src/components/Markdown/index.tsx         |  8 ++-----
 apps/vth-frontend/src/query/index.ts          | 12 +++++++++++
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
index 9c9e4490e..19a032bdb 100644
--- a/apps/vth-frontend/src/app/[locale]/page.tsx
+++ b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -1,5 +1,9 @@
+import { createStrapiURL } from '@frameless/pdc-frontend/src/util/createStrapiURL';
+import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
 import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
+import { Markdown } from '@/components/Markdown';
+import { GET_HOME_PAGE } from '@/query';
 import { useTranslation } from '../i18n';
 
 export interface Fields {
@@ -23,19 +27,18 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
 }
 
 const Home = async ({ params: { locale } }: { params: any }) => {
-  const { t } = await useTranslation(locale, ['home-page', 'common']);
+  const { data } = await fetchData({
+    url: createStrapiURL(),
+    query: GET_HOME_PAGE,
+    variables: { locale: locale },
+  });
 
-  // todo: fetch theme data to display homepage cards
+  const { Title, Content } = data.homepage.data.attributes;
 
   return (
     <>
-      <Heading1>{t('h1')}</Heading1>
-      <p>
-        Wat pakt Toezicht en Handhaving in 2022 allemaal op? En welke resultaten hebben we de afgelopen periode bereikt?
-        Op deze website zie je in één oogopslag waarop we ons in 2023 richten, wat we de afgelopen jaren hebben gedaan
-        en welke trends we zien. Van de handhaving op afval tot het controleren van bouwplannen en van evenementen tot
-        de aanpak van huisjesmelkers.
-      </p>
+      <Heading1>{Title}</Heading1>
+      <Markdown>{Content}</Markdown>
     </>
   );
 };
diff --git a/apps/vth-frontend/src/components/Markdown/index.tsx b/apps/vth-frontend/src/components/Markdown/index.tsx
index daef4d434..91e9af315 100644
--- a/apps/vth-frontend/src/components/Markdown/index.tsx
+++ b/apps/vth-frontend/src/components/Markdown/index.tsx
@@ -166,18 +166,14 @@ const components = ({ strapiBackendURL, priceData, locale }: any) =>
 
 interface MarkdownProps {
   children: any;
-  priceData?: any;
   locale?: string;
   strapiBackendURL?: string;
 }
 
-export const Markdown: React.FC<MarkdownProps> = ({ children, priceData, locale, strapiBackendURL }) => {
+export const Markdown: React.FC<MarkdownProps> = ({ children, locale, strapiBackendURL }) => {
   const url = strapiBackendURL ? new URL(strapiBackendURL) : null;
   return (
-    <ReactMarkdown
-      components={components({ priceData, locale, strapiBackendURL: url?.origin ?? '' })}
-      rehypePlugins={[rehypeRaw]}
-    >
+    <ReactMarkdown components={components({ locale, strapiBackendURL: url?.origin ?? '' })} rehypePlugins={[rehypeRaw]}>
       {children}
     </ReactMarkdown>
   );
diff --git a/apps/vth-frontend/src/query/index.ts b/apps/vth-frontend/src/query/index.ts
index d8a9980e5..49a03f7fa 100644
--- a/apps/vth-frontend/src/query/index.ts
+++ b/apps/vth-frontend/src/query/index.ts
@@ -12,3 +12,15 @@ query getNotFoundPage($locale: I18NLocaleCode){
   }
 }
 `);
+
+export const GET_HOME_PAGE = gql(`
+query getHomePage {
+  homepage {
+    data {
+      attributes {
+        Title
+        Content
+      }
+    }
+  }
+}`);