From 145715cdbf493ba4b6c334674a07689c64391f4b Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Mon, 12 Aug 2024 12:46:34 +0300 Subject: [PATCH 1/2] Fix navigation URL --- apps/civicsignalblog/contrib/dokku/Dockerfile | 2 +- apps/civicsignalblog/package.json | 3 +- apps/civicsignalblog/payload.config.ts | 10 ++ .../src/components/ArticlePage/ArticlePage.js | 2 +- .../src/pages/[...slugs].page.js | 3 +- .../src/utils/useLivePreview.js | 53 +++++++++ pnpm-lock.yaml | 102 +++++++++++++++--- 7 files changed, 155 insertions(+), 20 deletions(-) create mode 100644 apps/civicsignalblog/src/utils/useLivePreview.js diff --git a/apps/civicsignalblog/contrib/dokku/Dockerfile b/apps/civicsignalblog/contrib/dokku/Dockerfile index ff2543b4e..0fbc5defc 100644 --- a/apps/civicsignalblog/contrib/dokku/Dockerfile +++ b/apps/civicsignalblog/contrib/dokku/Dockerfile @@ -1 +1 @@ -FROM codeforafrica/codeforafrica-ui:0.1.7 +FROM codeforafrica/codeforafrica-ui:0.1.8 diff --git a/apps/civicsignalblog/package.json b/apps/civicsignalblog/package.json index d1d178d25..96872cfac 100644 --- a/apps/civicsignalblog/package.json +++ b/apps/civicsignalblog/package.json @@ -1,6 +1,6 @@ { "name": "civicsignalblog", - "version": "0.1.7", + "version": "0.1.8", "private": true, "author": "Code for Africa ", "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", diff --git a/apps/civicsignalblog/payload.config.ts b/apps/civicsignalblog/payload.config.ts index 8868d1d3b..027ad12d5 100644 --- a/apps/civicsignalblog/payload.config.ts +++ b/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: { diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js index 532fe74e6..02607b138 100644 --- a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js +++ b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js @@ -33,7 +33,7 @@ function ArticlePage({ }} sx={{ width: "100%", - height: { xs: "163px", md: "600px" }, + height: "40vw", }} /> { + 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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 30ebe5043..f3d321f4f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -309,6 +309,9 @@ importers: '@payloadcms/db-mongodb': specifier: ^1.7.1 version: 1.7.1(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(payload@2.25.0(@swc/helpers@0.5.5)(@types/react@18.3.3)(encoding@0.1.13)(typescript@5.5.4)(webpack@5.93.0(@swc/core@1.7.6(@swc/helpers@0.5.5))(webpack-cli@4.10.0))) + '@payloadcms/live-preview': + specifier: ^0.2.2 + version: 0.2.2 '@payloadcms/live-preview-react': specifier: ^0.2.0 version: 0.2.0(react@18.3.1) @@ -14192,7 +14195,7 @@ snapshots: '@aws-crypto/sha1-browser': 5.2.0 '@aws-crypto/sha256-browser': 5.2.0 '@aws-crypto/sha256-js': 5.2.0 - '@aws-sdk/client-sso-oidc': 3.623.0(@aws-sdk/client-sts@3.623.0) + '@aws-sdk/client-sso-oidc': 3.623.0(@aws-sdk/client-sts@3.621.0) '@aws-sdk/client-sts': 3.623.0 '@aws-sdk/core': 3.623.0 '@aws-sdk/credential-provider-node': 3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.623.0) @@ -14294,7 +14297,51 @@ snapshots: tslib: 2.6.3 transitivePeerDependencies: - aws-crt - optional: true + + '@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.621.0)': + dependencies: + '@aws-crypto/sha256-browser': 5.2.0 + '@aws-crypto/sha256-js': 5.2.0 + '@aws-sdk/client-sts': 3.621.0 + '@aws-sdk/core': 3.623.0 + '@aws-sdk/credential-provider-node': 3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.621.0) + '@aws-sdk/middleware-host-header': 3.620.0 + '@aws-sdk/middleware-logger': 3.609.0 + '@aws-sdk/middleware-recursion-detection': 3.620.0 + '@aws-sdk/middleware-user-agent': 3.620.0 + '@aws-sdk/region-config-resolver': 3.614.0 + '@aws-sdk/types': 3.609.0 + '@aws-sdk/util-endpoints': 3.614.0 + '@aws-sdk/util-user-agent-browser': 3.609.0 + '@aws-sdk/util-user-agent-node': 3.614.0 + '@smithy/config-resolver': 3.0.5 + '@smithy/core': 2.3.2 + '@smithy/fetch-http-handler': 3.2.4 + '@smithy/hash-node': 3.0.3 + '@smithy/invalid-dependency': 3.0.3 + '@smithy/middleware-content-length': 3.0.5 + '@smithy/middleware-endpoint': 3.1.0 + '@smithy/middleware-retry': 3.0.14 + '@smithy/middleware-serde': 3.0.3 + '@smithy/middleware-stack': 3.0.3 + '@smithy/node-config-provider': 3.1.4 + '@smithy/node-http-handler': 3.1.4 + '@smithy/protocol-http': 4.1.0 + '@smithy/smithy-client': 3.1.12 + '@smithy/types': 3.3.0 + '@smithy/url-parser': 3.0.3 + '@smithy/util-base64': 3.0.0 + '@smithy/util-body-length-browser': 3.0.0 + '@smithy/util-body-length-node': 3.0.0 + '@smithy/util-defaults-mode-browser': 3.0.14 + '@smithy/util-defaults-mode-node': 3.0.14 + '@smithy/util-endpoints': 2.0.5 + '@smithy/util-middleware': 3.0.3 + '@smithy/util-retry': 3.0.3 + '@smithy/util-utf8': 3.0.0 + tslib: 2.6.3 + transitivePeerDependencies: + - aws-crt '@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0)': dependencies: @@ -14383,7 +14430,6 @@ snapshots: tslib: 2.6.3 transitivePeerDependencies: - aws-crt - optional: true '@aws-sdk/client-sso@3.623.0': dependencies: @@ -14472,7 +14518,6 @@ snapshots: tslib: 2.6.3 transitivePeerDependencies: - aws-crt - optional: true '@aws-sdk/client-sts@3.623.0': dependencies: @@ -14530,7 +14575,6 @@ snapshots: '@smithy/util-middleware': 3.0.3 fast-xml-parser: 4.4.1 tslib: 2.6.3 - optional: true '@aws-sdk/core@3.623.0': dependencies: @@ -14573,7 +14617,6 @@ snapshots: '@smithy/types': 3.3.0 '@smithy/util-stream': 3.1.3 tslib: 2.6.3 - optional: true '@aws-sdk/credential-provider-http@3.622.0': dependencies: @@ -14604,7 +14647,6 @@ snapshots: transitivePeerDependencies: - '@aws-sdk/client-sso-oidc' - aws-crt - optional: true '@aws-sdk/credential-provider-ini@3.621.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.621.0)': dependencies: @@ -14625,6 +14667,24 @@ snapshots: - aws-crt optional: true + '@aws-sdk/credential-provider-ini@3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.621.0)': + dependencies: + '@aws-sdk/client-sts': 3.621.0 + '@aws-sdk/credential-provider-env': 3.620.1 + '@aws-sdk/credential-provider-http': 3.622.0 + '@aws-sdk/credential-provider-process': 3.620.1 + '@aws-sdk/credential-provider-sso': 3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0)) + '@aws-sdk/credential-provider-web-identity': 3.621.0(@aws-sdk/client-sts@3.621.0) + '@aws-sdk/types': 3.609.0 + '@smithy/credential-provider-imds': 3.2.0 + '@smithy/property-provider': 3.1.3 + '@smithy/shared-ini-file-loader': 3.1.4 + '@smithy/types': 3.3.0 + tslib: 2.6.3 + transitivePeerDependencies: + - '@aws-sdk/client-sso-oidc' + - aws-crt + '@aws-sdk/credential-provider-ini@3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.623.0)': dependencies: '@aws-sdk/client-sts': 3.623.0 @@ -14661,7 +14721,6 @@ snapshots: - '@aws-sdk/client-sso-oidc' - '@aws-sdk/client-sts' - aws-crt - optional: true '@aws-sdk/credential-provider-node@3.621.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.621.0)': dependencies: @@ -14683,6 +14742,25 @@ snapshots: - aws-crt optional: true + '@aws-sdk/credential-provider-node@3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.621.0)': + dependencies: + '@aws-sdk/credential-provider-env': 3.620.1 + '@aws-sdk/credential-provider-http': 3.622.0 + '@aws-sdk/credential-provider-ini': 3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.621.0) + '@aws-sdk/credential-provider-process': 3.620.1 + '@aws-sdk/credential-provider-sso': 3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0)) + '@aws-sdk/credential-provider-web-identity': 3.621.0(@aws-sdk/client-sts@3.621.0) + '@aws-sdk/types': 3.609.0 + '@smithy/credential-provider-imds': 3.2.0 + '@smithy/property-provider': 3.1.3 + '@smithy/shared-ini-file-loader': 3.1.4 + '@smithy/types': 3.3.0 + tslib: 2.6.3 + transitivePeerDependencies: + - '@aws-sdk/client-sso-oidc' + - '@aws-sdk/client-sts' + - aws-crt + '@aws-sdk/credential-provider-node@3.623.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))(@aws-sdk/client-sts@3.623.0)': dependencies: '@aws-sdk/credential-provider-env': 3.620.1 @@ -14722,7 +14800,6 @@ snapshots: transitivePeerDependencies: - '@aws-sdk/client-sso-oidc' - aws-crt - optional: true '@aws-sdk/credential-provider-sso@3.621.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))': dependencies: @@ -14758,7 +14835,6 @@ snapshots: '@smithy/property-provider': 3.1.3 '@smithy/types': 3.3.0 tslib: 2.6.3 - optional: true '@aws-sdk/credential-provider-web-identity@3.621.0(@aws-sdk/client-sts@3.623.0)': dependencies: @@ -14920,7 +14996,6 @@ snapshots: '@smithy/shared-ini-file-loader': 3.1.4 '@smithy/types': 3.3.0 tslib: 2.6.3 - optional: true '@aws-sdk/token-providers@3.614.0(@aws-sdk/client-sso-oidc@3.623.0(@aws-sdk/client-sts@3.623.0))': dependencies: @@ -18811,7 +18886,6 @@ snapshots: '@smithy/types': 3.3.0 '@smithy/util-middleware': 3.0.3 tslib: 2.6.3 - optional: true '@smithy/core@2.3.2': dependencies: @@ -18936,7 +19010,6 @@ snapshots: '@smithy/util-retry': 3.0.3 tslib: 2.6.3 uuid: 9.0.1 - optional: true '@smithy/middleware-retry@3.0.14': dependencies: @@ -19024,7 +19097,6 @@ snapshots: '@smithy/types': 3.3.0 '@smithy/util-stream': 3.1.3 tslib: 2.6.3 - optional: true '@smithy/smithy-client@3.1.12': dependencies: @@ -19080,7 +19152,6 @@ snapshots: '@smithy/types': 3.3.0 bowser: 2.11.0 tslib: 2.6.3 - optional: true '@smithy/util-defaults-mode-browser@3.0.14': dependencies: @@ -19099,7 +19170,6 @@ snapshots: '@smithy/smithy-client': 3.1.11 '@smithy/types': 3.3.0 tslib: 2.6.3 - optional: true '@smithy/util-defaults-mode-node@3.0.14': dependencies: From 5f3adbc2166048ce8781ef3b165a8dfee759f0c6 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Mon, 12 Aug 2024 12:51:53 +0300 Subject: [PATCH 2/2] Fix failing test --- .../src/components/ArticlePage/ArticlePage.snap.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js index 88b9c27cd..c79a3e09b 100644 --- a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js +++ b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js @@ -6,7 +6,7 @@ exports[` renders unchanged 1`] = ` class="MuiBox-root css-0" >