Merge pull request #841 from CodeForAfrica/fix/ui_layout_rerender

@/roboshild CMS Improvements
CodeForAfrica · Aug 20, 2024 · 0e1f1c1 · 0e1f1c1
2 parents 3e12167 + 7ba0659
commit 0e1f1c1
Show file tree

Hide file tree

Showing 27 changed files with 917 additions and 420 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -387,9 +387,12 @@ ARG NEXT_PUBLIC_APP_LOGO_URL \
   PAYLOAD_PUBLIC_APP_URL
 
 # TODO(koech): Standadise naming of GA MEASUREMENT ID. Our options:
-#              - GA_MEASUREMENT_ID (charterafrica, civicsignalblog, codeforafrica)
-#              - GOOGLE_ANALYTICS_ID (pesayetu, roboshield, vpnmanager)
+#              - GA_MEASUREMENT_ID (charterafrica)
+#              - GOOGLE_ANALYTICS_ID (pesayetu, vpnmanager)
 #              This is only needed at runtime
+# TODO(koech): Completely remove the use of ENV vars for Google Analytics
+#              for those app that have CMS. Measurement id should be set
+#              in the Settings part of a site.
 ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \
   PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \
   PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH}
@@ -437,106 +440,102 @@ CMD ["node", "dist/server.js"]
 # codeforafrica-desp: image with all codeforafrica dependencies
 # -------------------------------------------------------------
 
