Merge pull request #779 from CodeForAfrica/enhancement/766-roboshield…

…-payload-ux @/RoboShield Add Payload Live Previews
CodeForAfrica · Jul 15, 2024 · b012959 · b012959
2 parents e820c5d + 74cda1a
commit b012959
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 24 deletions.
diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json
@@ -29,6 +29,7 @@
     "@next/env": "^14.2.5",
     "@payloadcms/bundler-webpack": "^1.0.7",
     "@payloadcms/db-mongodb": "^1.5.2",
+    "@payloadcms/live-preview-react": "^0.2.0",
     "@payloadcms/plugin-cloud-storage": "^1.1.3",
     "@payloadcms/plugin-nested-docs": "^1.0.12",
     "@payloadcms/plugin-sentry": "^0.0.6",

diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
@@ -55,7 +55,7 @@ export interface Page {
             blockName?: string | null;
             blockType: "page-header";
           }
-        | PageHero
+        | SiteHero
         | {
             content?:
               | (
@@ -108,7 +108,6 @@ export interface Page {
             blockType: "statistics";
           }
         | {
-            showRobotsTxt: string;
             steps?:
               | (
                   | {
@@ -218,7 +217,8 @@ export interface Page {
                     }
                 )[]
               | null;
-            labels: {
+            actions: {
+              showRobotsTxt: string;
               continue: string;
               back: string;
               reset: string;
@@ -251,20 +251,20 @@ export interface Page {
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "PageHero".
+ * via the `definition` "SiteHero".
  */
-export interface PageHero {
+export interface SiteHero {
   heroHeaders?:
     | {
         headingType?: ("largeHeading" | "subHeading" | "rotatingText") | null;
         title?: string | null;
         id?: string | null;
       }[]
     | null;
-  heroDescriptiveText: {
+  heroDescription: {
     [k: string]: unknown;
   }[];
-  heroButtonText?: string | null;
+  heroCallToAction?: string | null;
   id?: string | null;
   blockName?: string | null;
   blockType: "page-hero";

diff --git a/apps/roboshield/payload.config.ts b/apps/roboshield/payload.config.ts
@@ -60,6 +60,16 @@ export default buildConfig({
     : undefined),
   admin: {
     user: Users.slug,
+    livePreview: {
+      breakpoints: [
+        {
+          label: "Mobile",
+          name: "mobile",
+          width: 375,
+          height: 667,
+        },
+      ],
+    },
     webpack: (config) => ({
       ...config,
       resolve: {

diff --git a/apps/roboshield/src/components/Hero/Hero.tsx b/apps/roboshield/src/components/Hero/Hero.tsx
@@ -4,9 +4,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";
+import { SiteHero } from "@/root/payload-types";
 
-const Hero = (props: PageHero) => {
+const Hero = (props: SiteHero) => {
   return (
     <Box
       component="section"
@@ -105,7 +105,7 @@ const Hero = (props: PageHero) => {
             },
             mt: "2.5em",
           })}
-          elements={props.heroDescriptiveText}
+          elements={props.heroDescription}
         />
 
         <Button
@@ -124,7 +124,7 @@ const Hero = (props: PageHero) => {
             },
           }}
         >
-          {props.heroButtonText}
+          {props.heroCallToAction}
         </Button>
       </Section>
     </Box>

diff --git a/apps/roboshield/src/pages/[[...slug]].tsx b/apps/roboshield/src/pages/[[...slug]].tsx
@@ -2,10 +2,19 @@ import { getPageServerSideProps } from "@/roboshield/lib/data";
 import BlockRenderer from "@/roboshield/components/BlockRenderer";
 import { PageProps } from "@/roboshield/lib/data";
 import { GetServerSidePropsContext } from "next";
+import { useLivePreview } from "@payloadcms/live-preview-react";
 
-export default function Page({ blocks }: PageProps) {
-  return <BlockRenderer blocks={blocks} />;
-}
+const Page: React.FC<PageProps> = (initialPage) => {
+  const { data } = useLivePreview({
+    serverURL: process.env.NEXT_PUBLIC_APP_URL || "",
+    depth: 2,
+    initialData: initialPage,
+  });
+
+  return <BlockRenderer blocks={data?.blocks} />;
+};
+
+export default Page;
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const { props } = await getPageServerSideProps(context);

diff --git a/...roboshield/src/payload/blocks/PageHero.ts → ...roboshield/src/payload/blocks/SiteHero.ts b/...roboshield/src/payload/blocks/PageHero.ts → ...roboshield/src/payload/blocks/SiteHero.ts
@@ -2,15 +2,15 @@ import { Block } from "payload/types";
 import richText from "../fields/richText";
 import { RowLabelArgs } from "payload/dist/admin/components/forms/RowLabel/types";
 
-export const PageHero: Block = {
+export const SiteHero: Block = {
   slug: "page-hero",
   imageURL: "/images/cms/blocks/hero.png",
   imageAltText: "Used in homepage",
   labels: {
-    singular: "Page Hero",
-    plural: "Page Hero",
+    singular: "Site Hero",
+    plural: "Site Hero",
   },
-  interfaceName: "PageHero",
+  interfaceName: "SiteHero",
   fields: [
     {
       name: "heroHeaders",
@@ -58,14 +58,14 @@ export const PageHero: Block = {
       },
     },
     richText({
-      name: "heroDescriptiveText",
+      name: "heroDescription",
       required: true,
-      label: "Descriptive Text",
+      label: "Description",
     }),
     {
-      name: "heroButtonText",
+      name: "heroCallToAction",
       type: "text",
-      label: "Call to Action Button Text",
+      label: "Call to Action",
     },
   ],
 };
diff --git a/apps/roboshield/src/payload/collections/Pages.ts b/apps/roboshield/src/payload/collections/Pages.ts
@@ -3,10 +3,10 @@ import fullTitle from "../fields/fullTitle";
 import slug from "../fields/slug";
 import RobotsTxtGenerator from "../blocks/RobotsTxtGenerator";
 import { PageHeader } from "../blocks/PageHeader";
-import { PageHero } from "../blocks/PageHero";
 import { Content } from "../blocks/Content";
 import { Statistics } from "../blocks/Statistics";
 import formatDraftUrl from "../utils/formatDraftUrl";
+import { SiteHero } from "../blocks/SiteHero";
 
 const Pages: CollectionConfig = {
   slug: "pages",
@@ -20,6 +20,10 @@ const Pages: CollectionConfig = {
     group: "Publication",
     useAsTitle: "title",
     preview: (doc) => formatDraftUrl("pages", doc),
+    livePreview: {
+      url: ({ data }) =>
+        `${process.env.PAYLOAD_PUBLIC_APP_URL}${data.slug !== "home" ? `/${data.slug}` : ""}`,
+    },
   },
   fields: [
     {
@@ -33,7 +37,7 @@ const Pages: CollectionConfig = {
     {
       name: "blocks",
       type: "blocks",
-      blocks: [PageHeader, PageHero, Content, Statistics, RobotsTxtGenerator],
+      blocks: [PageHeader, SiteHero, Content, Statistics, RobotsTxtGenerator],
       localized: true,
       admin: {
         initCollapsed: true,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml