add PageHero interface and use Payload generated types in hero component

CodeForAfrica · Jul 2, 2024 · 505b542 · 505b542
1 parent b0143bb
commit 505b542
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 34 deletions.
diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
@@ -55,22 +55,7 @@ export interface Page {
             blockName?: string | null;
             blockType: 'page-header';
           }
-        | {
-            heroHeaders?:
-              | {
-                  headingType?: ('largeHeading' | 'subHeading' | 'rotatingText') | null;
-                  title?: string | null;
-                  id?: string | null;
-                }[]
-              | null;
-            heroDescriptiveText: {
-              [k: string]: unknown;
-            }[];
-            heroButtonText?: string | null;
-            id?: string | null;
-            blockName?: string | null;
-            blockType: 'page-hero';
-          }
+        | PageHero
         | {
             toolTipText: string;
             steps?:
@@ -213,6 +198,26 @@ export interface Page {
   createdAt: string;
   _status?: ('draft' | 'published') | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "PageHero".
+ */
+export interface PageHero {
+  heroHeaders?:
+    | {
+        headingType?: ('largeHeading' | 'subHeading' | 'rotatingText') | null;
+        title?: string | null;
+        id?: string | null;
+      }[]
+    | null;
+  heroDescriptiveText: {
+    [k: string]: unknown;
+  }[];
+  heroButtonText?: string | null;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'page-hero';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".

diff --git a/apps/roboshield/src/components/Hero/Hero.tsx b/apps/roboshield/src/components/Hero/Hero.tsx
@@ -5,23 +5,9 @@ import { Box, Button, Typography } from "@mui/material";
 import React from "react";
 import ReactRotatingText from "react-rotating-text";
 import { Theme } from "@mui/material";
+import { PageHero } from "@/root/payload-types";
 
-interface HeroHeader {
-  headingType: "subHeading" | "largeHeading" | "rotatingText";
-  title: string;
-  id: string;
-}
-
-interface HeroProps {
-  heroHeaders: HeroHeader[];
-  heroDescriptiveText: [];
-  heroButtonText: string;
-  id: string;
-  blockType: "page-hero";
-  slug: string;
-}
-
-const Hero = (props: HeroProps) => {
+const Hero = (props: PageHero) => {
   return (
     <Box
       component="section"
@@ -35,7 +21,7 @@ const Hero = (props: HeroProps) => {
       }}
     >
       <Section>
-        {props.heroHeaders.map((header) => (
+        {props.heroHeaders?.map((header) => (
           <div key={header.id}>
             {header.headingType === "subHeading" && (
               <Typography
@@ -88,7 +74,7 @@ const Hero = (props: HeroProps) => {
                   }}
                 >
                   <ReactRotatingText
-                    items={header.title.split(",").map((part) => part.trim())}
+                    items={header?.title?.split(",").map((part) => part.trim())}
                     cursor={false}
                     eraseMode="overwrite"
                   />

diff --git a/apps/roboshield/src/payload/blocks/PageHero.ts b/apps/roboshield/src/payload/blocks/PageHero.ts
@@ -8,6 +8,7 @@ export const PageHero: Block = {
     singular: "Page Hero",
     plural: "Page Hero",
   },
+  interfaceName: "PageHero",
   fields: [
     {
       name: "heroHeaders",