feat: Implement temporary solution for rendering Article Component on…

… Live Previews
CodeForAfrica · Nov 13, 2024 · 87ff9d8 · 87ff9d8
1 parent 67916fd
commit 87ff9d8
Showing 1 changed file with 37 additions and 3 deletions.
diff --git a/apps/civicsignalblog/src/pages/[...slugs].page.js b/apps/civicsignalblog/src/pages/[...slugs].page.js
@@ -20,12 +20,44 @@ const componentsBySlugs = {
 };
 
 function Index(initialData) {
-  const { data: props } = useLivePreview({
+  let { data: props } = useLivePreview({
     serverURL: process.env.NEXT_PUBLIC_APP_URL || "",
     depth: 2,
     initialData,
   });
 
+  // Transform the preview data after receiving it, this is not the cleanest approach
+  props = {
+    ...props,
+    blocks: props?.blocks?.map((block) => {
+      if (block.blockType === "post-list") {
+        return {
+          title: block.stories?.title,
+          featured: block.stories?.featured
+            ? {
+                ...block.stories.featured,
+                image: {
+                  src:
+                    block.stories.featured.coverImage?.url ||
+                    block.stories.featured.meta?.image?.url,
+                  alt:
+                    block.stories.featured.coverImage?.alt ||
+                    block.stories.featured.meta?.image?.alt,
+                },
+              }
+            : null,
+          posts: [],
+          pagination: { count: 1, page: 1 },
+          primaryTag: block.primaryTag,
+          tags: [],
+          slug: block?.primaryTag,
+          labels: block.labels,
+        };
+      }
+      return block;
+    }),
+  };
+
   const { blocks, fallback } = props;
   if (!blocks?.length) {
     return null;
@@ -40,11 +72,13 @@ function Index(initialData) {
   return (
     <PageComponent {...pageComponentProps}>
       {blocks.map((block) => {
-        const Component = componentsBySlugs[block.slug];
+        const blockType = block.slug || block.blockType;
+        const blockId = block.id || block.name || block.blockType;
+        const Component = componentsBySlugs[blockType];
         if (!Component) {
           return null;
         }
-        return <Component {...block} key={block.slug} />;
+        return <Component {...block} key={blockId} />;
       })}
     </PageComponent>
   );