feat(vth): show homepage cms data

frameless · Sep 1, 2023 · 3f46f62 · 3f46f62
1 parent abf5c14
commit 3f46f62
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git 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
@@ -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
@@ -12,3 +12,15 @@ query getNotFoundPage($locale: I18NLocaleCode){
   }
 }
 `);
+
+export const GET_HOME_PAGE = gql(`
+query getHomePage {
+  homepage {
+    data {
+      attributes {
+        Title
+        Content
+      }
+    }
+  }
+}`);