Merge branch 'main' into chore/build-arm-image

.github/workflows/climatemappedafrica-deploy-dev.yml

@@ -60,7 +60,6 @@ jobs:
         uses: docker/build-push-action@v3
         with:
           build-args: |
-            HURUMAP_API_URL=${{ secrets.CLIMATEMAPPEDAFRICA_HURUMAP_API_URL }}
             MONGO_URL=${{ secrets.CLIMATEMAPPEDAFRICA_MONGO_URL }}
             NEXT_PUBLIC_APP_URL=${{ env.NEXT_PUBLIC_APP_URL }}
             PAYLOAD_SECRET=${{ secrets.CLIMATEMAPPEDAFRICA_PAYLOAD_SECRET }}

Dockerfile

@@ -387,9 +387,7 @@ ARG NEXT_TELEMETRY_DISABLED \
   SENTRY_AUTH_TOKEN \
   SENTRY_ENVIRONMENT \
   SENTRY_ORG \
-  SENTRY_PROJECT \
-  # Custom (runtime)
-  HURUMAP_API_URL
+  SENTRY_PROJECT
 
 # This is in app-builder instead of base-builder just incase app-deps adds deps
 COPY --from=climatemappedafrica-deps /workspace/node_modules ./node_modules

apps/charterafrica/package.json

@@ -68,7 +68,6 @@
     "monaco-editor": "catalog:",
     "next": "catalog:",
     "next-seo": "catalog:",
-    "nodemailer-sendgrid": "catalog:",
     "payload": "catalog:",
     "prop-types": "catalog:",
     "qs": "catalog:",

apps/charterafrica/server.ts

@@ -4,7 +4,6 @@ import { spawn } from "child_process";
 import { loadEnvConfig } from "@next/env";
 import express from "express";
 import next from "next";
-import nodemailerSendgrid from "nodemailer-sendgrid";
 import payload from "payload";
 import { Payload } from "payload/dist/payload";
 
@@ -20,8 +19,17 @@ const dev = process.env.NODE_ENV !== "production";
 // https://github.com/vercel/next.js/discussions/33835#discussioncomment-2559392
 const hostname = process.env.NEXT_HOSTNAME || "localhost";
 const port = Number.parseInt(process.env.PORT || "3000", 10);
-const sendGridAPIKey = process.env.SENDGRID_API_KEY;
 
+const smtpAuthPass = process.env.SMTP_PASS || process.env.SENDGRID_API_KEY;
+const smtpFromName =
+  process.env.SMTP_FROM_NAME ||
+  process.env.SENDGRID_FROM_NAME ||
+  "Charter Africa CMS";
+const smtpFromAddress =
+  process.env.SMTP_FROM_ADDRESS ||
+  process.env.SENDGRID_FROM_EMAIL ||
+  "[email protected]";
+const smtpPort = Number(process.env.SMTP_PORT || 587);
 // Make sure commands gracefully respect termination signals (e.g. from Docker)
 // Allow the graceful termination to be manually configurable
 if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
