From 50baa4721f1658f5a3e2edbe33f59e99bdbcd692 Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Mon, 23 Dec 2024 17:15:35 +0100
Subject: [PATCH] feat: add dynamic page and display video paragraph

---
 app/[...path]/page.tsx                        | 23 ----------
 app/[...slug]/page.tsx                        | 42 ++++++++++++++++++
 app/layout.tsx                                |  2 +-
 app/page.tsx                                  |  3 --
 .../pages/basicPageLayout/BasicPageLayout.tsx | 17 ++++++++
 .../ParagraphGoVideo/ParagraphGoVideo.tsx     | 43 +++++++++++++++++++
 components/paragraphs/ParagraphResolver.tsx   | 29 +++++++++++++
 .../paragraphErrorBoundary.tsx                | 22 ++++++++++
 components/videoPlayer/VideoPlayer.tsx        | 36 ----------------
 lib/graphql/generated/dpl-cms/graphql.tsx     |  4 +-
 lib/graphql/queries/page.dpl-cms.graphql      |  2 +
 package.json                                  |  1 +
 styles/globals.css                            | 11 +++--
 tailwind.config.ts                            |  2 +
 yarn.lock                                     |  7 +++
 15 files changed, 177 insertions(+), 67 deletions(-)
 delete mode 100644 app/[...path]/page.tsx
 create mode 100644 app/[...slug]/page.tsx
 create mode 100644 components/pages/basicPageLayout/BasicPageLayout.tsx
 create mode 100644 components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx
 create mode 100644 components/paragraphs/ParagraphResolver.tsx
 create mode 100644 components/paragraphs/paragraphErrorBoundary/paragraphErrorBoundary.tsx
 delete mode 100644 components/videoPlayer/VideoPlayer.tsx

