From d3ba83e9edad730d27e14090b3d4dc9a6b23cc80 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Fri, 2 Jun 2023 22:17:04 +0200
Subject: [PATCH] render x columns properly

---
 src/pages/test/[slug].tsx | 33 ++++++++++++++++++++++++++++++++-
 src/pages/test/editor.tsx | 12 +++++++-----
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/pages/test/[slug].tsx b/src/pages/test/[slug].tsx
index afda2c2..16c078e 100644
--- a/src/pages/test/[slug].tsx
+++ b/src/pages/test/[slug].tsx
@@ -36,6 +36,27 @@ function Heading({ text, level }: { text: string, level: number }) {
   }
 }
 
+function Column({ blocksData }: { blocksData: Block[][] }) {
+  if (blocksData.length === 0) return null;
+
+  return (
+    <div className="flex flex-row gap-6">
+      {blocksData.map((blocks, i) => {
+        return (<div className="flex flex-col gap-6 w-1/2" key={"col-" + i}>{blocks.map(block => {
+          switch (block.type) {
+            case 'paragraph':
+              return <Paragraph key={block.id} text={block.data.text} />
+            case 'header':
+              return <Heading key={block.id} text={block.data.text} level={block.data.level} />
+            default:
+              return null;
+          }
+        })}</div>)
+      })}
+    </div>
+  )
+}
+
 type ParagraphBlock = {
   type: 'paragraph',
   data: {
@@ -53,7 +74,15 @@ type HeaderBlock = {
   id: string,
 }
 
-type Block = ParagraphBlock | HeaderBlock;
+type ColumnBlock = {
+  type: 'column',
+  data: {
+    blocksData: Block[][],
+  },
+  id: string,
+}
+
+type Block = ParagraphBlock | HeaderBlock | ColumnBlock;
 
 type Content = {
   blocks: Block[],
@@ -73,6 +102,8 @@ export default function Page({ data }: { slug: string, data: PagesRecord<Content
                 return <Paragraph key={index} text={block.data.text} />
               case 'header':
                 return <Heading key={index} text={block.data.text} level={block.data.level} />
+              case 'column':
+                return <Column key={index} blocksData={block.data.blocksData} />
               default:
                 return <p key={index}>Unknown block type: <pre>{JSON.stringify(block, null, 2)}</pre></p>
             }
diff --git a/src/pages/test/editor.tsx b/src/pages/test/editor.tsx
index 2260b34..b4163f2 100644
--- a/src/pages/test/editor.tsx
+++ b/src/pages/test/editor.tsx
@@ -9,7 +9,7 @@ const ReactEditorJS = dynamic(() => import('@/components/ReactEditor'), {
   ssr: false
 })
 
-export default function Editor({data: pbData}: {data: OutputData}) {
+export default function Editor({data: pbData, slug, title}: {data: OutputData, slug: string, title: string}) {
   const [data, setData] = useState<OutputData>(pbData);
   const {mutate, isLoading, data: data2, isError} = api.pages.updatePage.useMutation();
 
@@ -18,14 +18,14 @@ export default function Editor({data: pbData}: {data: OutputData}) {
   const handleSubmit = () => {
     if (!data) return
     mutate({
-      slug: 'test',
-      title: 'Test',
+      slug,
+      title,
       content: data
     })
   }
 
   return (
-    <Layout title='EditorJS'>
+    <Layout title={'Edition de ' + title}>
       <button onClick={handleSubmit}>Save</button>
       {isLoading && <p>Loading...</p>}
       {data2 && !isError && <p>Saved!</p>}
@@ -53,7 +53,9 @@ export async function getServerSideProps({query}: {query: {[key: string]: string
 
   return {
     props: {
-      data: data.data.content
+      data: data.data.content,
+      slug: query.page,
+      title: data.data.title
     }
   }
 }