@@ -35,15 +43,20 @@ const start = async (): Promise<void> => {
   let localPayload: Payload;
   try {
     localPayload = await payload.init({
-      ...(sendGridAPIKey
+      ...(smtpAuthPass
         ? {
             email: {
-              transportOptions: nodemailerSendgrid({
-                apiKey: sendGridAPIKey,
-              }),
-              fromName: process.env.SENDGRID_FROM_NAME || "Admin",
-              fromAddress:
-                process.env.SENDGRID_FROM_EMAIL || "[email protected]",
+              transportOptions: {
+                auth: {
+                  user: process.env.SMTP_USER || "apikey",
+                  pass: smtpAuthPass,
+                },
+                host: process.env.SMTP_HOST || "smtp.sendgrid.net",
+                port: smtpPort,
+                secure: smtpPort === 465, // true for port 465, false (the default) for 587 and others
+              },
+              fromName: smtpFromName,
+              fromAddress: smtpFromAddress,
             },
           }
         : undefined),

apps/civicsignalblog/src/components/ArticleGrid/ArticleGrid.js

@@ -1,6 +1,6 @@
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
-import { Grid } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 
 import ArticleCardList from "@/civicsignalblog/components/ArticleCardList";
@@ -26,12 +26,10 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
   return (
     <Section sx={{ px: { xs: "20px", sm: 0 }, ...sx }} {...other} ref={ref}>
       <Grid container sx={{ py: { xs: "28px", md: 8, lg: "105.29px" } }}>
-        <Grid
-          item
-          xs={12}
+        <Box
           sx={{
             order: { xs: 0, md: 1 },
-            display: articles?.length > 0 ? "flex" : "none",
+            width: "100%",
           }}
         >
           {/* title is below featuredArticle in md and above hence needs margin-top */}
@@ -59,7 +57,7 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
               mb: { xs: 2.5, md: 5 },
             }}
           />
-        </Grid>
+        </Box>
         {featuredArticle ? (
           <Grid
             item

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

@@ -9,7 +9,7 @@ exports[`<ArticleGrid /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1rk8ai9-MuiGrid-root"
+        class="MuiBox-root css-1xugy04"
       >
         <div
           class="MuiStack-root css-kbcct1-MuiStack-root"

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

@@ -10,7 +10,7 @@ exports[`<Articles /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1cj7j73-MuiGrid-root"
+          class="MuiBox-root css-1xugy04"
         >
           <div
             class="MuiTypography-root MuiTypography-h4 css-7yxv5i-MuiTypography-root"

apps/civicsignalblog/src/components/Footer/FooterDescription.js

@@ -29,7 +29,7 @@ const FooterDescription = React.forwardRef(
         </Link>
         <RichText
           variant="footer"
-          typographyProps={{
+          TypographyProps={{
             LinkProps: {
               color: "text.secondary",
               sx: { textDecorationColor: "text.secondary" },

apps/civicsignalblog/src/components/LongFormMedia/LongFormMedia.js

@@ -12,32 +12,34 @@ const LongFormMedia = React.forwardRef((props, ref) => {
       }}
       ref={ref}
     >
-      <Figure
-        ImageProps={{
-          alt: image.alt,
-          sx: {
-            objectFit: "cover",
-            position: "relative !important",
-          },
-          src: image.src,
-        }}
-        sx={{
-          height: {
-            xs: "200px",
-            md: "500px",
-          },
-          width: "100%",
-        }}
-      >
-        <figcaption
-          style={{
+      {image && (
+        <Figure
+          ImageProps={{
+            alt: image.alt,
+            sx: {
+              objectFit: "cover",
+              position: "relative !important",
+            },
+            src: image.src,
+          }}
+          sx={{
+            height: {
+              xs: "200px",
+              md: "500px",
+            },
             width: "100%",
-            margin: "0 auto",
           }}
         >
-          {image.alt}
-        </figcaption>
-      </Figure>
+          <figcaption
+            style={{
+              width: "100%",
+              margin: "0 auto",
+            }}
+          >
+            {image.alt}
+          </figcaption>
+        </Figure>
+      )}
     </Box>
   );
 });

apps/civicsignalblog/src/components/NavBar/NavBar.js

@@ -67,8 +67,4 @@ NavBar.propTypes = {
   ),
 };
 
-NavBar.defaultProps = {
-  menus: undefined,
-};
-
 export default NavBar;

apps/civicsignalblog/src/components/Page/Page.js

@@ -36,12 +36,4 @@ Page.propTypes = {
   title: PropTypes.string,
 };
 
-Page.defaultProps = {
-  children: undefined,
-  navbar: undefined,
-  blocks: undefined,
-  footer: undefined,
-  title: undefined,
-};
-
 export default Page;

apps/civicsignalblog/src/components/PageHeader/PageHeader.js

@@ -33,7 +33,7 @@ const PageHeader = React.forwardRef(function PageHeader(props, ref) {
           {title}
         </RichTypography>
         <RichText
-          typographyProps={{
+          TypographyProps={{
             fontWeight: "normal",
             variant: "h2",
           }}

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

@@ -15,10 +15,9 @@ exports[`<PageHeader /> renders unchanged 1`] = `
       </h2>
       <div
         class="MuiBox-root css-0"
-        typographyprops="[object Object]"
       >
-        <p
-          class="MuiTypography-root MuiTypography-body1 css-oo170e-MuiTypography-root"
+        <h2
+          class="MuiTypography-root MuiTypography-h2 css-hd3436-MuiTypography-root"
         >
           Let's
           <strong>
@@ -28,7 +27,7 @@ exports[`<PageHeader /> renders unchanged 1`] = `
           <strong>
              together
           </strong>
-        </p>
+        </h2>
       </div>
     </div>
   </div>

apps/civicsignalblog/src/lib/data/common/index.js

@@ -155,11 +155,13 @@ function getDefaultErrorPageProps(slug = "404") {
 }
 
 export async function getPageProps(api, context) {
-  const { params } = context;
+  const { params, draftMode = false } = context;
+  const options = { draft: draftMode };
+
   const slug = getPageSlug(context);
   let {
     docs: [page],
-  } = await api.findPage(slug);
+  } = await api.findPage(slug, options);
   if (!page) {
     if (["404", "500"].includes(slug)) {
       return getDefaultErrorPageProps(slug);

apps/civicsignalblog/src/lib/data/pagify/post.js

@@ -1,10 +1,11 @@
 import { getPost } from "@/civicsignalblog/lib/data/utils/posts";
 
 async function post(api, context) {
-  const { params } = context;
+  const { params, draftMode = false } = context;
+  const options = { draft: draftMode };
   const page = params.slugs[1];
   const slug = params.slugs[2];
-  return getPost(api, slug, page);
+  return getPost(api, slug, page, options);
 }
 
 export default post;

apps/civicsignalblog/src/lib/data/utils/posts.js

@@ -90,8 +90,9 @@ export async function getPosts(api, params, primaryTag) {
   };
 }
 
-export async function getPost(api, slug, primaryTag) {
+export async function getPost(api, slug, primaryTag, options) {
   const { docs } = await api.getCollection("posts", {
+    ...options,
     where: {
       slug: {
         equals: slug,

apps/civicsignalblog/src/payload/access/canAccessApplication.js

@@ -4,7 +4,7 @@ export default async function canAccessApplication(req, searchString) {
   if (user) {
     const app = headers["CS-App"] || user.currentApp || user.defaultApp;
     return (
-      app.toLowerCase() === searchString.toLowerCase() &&
+      app?.toLowerCase() === searchString.toLowerCase() &&
       user.allowedApps.includes(app)
     );
   }

apps/civicsignalblog/src/payload/components/allowedAppSelect/index.tsx

@@ -6,7 +6,7 @@ import applications from "#civicsignalblog/payload/lib/data/common/applications"
 
 function CustomSelectComponent({ path, label }) {
   const { user } = useAuth();
-  const { value, setValue } = useField({ path });
+  const { value, setValue } = useField<string>({ path });
   const [options, setOptions] = useState([]);
 
   useEffect(() => {
@@ -32,7 +32,7 @@ function CustomSelectComponent({ path, label }) {
         path={path}
         name={path}
         options={options}
-        value={String(value)}
+        value={value}
         onChange={(e) => setValue(e.value)}
       />
     </div>

apps/climatemappedafrica/.env.template

@@ -30,6 +30,3 @@ S3_REGION=bucket-region-us-east-1
 MONGO_URL="mongodb+srv://<user>:<pass>@host/db"
 PAYLOAD_PUBLIC_APP_URL="http://localhost:3000"
 PAYLOAD_SECRET="secure random string"
-
-# HURUmap
-HURUMAP_API_URL="https://ng.hurumap.org/api/v1/"

apps/climatemappedafrica/public/site.webmanifest

@@ -1,19 +1,21 @@
 {
-  "name": "",
-  "short_name": "",
+  "name": "ClimateMap Africa",
+  "short_name": "CM A",
   "icons": [
     {
-      "src": "/android-chrome-192x192.png",
+      "src": "/web-app-manifest-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "/android-chrome-512x512.png",
+      "src": "/web-app-manifest-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
-  "theme_color": "#ffffff",
+  "theme_color": "#0B2AEA",
   "background_color": "#ffffff",
   "display": "standalone"
 }