-  FROM base-deps AS codeforafrica-deps
-
-  # TODO(kilemensi): Figure out why this is needed
-  COPY packages/commons-ui-testing-library/package.json ./packages/commons-ui-testing-library/package.json
-
-  COPY apps/codeforafrica/package.json ./apps/codeforafrica/package.json
-
-  RUN pnpm --filter "./apps/codeforafrica/" install --offline --frozen-lockfile
-
-  #
-  # codeforafrica-builder: image that uses deps to build shippable output
-  # ---------------------------------------------------------------------
-
-  FROM base-builder AS codeforafrica-builder
-
-  ARG NEXT_TELEMETRY_DISABLED \
-    # Next.js / Payload (build time)
-    PORT \
-    # Next.js (runtime)
-    NEXT_PUBLIC_APP_NAME="Code for Africa" \
-    NEXT_PUBLIC_APP_URL \
-    NEXT_PUBLIC_SENTRY_DSN \
-    # Payload (runtime)
-    # TODO(koech): Standadise naming of Mongo DB URL. Our options:
-    #              - MONGODB_URL (codeforafrica)
-    #              - MONGO_URL (charterafrica, roboshield)
-    MONGODB_URL \
-    PAYLOAD_SECRET \
-    # Sentry (build time)
-    SENTRY_AUTH_TOKEN \
-    SENTRY_ENVIRONMENT \
-    SENTRY_ORG \
-    SENTRY_PROJECT
-
-  # This is in app-builder instead of base-builder just incase app-deps adds deps
-  COPY --from=codeforafrica-deps /workspace/node_modules ./node_modules
-
-  COPY --from=codeforafrica-deps /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules
-
-  COPY apps/codeforafrica ./apps/codeforafrica/
-
-  # When building Next.js app, Next.js needs to connect to local Payload
-  ENV PAYLOAD_PUBLIC_APP_URL=http://localhost:3000
-  RUN pnpm --filter "./apps/codeforafrica/" build-next
-
-  # When building Payload app, Payload needs to have final app URL
-  ENV PAYLOAD_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL}
-  RUN pnpm --filter "./apps/codeforafrica/" build-payload
-
-  #
-  # codeforafrica-runner: final deployable image
-  # --------------------------------------------
-
-  FROM base-runner AS codeforafrica-runner
-
-  ARG NEXT_PUBLIC_APP_LOGO_URL \
-    PAYLOAD_CONFIG_PATH="dist/payload.config.js" \
-    PAYLOAD_PUBLIC_APP_URL
-
-  # TODO(koech): Standadise naming of GA MEASUREMENT ID. Our options:
-  #              - GA_MEASUREMENT_ID (charterafrica, codeforafrica)
-  #              - GOOGLE_ANALYTICS_ID (pesayetu, roboshield, vpnmanager)
-  #              This is only needed at runtime
-  ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \
-    PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \
-    PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH}
-
-  RUN set -ex \
-    # Create nextjs cache dir w/ correct permissions
-    && mkdir -p ./apps/codeforafrica//.next \
-    && chown nextjs:nodejs ./apps/codeforafrica/.next
-
-  # PNPM
-  # symlink some dependencies
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/node_modules ./node_modules
-
-  # Since we can't use output: "standalone", copy all app's dependencies
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/next.config.js ./apps/codeforafrica/next.config.js
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.env ./apps/codeforafrica/.env
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/migrations ./apps/codeforafrica/migrations
-  # Next.js
-  # Public assets
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/public ./apps/codeforafrica/public
-
-  # Since we can't use output: "standalone", copy the whole app's .next folder
-  # TODO(kilemensi): Figure out which files in .next folder are not needed
-  COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.next ./apps/codeforafrica/.next
-
-  # Payload
-  COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/dist ./apps/codeforafrica/dist
-  COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/build ./apps/codeforafrica/build
-
-  # Since we can't use output: "standalone", switch to specific app's folder
-  WORKDIR /workspace/apps/codeforafrica
-
-  USER nextjs
-
-  # Custom server to run Payload and Next.js in the same app
-  CMD ["node", "dist/server.js"]
+FROM base-deps AS codeforafrica-deps
+
+# TODO(kilemensi): Figure out why this is needed
+COPY packages/commons-ui-testing-library/package.json ./packages/commons-ui-testing-library/package.json
+
+COPY apps/codeforafrica/package.json ./apps/codeforafrica/package.json
+
+RUN pnpm --filter "./apps/codeforafrica/" install --offline --frozen-lockfile
+
+#
+# codeforafrica-builder: image that uses deps to build shippable output
+# ---------------------------------------------------------------------
+
+FROM base-builder AS codeforafrica-builder
+
+ARG NEXT_TELEMETRY_DISABLED \
+  # Next.js / Payload (build time)
+  PORT \
+  # Next.js (runtime)
+  NEXT_PUBLIC_APP_NAME="Code for Africa" \
+  NEXT_PUBLIC_APP_URL \
+  NEXT_PUBLIC_SENTRY_DSN \
+  # Payload (runtime)
+  # TODO(koech): Standadise naming of Mongo DB URL. Our options:
+  #              - MONGODB_URL (codeforafrica)
+  #              - MONGO_URL (charterafrica, roboshield)
+  MONGODB_URL \
+  PAYLOAD_SECRET \
+  # Sentry (build time)
+  SENTRY_AUTH_TOKEN \
+  SENTRY_ENVIRONMENT \
+  SENTRY_ORG \
+  SENTRY_PROJECT
+
+# This is in app-builder instead of base-builder just incase app-deps adds deps
+COPY --from=codeforafrica-deps /workspace/node_modules ./node_modules
+
+COPY --from=codeforafrica-deps /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules
+
+COPY apps/codeforafrica ./apps/codeforafrica/
+
+# When building Next.js app, Next.js needs to connect to local Payload
+ENV PAYLOAD_PUBLIC_APP_URL=http://localhost:3000
+RUN pnpm --filter "./apps/codeforafrica/" build-next
+
+# When building Payload app, Payload needs to have final app URL
+ENV PAYLOAD_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL}
+RUN pnpm --filter "./apps/codeforafrica/" build-payload
+
+#
+# codeforafrica-runner: final deployable image
+# --------------------------------------------
+
+FROM base-runner AS codeforafrica-runner
+
+ARG NEXT_PUBLIC_APP_LOGO_URL \
+  PAYLOAD_CONFIG_PATH="dist/payload.config.js" \
+  PAYLOAD_PUBLIC_APP_URL
+
+ENV NEXT_PUBLIC_APP_LOGO_URL=${NEXT_PUBLIC_APP_LOGO_URL} \
+  PAYLOAD_PUBLIC_APP_URL=${PAYLOAD_PUBLIC_APP_URL} \
+  PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH}
+
+RUN set -ex \
+  # Create nextjs cache dir w/ correct permissions
+  && mkdir -p ./apps/codeforafrica//.next \
+  && chown nextjs:nodejs ./apps/codeforafrica/.next
+
+# PNPM
+# symlink some dependencies
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/node_modules ./node_modules
+
+# Since we can't use output: "standalone", copy all app's dependencies
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/node_modules ./apps/codeforafrica/node_modules
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/next.config.js ./apps/codeforafrica/next.config.js
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.env ./apps/codeforafrica/.env
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/migrations ./apps/codeforafrica/migrations
+# Next.js
+# Public assets
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/public ./apps/codeforafrica/public
+
+# Since we can't use output: "standalone", copy the whole app's .next folder
+# TODO(kilemensi): Figure out which files in .next folder are not needed
+COPY --from=codeforafrica-builder --chown=nextjs:nodejs /workspace/apps/codeforafrica/.next ./apps/codeforafrica/.next
+
+# Payload
+COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/dist ./apps/codeforafrica/dist
+COPY --from=codeforafrica-builder /workspace/apps/codeforafrica/build ./apps/codeforafrica/build
+
+# Since we can't use output: "standalone", switch to specific app's folder
+WORKDIR /workspace/apps/codeforafrica
+
+USER nextjs
+
+# Custom server to run Payload and Next.js in the same app
+CMD ["node", "dist/server.js"]
 
 
 # ============================================================================

