Merge pull request #835 from CodeForAfrica/bugfix/url-navigation

@civicsignalblog /Fix navigation URL

apps/civicsignalblog/contrib/dokku/Dockerfile

@@ -1 +1 @@
-FROM codeforafrica/codeforafrica-ui:0.1.7
+FROM codeforafrica/codeforafrica-ui:0.1.8

apps/civicsignalblog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "civicsignalblog",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "author": "Code for Africa <tech@codeforafrica.org>",
   "description": "This is the (temporary) CivicSignal blog",
@@ -47,6 +47,7 @@
     "@next/env": "^14.2.5",
     "@payloadcms/bundler-webpack": "^1.0.7",
     "@payloadcms/db-mongodb": "^1.7.1",
+    "@payloadcms/live-preview": "^0.2.2",
     "@payloadcms/live-preview-react": "^0.2.0",
     "@payloadcms/plugin-cloud-storage": "^1.1.3",
     "@payloadcms/plugin-nested-docs": "^1.0.12",

apps/civicsignalblog/payload.config.ts

@@ -77,6 +77,16 @@ export default buildConfig({
   admin: {
     css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),
     user: Users.slug,
+    livePreview: {
+      breakpoints: [
+        {
+          label: "Mobile",
+          name: "mobile",
+          width: 375,
+          height: 667,
+        },
+      ],
+    },
     webpack: (config) => ({
       ...config,
       resolve: {

apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js

@@ -33,7 +33,7 @@ function ArticlePage({
         }}
         sx={{
           width: "100%",
-          height: { xs: "163px", md: "600px" },
+          height: "40vw",
         }}
       />
       <ArticleHeader

apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js

@@ -6,7 +6,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <figure
-      class="MuiBox-root css-nxzwqu"
+      class="MuiBox-root css-1ne42gc"
     >
       <img
         alt="Article"

apps/civicsignalblog/src/pages/[...slugs].page.js

@@ -1,4 +1,3 @@
-import { useLivePreview } from "@payloadcms/live-preview-react";
 import React from "react";
 import { SWRConfig } from "swr";
 
@@ -9,6 +8,7 @@ import LongForm from "@/civicsignalblog/components/LongForm/LongForm";
 import PageHeader from "@/civicsignalblog/components/PageHeader";
 import RelatedStories from "@/civicsignalblog/components/RelatedStories";
 import { getPageServerSideProps } from "@/civicsignalblog/lib/data";
+import { useLivePreview } from "@/civicsignalblog/utils/useLivePreview";
 
 const componentsBySlugs = {
   article: ArticlePage,
@@ -25,6 +25,7 @@ function Index(initialData) {
     depth: 2,
     initialData,
   });
+
   const { blocks, fallback } = props;
   if (!blocks?.length) {
     return null;

apps/civicsignalblog/src/utils/useLivePreview.js

@@ -0,0 +1,53 @@
+import { subscribe, unsubscribe, ready } from "@payloadcms/live-preview";
+import { useCallback, useEffect, useState, useRef } from "react";
+
+export const useLivePreview = (props) => {
+  const { depth = 0, initialData, serverURL } = props;
+  const [data, setData] = useState(initialData);
+  const [isLoading, setIsLoading] = useState(true);
+  const hasSentReadyMessage = useRef(false);
+
+  const onChange = useCallback((mergedData) => {
+    // When a change is made, the `onChange` callback will be called with the merged data
+    // Set this merged data into state so that React will re-render the UI
+    setData(mergedData);
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    // Listen for `window.postMessage` events from the Admin panel
+    // When a change is made, the `onChange` callback will be called with the merged data
+    const subscription = subscribe({
+      callback: onChange,
+      depth,
+      initialData,
+      serverURL,
+    });
+
+    // Once subscribed, send a `ready` message back up to the Admin panel
+    // This will indicate that the front-end is ready to receive messages
+    if (!hasSentReadyMessage.current) {
+      hasSentReadyMessage.current = true;
+
+      ready({
+        serverURL,
+      });
+    }
+
+    // When the component unmounts, unsubscribe from the `window.postMessage` events
+    return () => {
+      unsubscribe(subscription);
+    };
+  }, [serverURL, onChange, depth, initialData, hasSentReadyMessage]);
+
+  useEffect(() => {
+    setData(initialData);
+  }, [initialData]);
+
+  return {
+    data,
+    isLoading,
+  };
+};
+
+export default useLivePreview;