From 92fbd685e6dbd7dc775ad97c4d512bbf015d88ab Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 2 Jul 2024 11:50:06 +0300
Subject: [PATCH] Use CMS Content

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 apps/roboshield/payload-types.ts              | 32 +++++++-
 .../src/components/Content/Content.tsx        | 60 +++++++++-----
 .../LongFormExternalEmbed.tsx                 | 30 +++++++
 .../components/LongFormExternalEmbed/index.ts |  3 +
 .../LongFormMedia/LongFormMedia.tsx           | 43 ++++++++++
 .../src/components/LongFormMedia/index.ts     |  3 +
 .../LongFormRichText/LongFormRichText.tsx     | 78 +++++++++++++++++++
 .../src/components/LongFormRichText/index.ts  |  3 +
 apps/roboshield/src/payload/blocks/Content.ts | 24 ++----
 .../src/payload/blocks/ExternalEmbedd.ts      | 62 +++++++++++++++
 .../src/payload/blocks/MediaBlock.ts          | 16 ++++
 .../roboshield/src/payload/blocks/RichText.ts | 16 ++++
 apps/roboshield/src/utils/blocks.ts           |  4 +
 13 files changed, 333 insertions(+), 41 deletions(-)
 create mode 100644 apps/roboshield/src/components/LongFormExternalEmbed/LongFormExternalEmbed.tsx
 create mode 100644 apps/roboshield/src/components/LongFormExternalEmbed/index.ts
 create mode 100644 apps/roboshield/src/components/LongFormMedia/LongFormMedia.tsx
 create mode 100644 apps/roboshield/src/components/LongFormMedia/index.ts
 create mode 100644 apps/roboshield/src/components/LongFormRichText/LongFormRichText.tsx
 create mode 100644 apps/roboshield/src/components/LongFormRichText/index.ts
 create mode 100644 apps/roboshield/src/payload/blocks/ExternalEmbedd.ts
 create mode 100644 apps/roboshield/src/payload/blocks/MediaBlock.ts
 create mode 100644 apps/roboshield/src/payload/blocks/RichText.ts

diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
index 357b67364..6d731008f 100644
--- a/apps/roboshield/payload-types.ts
+++ b/apps/roboshield/payload-types.ts
@@ -57,9 +57,33 @@ export interface Page {
           }
         | {
             content?:
-              | {
-                  [k: string]: unknown;
-                }[]
+              | (
+                  | {
+                      content: {
+                        [k: string]: unknown;
+                      }[];
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "richtext";
+                    }
+                  | {
+                      image: string | Media;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "mediaBlock";
+                    }
+                  | {
+                      externalEmbeddFields?: {
+                        embedType?: ("url" | "code") | null;
+                        url?: string | null;
+                        caption?: string | null;
+                        code?: string | null;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "externalEmbedd";
+                    }
+                )[]
               | null;
             id?: string | null;
             blockName?: string | null;
@@ -70,7 +94,7 @@ export interface Page {
             statistics?:
               | {
                   name: string;
-                  value: number;
+                  value: string;
                   description: {
                     [k: string]: unknown;
                   }[];
diff --git a/apps/roboshield/src/components/Content/Content.tsx b/apps/roboshield/src/components/Content/Content.tsx
index 529a2e06d..d01bbb7ae 100644
--- a/apps/roboshield/src/components/Content/Content.tsx
+++ b/apps/roboshield/src/components/Content/Content.tsx
@@ -1,14 +1,45 @@
 import { Section } from "@commons-ui/core";
-import RichText, { Children } from "@/roboshield/components/RichText";
 import { Page } from "@/root/payload-types";
-import { ExtractBlockType } from "@/roboshield/utils/blocks";
+import {
+  ExtractBlockType,
+  ExtractNestedBlockType,
+} from "@/roboshield/utils/blocks";
+import LongFormRichText from "@/roboshield/components/LongFormRichText";
+import LongFormMedia from "@/roboshield/components/LongFormMedia";
+import LongFormExternalEmbed from "@/roboshield/components/LongFormExternalEmbed";
 
 type ContentProps = ExtractBlockType<
   NonNullable<Page["blocks"]>[number],
   "content"
 >;
 
+export type ExternalEmbeddBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "externalEmbedd"
+>;
+
+export type RichTextBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "richtext"
+>;
+
+export type MediaBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "mediaBlock"
+>;
+
+type ComponentMap = {
+  richtext: (props: RichTextBlock) => JSX.Element;
+  mediaBlock?: (props: MediaBlock) => JSX.Element;
+  externalEmbedd?: (props: ExternalEmbeddBlock) => JSX.Element;
+};
 export default function Content({ content }: ContentProps) {
+  const COMPONENT_BY_CONTENT_TYPE: ComponentMap = {
+    richtext: LongFormRichText,
+    mediaBlock: LongFormMedia,
+    externalEmbedd: LongFormExternalEmbed,
+  };
+
   return (
     <Section
       component="section"
@@ -18,22 +49,15 @@ export default function Content({ content }: ContentProps) {
         my: 10,
       }}
     >
-      <RichText
-        elements={content as Children}
-        sx={(theme: any) => ({
-          mb: "30px",
-          "& h2": {
-            typography: { xs: "h4", md: "h2" },
-          },
-          "& p,& a, & li": {
-            typography: { xs: "body1", md: "subheading" },
-            mb: 2,
-          },
-          "& a": {
-            textDecorationColor: theme.palette.primary.main,
-          },
-        })}
-      />
+      {content?.map((child) => {
+        const Component = COMPONENT_BY_CONTENT_TYPE[child.blockType];
+
+        if (Component) {
+          return <Component key={child.id} {...child} />;
+        }
+
+        return null;
+      })}
     </Section>
   );
 }
diff --git a/apps/roboshield/src/components/LongFormExternalEmbed/LongFormExternalEmbed.tsx b/apps/roboshield/src/components/LongFormExternalEmbed/LongFormExternalEmbed.tsx
new file mode 100644
index 000000000..7f75a2a79
--- /dev/null
+++ b/apps/roboshield/src/components/LongFormExternalEmbed/LongFormExternalEmbed.tsx
@@ -0,0 +1,30 @@
+import { RichTypography } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React from "react";
+import { ExternalEmbeddBlock } from "@/roboshield/components/Content/Content";
+
+export default function LongFormExternalEmbed(props: ExternalEmbeddBlock) {
+  const { externalEmbeddFields: { code = "", caption = "", url = "" } = {} } =
+    props;
+
+  return (
+    <Box
+      sx={{
+        my: 5,
+      }}
+    >
+      {code && <RichTypography>{code}</RichTypography>}
+      {url && (
+        <iframe
+          src={url}
+          title={caption!}
+          style={{
+            width: "100%",
+            height: "500px",
+            border: "none",
+          }}
+        />
+      )}
+    </Box>
+  );
+}
diff --git a/apps/roboshield/src/components/LongFormExternalEmbed/index.ts b/apps/roboshield/src/components/LongFormExternalEmbed/index.ts
new file mode 100644
index 000000000..9351ead22
--- /dev/null
+++ b/apps/roboshield/src/components/LongFormExternalEmbed/index.ts
@@ -0,0 +1,3 @@
+import LongFormExternalEmbed from "./LongFormExternalEmbed";
+
+export default LongFormExternalEmbed;
diff --git a/apps/roboshield/src/components/LongFormMedia/LongFormMedia.tsx b/apps/roboshield/src/components/LongFormMedia/LongFormMedia.tsx
new file mode 100644
index 000000000..762ea73bc
--- /dev/null
+++ b/apps/roboshield/src/components/LongFormMedia/LongFormMedia.tsx
@@ -0,0 +1,43 @@
+import { Figure } from "@commons-ui/next";
+import { Box } from "@mui/material";
+import React from "react";
+import { MediaBlock } from "@/roboshield/components/Content/Content";
+import { Media } from "@/root/payload-types";
+
+export default function LongFormMedia({ image }: MediaBlock) {
+  const mediaImage = image as Media;
+  return (
+    <Box
+      sx={{
+        my: 5,
+      }}
+    >
+      <Figure
+        ImageProps={{
+          alt: mediaImage.alt,
+          sx: {
+            objectFit: "cover",
+            position: "relative !important",
+          },
+          src: mediaImage.url,
+        }}
+        sx={{
+          height: {
+            xs: "200px",
+            md: "500px",
+          },
+          width: "100%",
+        }}
+      >
+        <figcaption
+          style={{
+            width: "100%",
+            margin: "0 auto",
+          }}
+        >
+          {mediaImage.alt}
+        </figcaption>
+      </Figure>
+    </Box>
+  );
+}
diff --git a/apps/roboshield/src/components/LongFormMedia/index.ts b/apps/roboshield/src/components/LongFormMedia/index.ts
new file mode 100644
index 000000000..9c13a01d3
--- /dev/null
+++ b/apps/roboshield/src/components/LongFormMedia/index.ts
@@ -0,0 +1,3 @@
+import LongFormMedia from "./LongFormMedia";
+
+export default LongFormMedia;
diff --git a/apps/roboshield/src/components/LongFormRichText/LongFormRichText.tsx b/apps/roboshield/src/components/LongFormRichText/LongFormRichText.tsx
new file mode 100644
index 000000000..1c1a80795
--- /dev/null
+++ b/apps/roboshield/src/components/LongFormRichText/LongFormRichText.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+import RichText from "@/roboshield/components/RichText";
+import { RichTextBlock } from "@/roboshield/components/Content/Content";
+
+export default function LongFormRichText({ content }: RichTextBlock) {
+  return (
+    <RichText
+      elements={content}
+      sx={(theme) => ({
+        color: "inherit",
+        "& a, & a:visited, & a:hover": {
+          color: "inherit",
+        },
+        "& h1": {
+          ...theme.typography.h1,
+          mb: 3.75,
+          mt: 5,
+        },
+        "& h2": {
+          mb: 2.5,
+          mt: 5,
+          ...theme.typography.h2,
+        },
+        "& h3": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h3,
+        },
+        "& h4": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h4,
+        },
+        "& h5": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h5Small,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.h5,
+          },
+        },
+        "& h6": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h6,
+        },
+        "& p": {
+          ...theme.typography.body1,
+          mb: 2,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& a": {
+          ...theme.typography.body1,
+          mb: 2,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& ul": {
+          mb: 2,
+        },
+        "& li": {
+          ...theme.typography.body1,
+          mt: 1,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& :last-child": {
+          mb: 0,
+        },
+      })}
+    />
+  );
+}
diff --git a/apps/roboshield/src/components/LongFormRichText/index.ts b/apps/roboshield/src/components/LongFormRichText/index.ts
new file mode 100644
index 000000000..8fe238b5d
--- /dev/null
+++ b/apps/roboshield/src/components/LongFormRichText/index.ts
@@ -0,0 +1,3 @@
+import LongFormRichText from "./LongFormRichText";
+
+export default LongFormRichText;
diff --git a/apps/roboshield/src/payload/blocks/Content.ts b/apps/roboshield/src/payload/blocks/Content.ts
index 900b73e74..272c0dc80 100644
--- a/apps/roboshield/src/payload/blocks/Content.ts
+++ b/apps/roboshield/src/payload/blocks/Content.ts
@@ -1,5 +1,7 @@
 import { Block } from "payload/types";
