enhancement: Add Live Preview Support to Payload

CodeForAfrica · Jul 15, 2024 · 77b18ab · 77b18ab
1 parent aa387c5
commit 77b18ab
Showing 1 changed file with 12 additions and 3 deletions.
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);