diff --git a/apps/climatemappedafrica/.env.template b/apps/climatemappedafrica/.env.template
@@ -35,4 +35,4 @@ S3_UPLOAD_BUCKET=name-of-s3-bucket
 S3_UPLOAD_REGION=bucket-region-us-east-1
 
 #Analytics
-NEXT_PUBLIC_GOOGLE_ANALYTICS = "G-xxxxxxxx"
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
diff --git a/apps/climatemappedafrica/src/lib/ga/index.js b/apps/climatemappedafrica/src/lib/ga/index.js
@@ -1,7 +1,7 @@
 // log the pageview with their URL
 export const pageview = (url) => {
   /* eslint-env browser */
-  window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
+  window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID, {
     page_path: url,
   });
 };

diff --git a/apps/climatemappedafrica/src/pages/_document.js b/apps/climatemappedafrica/src/pages/_document.js
@@ -12,7 +12,7 @@ export default class MyDocument extends Document {
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           <script
             async
-            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
           />
           <script
             // eslint-disable-next-line react/no-danger
@@ -21,7 +21,7 @@ export default class MyDocument extends Document {
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
+            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {
               page_path: window.location.pathname,
             });
           `,

diff --git a/apps/climatemappedafrica/turbo.json b/apps/climatemappedafrica/turbo.json
@@ -9,7 +9,6 @@
       "env": [
         "HURUMAP_API_URL",
         "NEXT_PUBLIC_APP_URL",
-        "NEXT_PUBLIC_GOOGLE_ANALYTICS",
         "NEXT_PUBLIC_IMAGE_DOMAINS",
         "NEXT_PUBLIC_IMAGE_UNOPTIMIZED",
         "NEXT_PUBLIC_IMAGE_SCALE_FACTOR",

diff --git a/apps/pesayetu/.env.template b/apps/pesayetu/.env.template
@@ -54,7 +54,7 @@ S3_UPLOAD_BUCKET=name-of-s3-bucket
 S3_UPLOAD_REGION=bucket-region-us-east-1
 
 #Analytics
-NEXT_PUBLIC_GOOGLE_ANALYTICS = "G-xxxxxxxx"
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
 
 # Storybook Telemetry
 # https://storybook.js.org/docs/configure/telemetry

diff --git a/apps/pesayetu/src/lib/ga/index.js b/apps/pesayetu/src/lib/ga/index.js
@@ -1,7 +1,7 @@
 // log the pageview with their URL
 export const pageview = (url) => {
   /* eslint-env browser */
-  window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
+  window.gtag("config", process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID, {
     page_path: url,
   });
 };

diff --git a/apps/pesayetu/src/pages/_document.js b/apps/pesayetu/src/pages/_document.js
@@ -12,7 +12,7 @@ export default class MyDocument extends Document {
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           <script
             async
-            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
           />
           <script
             // eslint-disable-next-line react/no-danger
@@ -21,7 +21,7 @@ export default class MyDocument extends Document {
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
-            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
+            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {
               page_path: window.location.pathname,
             });
           `,

diff --git a/apps/pesayetu/turbo.json b/apps/pesayetu/turbo.json
@@ -10,7 +10,6 @@
         "HURUMAP_API_URL",
         "JWT_SECRET_KEY",
         "NEXT_PUBLIC_APP_URL",
-        "NEXT_PUBLIC_GOOGLE_ANALYTICS",
         "NEXT_PUBLIC_IMAGE_DOMAINS",
         "NEXT_PUBLIC_IMAGE_UNOPTIMIZED",
         "NEXT_PUBLIC_IMAGE_SCALE_FACTOR",

diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json
@@ -43,6 +43,7 @@
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "next": "^14.2.5",
+    "next-seo": "^6.5.0",
     "nodemailer-sendgrid": "^1.0.3",
     "payload": "^2.25.0",
     "react": "^18.3.1",

diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
@@ -390,6 +390,9 @@ export interface SettingsSite {
     title: string;
     embedCode: string;
   };
+  analytics?: {
+    analyticsId?: string | null;
+  };
   initiative: {
     title: string;
     description: {
@@ -411,6 +414,11 @@ export interface SettingsSite {
         }[]
       | null;
   };
+  meta?: {
+    title?: string | null;
+    description?: string | null;
+    image?: string | Media | null;
+  };
   updatedAt?: string | null;
   createdAt?: string | null;
 }
diff --git a/apps/roboshield/payload.config.ts b/apps/roboshield/payload.config.ts
@@ -1,19 +1,19 @@
-import { buildConfig } from "payload/config";
-import { slateEditor } from "@payloadcms/richtext-slate";
-import { mongooseAdapter } from "@payloadcms/db-mongodb";
+import { loadEnvConfig } from "@next/env";
 import { webpackBundler } from "@payloadcms/bundler-webpack";
-import { CollectionConfig, GlobalConfig } from "payload/types";
+import { mongooseAdapter } from "@payloadcms/db-mongodb";
 import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
-import Site from "./src/payload/globals/Site";
+import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+import nestedDocs from "@payloadcms/plugin-nested-docs";
+import seo from "@payloadcms/plugin-seo";
+import { slateEditor } from "@payloadcms/richtext-slate";
+import { buildConfig } from "payload/config";
+import { CollectionConfig, GlobalConfig } from "payload/types";
+import { Config } from "./payload-types";
 import Media from "./src/payload/collections/Media";
 import Pages from "./src/payload/collections/Pages";
-import seo from "@payloadcms/plugin-seo";
-import nestedDocs from "@payloadcms/plugin-nested-docs";
-import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
 import Users from "./src/payload/collections/Users";
+import Site from "./src/payload/globals/Site";
 import { defaultLocale, locales } from "./src/payload/utils/locales";
-import { loadEnvConfig } from "@next/env";
-import { Config } from "./payload-types";
 
 const projectDir = process.cwd();
 loadEnvConfig(projectDir);
@@ -109,7 +109,7 @@ export default buildConfig({
     }),
     seo({
       collections: ["pages"],
-      globals: [],
+      globals: ["settings-site"],
       uploadsCollection: "media",
       generateTitle: ({ doc }: any) => doc?.title?.value as string,
       generateURL: ({ doc }: any) =>

diff --git a/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx b/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx
@@ -22,11 +22,10 @@ export default function BlockRenderer({ blocks }: BlockRendererProps) {
       {blocks?.map((block) => {
         const Component: FC<any> = components[block.blockType];
 
-        if (Component) {
-          return <Component key={block.blockType} {...block} />;
+        if (!Component) {
+          return null;
         }
-
-        return null;
+        return <Component {...block} key={block.id} />;
       })}
     </>
   );