diff --git a/app/[...path]/page.tsx b/app/[...path]/page.tsx
deleted file mode 100644
index 3fecdcd..0000000
--- a/app/[...path]/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react"
-
-import { fetcher } from "@/lib/graphql/fetchers/dpl-cms.fetcher"
-import { GetPageByPathDocument, GetPageByPathQuery } from "@/lib/graphql/generated/dpl-cms/graphql"
-
-async function page(props: { params: Promise<{ path: string[] }> }) {
-  const params = await props.params
-
-  const { path } = params
-
-  const data = await fetcher<GetPageByPathQuery, { path: string }>(GetPageByPathDocument, {
-    path: path.join("/"),
-  })()
-
-  return (
-    <div>
-      page
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-    </div>
-  )
-}
-
-export default page
diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
new file mode 100644
index 0000000..a9e1386
--- /dev/null
+++ b/app/[...slug]/page.tsx
@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation"
+import React from "react"
+
+import BasicPageLayout from "@/components/pages/basicPageLayout/BasicPageLayout"
+import { fetcher } from "@/lib/graphql/fetchers/dpl-cms.fetcher"
+import {
+  GetPageByPathDocument,
+  GetPageByPathQuery,
+  NodeGoPage,
+} from "@/lib/graphql/generated/dpl-cms/graphql"
+
+async function page(props: { params: Promise<{ slug: string[] }> }) {
+  const params = await props.params
+
+  const { slug } = params
+
+  const data = await fetcher<GetPageByPathQuery, { path: string }>(GetPageByPathDocument, {
+    path: slug.join("/"),
+  })()
+
+  const routeType = data.route?.__typename
+
+  if (routeType === "RouteRedirect") {
+    // TODO: implement redirect
+    return
+  }
+
+  if (routeType === "RouteExternal") {
+    // TODO: implement external route redirect
+    return
+  }
+
+  if (!routeType || !data?.route?.entity) {
+    return notFound()
+  }
+
+  const pageData = data.route.entity
+
+  return <BasicPageLayout pageData={pageData as NodeGoPage} />
+}
+
+export default page
diff --git a/app/layout.tsx b/app/layout.tsx
index 7178ae0..a69817d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -47,7 +47,7 @@ export default function RootLayout({
         <Theme>
           <ReactQueryProvider>
             <Header />
-            <div className="flex h-full min-h-screen-minus-navigation-height w-full flex-col">
+            <div className="flex h-full min-h-screen-minus-navigation-height w-full flex-col py-space-y">
               {children}
             </div>
             <Footer />
diff --git a/app/page.tsx b/app/page.tsx
index 15f5ac9..bdf9f1f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,3 @@
-import VideoPlayer from "@/components/videoPlayer/VideoPlayer"
 import goConfig from "@/lib/config/goConfig"
 
 const wellknownUrl = goConfig("service.unilogin.wellknown.url")
@@ -7,8 +6,6 @@ export default async function Home() {
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 sm:p-20">
       <main className="row-start-2 flex flex-col items-center gap-8 sm:items-start">
         <pre>Wellknown url: {wellknownUrl}</pre>
-
-        <VideoPlayer />
       </main>
     </div>
   )
diff --git a/components/pages/basicPageLayout/BasicPageLayout.tsx b/components/pages/basicPageLayout/BasicPageLayout.tsx
new file mode 100644
index 0000000..d3e039f
--- /dev/null
+++ b/components/pages/basicPageLayout/BasicPageLayout.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+
+import ParagraphVideo from "@/components/paragraphs/ParagraphGoVideo/ParagraphVideo"
+import ParagraphResolver from "@/components/paragraphs/ParagraphResolver"
+import { NodeGoPage, ParagraphUnion } from "@/lib/graphql/generated/dpl-cms/graphql"
+
+function BasicPageLayout({ pageData }: { pageData: NodeGoPage }) {
+  const { paragraphs } = pageData
+
+  return (
+    <div className="gap-y-paragraph-spacing flex flex-col">
+      <ParagraphResolver paragraphs={paragraphs ?? []} />
+    </div>
+  )
+}
+
+export default BasicPageLayout
diff --git a/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx b/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx
new file mode 100644
index 0000000..a61ffe2
--- /dev/null
+++ b/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import React, { useEffect } from "react"
+
+import type { ParagraphGoVideo } from "@/lib/graphql/generated/dpl-cms/graphql"
+
+export default function ParagraphGoVideo(paragraphGoVideo: ParagraphGoVideo) {
+  const [mounted, setMounted] = React.useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const { goVideoTitle: title } = paragraphGoVideo
+
+  return (
+    <div className="content-container grid-go gap-paragraph-spacing-inner">
+      <div className="col-span-6 w-full lg:col-span-10 lg:col-start-2">
+        <h2 className="text-center text-typo-heading-2">{title}</h2>
+      </div>
+
+      <div className="col-span-6 lg:col-span-12">
+        {mounted && (
+          <div className="relative aspect-16/9 w-full overflow-hidden rounded-base">
+            <iframe
+              aria-label="Naja Marie Aidt - Oevelser i moerke"
+              className="absolute inset-0 h-full w-full"
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%!important",
+                height: "100%!important",
+              }}
+              src="https://media.videotool.dk/?vn=557_2024111913325696587632242634"
+              allowFullScreen
+              allow="autoplay; fullscreen"></iframe>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/paragraphs/ParagraphResolver.tsx b/components/paragraphs/ParagraphResolver.tsx
new file mode 100644
index 0000000..9c77026
--- /dev/null
+++ b/components/paragraphs/ParagraphResolver.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+
+import { ParagraphUnion } from "@/lib/graphql/generated/dpl-cms/graphql"
+
+import ParagraphGoVideo from "./ParagraphGoVideo/ParagraphGoVideo"
+import { ParagraphErrorBoundary } from "./paragraphErrorBoundary/paragraphErrorBoundary"
+
+function ParagraphResolver({ paragraphs }: { paragraphs: ParagraphUnion[] }) {
+  const components = {
+    ParagraphGoVideo,
+  }
+
+  return paragraphs.map((paragraph, index) => {
+    const type = paragraph?.__typename
+    if (!type) {
+      return null
+    }
+
+    const DynamicComponentType = components[type as keyof typeof components] || null
+
+    return (
+      <ParagraphErrorBoundary key={index}>
+        {DynamicComponentType ? <DynamicComponentType key={index} {...paragraph} /> : null}
+      </ParagraphErrorBoundary>
+    )
+  })
+}
+
+export default ParagraphResolver
diff --git a/components/paragraphs/paragraphErrorBoundary/paragraphErrorBoundary.tsx b/components/paragraphs/paragraphErrorBoundary/paragraphErrorBoundary.tsx
new file mode 100644
index 0000000..f62b01a
--- /dev/null
+++ b/components/paragraphs/paragraphErrorBoundary/paragraphErrorBoundary.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+import { ErrorBoundary } from "react-error-boundary"
+
+import { Button } from "../../shared/button/Button"
+
+function ErrorFallback({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
+  return (
+    <div className="bg-sand flex h-[200px] w-full flex-col items-center justify-center">
+      <p>Noget gik galt ved visning af denne blok - måske den mangler indhold?</p>
+      <Button className="mt-4" onClick={resetErrorBoundary}>
+        Genindlæs
+      </Button>
+    </div>
+  )
+}
+
+function ParagraphErrorBoundary({ children }: { children: React.ReactNode }) {
+  return <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+}
+
+export { ParagraphErrorBoundary }
diff --git a/components/videoPlayer/VideoPlayer.tsx b/components/videoPlayer/VideoPlayer.tsx
deleted file mode 100644
index f16b0f6..0000000
--- a/components/videoPlayer/VideoPlayer.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client"
-
-import React, { useEffect } from "react"
-
-// TODO: Replace the reference id with the with a parameter from the CMS
-function VideoPlayer() {
-  const [mounted, setMounted] = React.useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <div className="w-full">
-      {mounted && (
-        <div className="relative aspect-16/9 w-full">
-          <iframe
-            aria-label="Naja Marie Aidt - Oevelser i moerke"
-            className="absolute inset-0 h-full w-full"
-            style={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%!important",
-              height: "100%!important",
-            }}
-            src="https://media.videotool.dk/?vn=557_2024111913325696587632242634"
-            allowFullScreen
-            allow="autoplay; fullscreen"></iframe>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default VideoPlayer
diff --git a/lib/graphql/generated/dpl-cms/graphql.tsx b/lib/graphql/generated/dpl-cms/graphql.tsx
index db6beef..fb14ddb 100644
--- a/lib/graphql/generated/dpl-cms/graphql.tsx
+++ b/lib/graphql/generated/dpl-cms/graphql.tsx
@@ -1009,7 +1009,7 @@ export type GetPageByPathQueryVariables = Exact<{
 }>;
 
 
-export type GetPageByPathQuery = { __typename?: 'Query', route?: { __typename?: 'RouteExternal' } | { __typename?: 'RouteInternal', entity?: { __typename?: 'NodeArticle' } | { __typename?: 'NodeGoPage', paragraphs?: Array<{ __typename?: 'ParagraphAccordion' } | { __typename?: 'ParagraphBanner' } | { __typename?: 'ParagraphBreadcrumbChildren' } | { __typename?: 'ParagraphCardGridAutomatic' } | { __typename?: 'ParagraphCardGridManual' } | { __typename?: 'ParagraphContentSlider' } | { __typename?: 'ParagraphContentSliderAutomatic' } | { __typename?: 'ParagraphFilteredEventList' } | { __typename: 'ParagraphGoVideo', id: string, goVideoTitle?: string | null, status: boolean, created: { __typename?: 'DateTime', timestamp: unknown }, embedVideo?: { __typename?: 'MediaDocument' } | { __typename?: 'MediaImage' } | { __typename?: 'MediaVideo', id: string, mediaOembedVideo: string, name: string, path: string } | null, langcode: { __typename?: 'Language', name?: string | null } } | { __typename?: 'ParagraphManualEventList' } | { __typename?: 'ParagraphMaterialGridAutomatic' } | { __typename?: 'ParagraphMaterialGridManual' } | { __typename?: 'ParagraphTextBody' } | { __typename?: 'ParagraphVideo' }> | null } | null } | { __typename?: 'RouteRedirect' } | null };
+export type GetPageByPathQuery = { __typename?: 'Query', route?: { __typename: 'RouteExternal' } | { __typename: 'RouteInternal', url: string, entity?: { __typename?: 'NodeArticle' } | { __typename?: 'NodeGoPage', paragraphs?: Array<{ __typename?: 'ParagraphAccordion' } | { __typename?: 'ParagraphBanner' } | { __typename?: 'ParagraphBreadcrumbChildren' } | { __typename?: 'ParagraphCardGridAutomatic' } | { __typename?: 'ParagraphCardGridManual' } | { __typename?: 'ParagraphContentSlider' } | { __typename?: 'ParagraphContentSliderAutomatic' } | { __typename?: 'ParagraphFilteredEventList' } | { __typename: 'ParagraphGoVideo', id: string, goVideoTitle?: string | null, status: boolean, created: { __typename?: 'DateTime', timestamp: unknown }, embedVideo?: { __typename?: 'MediaDocument' } | { __typename?: 'MediaImage' } | { __typename?: 'MediaVideo', id: string, mediaOembedVideo: string, name: string, path: string } | null, langcode: { __typename?: 'Language', name?: string | null } } | { __typename?: 'ParagraphManualEventList' } | { __typename?: 'ParagraphMaterialGridAutomatic' } | { __typename?: 'ParagraphMaterialGridManual' } | { __typename?: 'ParagraphTextBody' } | { __typename?: 'ParagraphVideo' }> | null } | null } | { __typename: 'RouteRedirect' } | null };
 
 
 
@@ -1124,7 +1124,9 @@ useGetDplCmsConfigurationQuery.fetcher = (variables?: GetDplCmsConfigurationQuer
 export const GetPageByPathDocument = `
     query getPageByPath($path: String!) {
   route(path: $path) {
+    __typename
     ... on RouteInternal {
+      url
       entity {
         ... on NodeGoPage {
           paragraphs {
diff --git a/lib/graphql/queries/page.dpl-cms.graphql b/lib/graphql/queries/page.dpl-cms.graphql
index e01170e..2006077 100644
--- a/lib/graphql/queries/page.dpl-cms.graphql
+++ b/lib/graphql/queries/page.dpl-cms.graphql
@@ -1,6 +1,8 @@
 query getPageByPath($path: String!) {
   route(path: $path) {
+    __typename
     ... on RouteInternal {
+      url
       entity {
         ... on NodeGoPage {
           paragraphs {
diff --git a/package.json b/package.json
index 5a36403..b3d66b6 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "openid-client": "^6.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-parallax-tilt": "^1.7.252",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
diff --git a/styles/globals.css b/styles/globals.css
index cd075d6..c5fa6d7 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -12,8 +12,6 @@
   --grid-gap-3: calc(var(--grid-gap) * 3); /* 36px */
   --grid-gap-x: var(--grid-gap); /* 12px */
 
-  --space-y: 5rem; /* 80px */
-
   /* SIZE OF EACH INDIVIDUAL COLUMN IN THE GRID  */
   --grid-column: calc(
     ((min(var(--page-width), 100vw) - (2 * var(--grid-edge))) - (11 * var(--grid-gap-x))) / 12
@@ -59,7 +57,9 @@
   --aspect-9-16: 9 / 16;
 
   /* SPACING */
-  --block-spacing: 5rem; /* 80px */
+  --paragraph-spacing: 2.5rem; /* 40px */
+  --paragraph-spacing-inner: 2rem; /* 32px */
+  --space-y: 2.5rem; /* 40px */
 
   /* COLORS */
   --black: hsla(0, 0%, 0%, 1);
@@ -220,6 +220,11 @@
     --navigation-height: 5rem; /* 80px */
     --navigation-search-height: 6.25rem; /* 100px */
 
+    /* SPACING */
+    --paragraph-spacing: 5rem; /* 80px */
+    --paragraph-spacing-inner: 4rem; /* 64px */
+    --space-y: 5rem; /* 80px */
+
     /* FONTS */
     --typo-huge-size: 92px;
     --typo-huge-weight: 500;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 27f3606..1855274 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -320,6 +320,8 @@ export const extendedTheme = {
       "grid-gap-x": "var(--grid-gap-x)",
       "grid-edge": "var(--grid-edge)",
       "space-y": "var(--space-y)",
+      "paragraph-spacing": "var(--paragraph-spacing)",
+      "paragraph-spacing-inner": "var(--paragraph-spacing-inner)",
     },
     boxShadow: {
       button: "2px 2px 0 0px var(--foreground)",
diff --git a/yarn.lock b/yarn.lock
index c4127b4..709c153 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11174,6 +11174,13 @@ react-dom@^19.0.0:
   dependencies:
     scheduler "^0.25.0"
 
+react-error-boundary@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-5.0.0.tgz#6b6c7e075c922afb0283147e5b084efa44e68570"
+  integrity sha512-tnjAxG+IkpLephNcePNA7v6F/QpWLH8He65+DmedchDwg162JZqx4NmbXj0mlAYVVEd81OW7aFhmbsScYfiAFQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"