-import { slateEditor } from "@payloadcms/richtext-slate";
+import { RichText } from "./RichText";
+import { MediaBlock } from "./MediaBlock";
+import { ExternalEmbedd } from "./ExternalEmbedd";
 
 export const Content: Block = {
   slug: "content",
@@ -9,25 +11,9 @@ export const Content: Block = {
   },
   fields: [
     {
+      type: "blocks",
       name: "content",
-      type: "richText",
-      label: "Content",
-      editor: slateEditor({
-        admin: {
-          elements: [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6",
-            "link",
-            "ol",
-            "ul",
-            "indent",
-          ],
-        },
-      }),
+      blocks: [RichText, MediaBlock, ExternalEmbedd],
     },
   ],
 };
diff --git a/apps/roboshield/src/payload/blocks/ExternalEmbedd.ts b/apps/roboshield/src/payload/blocks/ExternalEmbedd.ts
new file mode 100644
index 000000000..a5a43131c
--- /dev/null
+++ b/apps/roboshield/src/payload/blocks/ExternalEmbedd.ts
@@ -0,0 +1,62 @@
+import { Block } from "payload/types";
+
+export const ExternalEmbedd: Block = {
+  slug: "externalEmbedd",
+  labels: {
+    singular: "External Embedd",
+    plural: "External Embedd",
+  },
+  fields: [
+    {
+      name: "externalEmbeddFields",
+      type: "group",
+      fields: [
+        {
+          type: "row",
+          fields: [
+            {
+              name: "embedType",
+              type: "radio",
+              defaultValue: "url",
+              options: [
+                {
+                  label: "URL",
+                  value: "url",
+                },
+                {
+                  label: "Code",
+                  value: "code",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: "url",
+          label: "URL",
+          type: "text",
+          required: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "url",
+          },
+        },
+        {
+          name: "caption",
+          type: "text",
+          localized: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "url",
+          },
+        },
+        {
+          name: "code",
+          type: "code",
+          required: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "code",
+          },
+        },
+      ],
+    },
+  ],
+};
diff --git a/apps/roboshield/src/payload/blocks/MediaBlock.ts b/apps/roboshield/src/payload/blocks/MediaBlock.ts
new file mode 100644
index 000000000..bc75912b4
--- /dev/null
+++ b/apps/roboshield/src/payload/blocks/MediaBlock.ts
@@ -0,0 +1,16 @@
+import { Block } from "payload/types";
+
+export const MediaBlock: Block = {
+  slug: "mediaBlock",
+  fields: [
+    {
+      name: "image",
+      type: "upload",
+      relationTo: "media",
+      required: true,
+      filterOptions: {
+        mimeType: { contains: "image" },
+      },
+    },
+  ],
+};
diff --git a/apps/roboshield/src/payload/blocks/RichText.ts b/apps/roboshield/src/payload/blocks/RichText.ts
new file mode 100644
index 000000000..d77da261a
--- /dev/null
+++ b/apps/roboshield/src/payload/blocks/RichText.ts
@@ -0,0 +1,16 @@
+import { Block } from "payload/types";
+import richText from "../fields/richText";
+
+export const RichText: Block = {
+  slug: "richtext",
+  labels: {
+    singular: "Rich Text",
+    plural: "Rich Text",
+  },
+  fields: [
+    richText({
+      name: "content",
+      required: true,
+    }),
+  ],
+};
diff --git a/apps/roboshield/src/utils/blocks.ts b/apps/roboshield/src/utils/blocks.ts
index 2c114c59a..852a6f5a8 100644
--- a/apps/roboshield/src/utils/blocks.ts
+++ b/apps/roboshield/src/utils/blocks.ts
@@ -1,2 +1,6 @@
 // Utility type to extract block type
 export type ExtractBlockType<T, U> = T extends { blockType: U } ? T : never;
+
+export type ExtractNestedBlockType<T, U> = T extends { blockType: U }
+  ? T
+  : never;