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

CodeForAfrica · Nov 4, 2024 · 1d4de1f · 1d4de1f
2 parents 0093f3a + 37f75b3
commit 1d4de1f
Show file tree

Hide file tree

Showing 32 changed files with 2,406 additions and 1,940 deletions.
diff --git a/apps/climatemappedafrica/.eslintignore b/apps/climatemappedafrica/.eslintignore
@@ -0,0 +1,36 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+.pnpm-debug.log
+
+# typescript
+dist/
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# payload
+build/
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vercel
+.vercel
+.now
+
+# turbo
+.turbo
+test-results/
+playwright-report/
diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.4",
   "private": true,
   "author": "Code for Africa <tech@codeforafrica.org>",
-  "description": "Climate Mapped Africa ",
+  "description": "ClimateMapped Africa",
   "keywords": [
     "climatemappedafrica",
     "next",
@@ -65,7 +65,6 @@
     "next": "catalog:",
     "next-images": "catalog:",
     "next-seo": "catalog:",
-    "nodemailer-sendgrid": "catalog:",
     "papaparse": "catalog:",
     "payload": "catalog:",
     "plaiceholder": "catalog:",

diff --git a/apps/climatemappedafrica/server.ts b/apps/climatemappedafrica/server.ts
@@ -2,18 +2,29 @@ import path from "path";
 import { spawn } from "child_process";
 import express from "express";
 import next from "next";
-import nodemailerSendgrid from "nodemailer-sendgrid";
-import payload from "payload";
-import { Payload } from "payload/dist/payload";
 import { loadEnvConfig } from "@next/env";
+import type { Payload } from "payload/dist/payload";
+
+// TODO(kilemensi): Figure out why alias "@/climatemappedafrica" doesn't work here
+import { getClient } from "./src/lib/payload/payload-client";
 
 const projectDir = process.cwd();
 loadEnvConfig(projectDir);
 
 const dev = process.env.NODE_ENV !== "production";
 const hostname = process.env.NEXT_HOSTNAME || "localhost";
 const port = parseInt(process.env.PORT || "3000", 10);
-const sendGridAPIKey = process.env.SENDGRID_API_KEY;
+// TODO(kilemensi): Migrate to SMTP email setup instead of SendGrid specific
+const smtpAuthPass = process.env.SMTP_PASS || process.env.SENDGRID_API_KEY;
+const smtpFromName =
+  process.env.SMTP_FROM_NAME ||
+  process.env.SENDGRID_FROM_NAME ||
+  "ClimateMapped Africa CMS";
+const smtpFromAddress =
+  process.env.SMTP_FROM_ADDRESS ||
+  process.env.SENDGRID_FROM_EMAIL ||
+  "noreply@dodeforafrica.org";
+const smtpPort = Number(process.env.SMTP_PORT || 587);
 
 if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
   process.on("SIGTERM", () => process.exit(0));
@@ -25,24 +36,30 @@ const app = express();
 const start = async (): Promise<void> => {
   let localPayload: Payload;
   try {
-    localPayload = await payload.init({
-      ...(sendGridAPIKey
+    localPayload = await getClient({
+      ...(smtpAuthPass
         ? {
             email: {
-              transportOptions: nodemailerSendgrid({
-                apiKey: sendGridAPIKey,
-              }),
-              fromName:
-                process.env.SENDGRID_FROM_NAME || "ClimateMapped Africa CMS",
-              fromAddress:
-                process.env.SENDGRID_FROM_EMAIL || "noreply@dodeforafrica.org",
+              transportOptions: {
+                auth: {
+                  user: process.env.SMTP_USER || "apikey",
+                  apiKey: 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),
-      secret: process.env.PAYLOAD_SECRET,
       express: app,
+      local: false,
       onInit: (initPayload) => {
-        initPayload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
+        initPayload.logger.info(
+          `Payload Admin URL: ${initPayload.getAdminURL()}`,
+        );
       },
     });
   } catch (e: any) {

diff --git a/apps/climatemappedafrica/src/components/DataIndicators/Icon.js b/apps/climatemappedafrica/src/components/DataIndicators/Icon.js
@@ -22,7 +22,7 @@ function Icon({ item, handleIconClick, currentItemIndex, index }) {
       >
         <Image
           src={index === currentItemIndex ? secondaryIcon : primaryIcon}
-          layout="fill"
+          fill
         />
       </Box>
       <Typography

diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -16,7 +16,7 @@ import Link from "@/climatemappedafrica/components/Link";
 
 function DropdownSearch({
   href: hrefProp = "/explore",
-  label = "Search for a location",
+  label,
   locations,
   onClick,
   icon: IconProp = SearchIcon,
@@ -87,8 +87,8 @@ function DropdownSearch({
         component={iconComponent}
         viewBox="0 0 48 48"
         sx={{
-          width: 48,
-          height: 48,
+          width: 40,
+          height: 40,
           ...iconBorder,
         }}
       />
@@ -97,34 +97,35 @@ function DropdownSearch({
 
   return (
     <Box id="location-search">
-      <Typography
-        variant="body1"
-        sx={({ palette, typography }) => ({
-          color: palette.text.primary,
-          marginBottom: typography.pxToRem(10),
-        })}
-      >
-        {label}
-      </Typography>
+      {label && (
+        <Typography
+          variant="body1"
+          sx={({ palette, typography }) => ({
+            color: palette.text.primary,
+            marginBottom: typography.pxToRem(10),
+          })}
+        >
+          {label}
+        </Typography>
+      )}
       <InputBase
         inputProps={{ "aria-label": "search" }}
         onChange={handleChange}
         placeholder={placeholder}
         value={query}
-        {...props}
         sx={({ typography, palette }) => ({
           borderRadius: typography.pxToRem(10),
           color: palette.primary.main,
           border: `2px solid ${palette.text.hint}`,
           width: typography.pxToRem(278),
           backgroundColor: "inherit",
           height: typography.pxToRem(48),
-          padding: `0 ${typography.pxToRem(20)}`,
+          padding: 0,
           "&.MuiInputBase-input": {
             backgroundColor: "inherit",
             height: typography.pxToRem(48),
             borderRadius: typography.pxToRem(10),
-            padding: `0 ${typography.pxToRem(20)}`,
+            padding: 0,
             textTransform: "capitalize",
           },
           "&.Mui-focused": {

diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js
@@ -12,7 +12,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-78q71b-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
     >
       <input
         aria-label="search"
@@ -29,7 +29,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kzlhbf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -16,7 +16,7 @@ function initialState(
   onClick,
   explorePagePath,
   initialLocationCode,
-  pinInitialLocation,
+  rootGeographyHasData,
 ) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
@@ -26,22 +26,22 @@ function initialState(
     ],
     explorePagePath,
     initialLocationCode,
-    pinInitialLocation,
+    rootGeographyHasData,
   };
 }
 
 function ExplorePage({
-  initialLocation,
+  rootGeography,
   explorePagePath,
   panel: PanelProps = {},
   profile: profileProp,
   ...props
 }) {
   const {
     center,
-    name: initialLocationCode,
-    pinInitialLocation,
-  } = initialLocation;
+    code: initialLocationCode,
+    rootGeographyHasData,
+  } = rootGeography;
   const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
@@ -57,7 +57,7 @@ function ExplorePage({
       handleClickTag,
       explorePagePath,
       initialLocationCode,
-      pinInitialLocation,
+      rootGeographyHasData,
     ),
   );
   useEffect(() => {
@@ -68,19 +68,22 @@ function ExplorePage({
         handleClickTag,
         explorePagePath,
         initialLocationCode,
-        pinInitialLocation,
+        rootGeographyHasData,
       ),
     });
   }, [
     dispatch,
     profileProp,
     explorePagePath,
     initialLocationCode,
-    pinInitialLocation,
+    rootGeographyHasData,
   ]);
   useEffect(() => {
     if (geoCode) {
-      dispatch({ type: "fetch", payload: { code: geoCode } });
+      dispatch({
+        type: "fetch",
+        payload: { code: geoCode, onClick: handleClickTag },
+      });
     }
   }, [dispatch, geoCode]);
 
@@ -94,7 +97,7 @@ function ExplorePage({
     if (data) {
       dispatch({
         type: "show",
-        payload: { profile: data, options: { onClick: handleClickTag } },
+        payload: { profile: data, onClick: handleClickTag },
       });
     }
   }, [dispatch, data]);
@@ -209,10 +212,10 @@ function ExplorePage({
 
 ExplorePage.propTypes = {
   center: PropTypes.arrayOf(PropTypes.number),
-  initialLocation: PropTypes.shape({
+  rootGeography: PropTypes.shape({
     center: PropTypes.arrayOf(PropTypes.number),
     name: PropTypes.string,
-    pinInitialLocation: PropTypes.bool,
+    rootGeographyHasData: PropTypes.bool,
   }),
   explorePagePath: PropTypes.string,
   panel: PropTypes.shape({}),

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -24,7 +24,7 @@ function initializer({
   explorePagePath,
   initialLocationCode,
   profiles,
-  pinInitialLocation,
+  rootGeographyHasData,
   options,
 }) {
   const [primary, secondary] = profiles;
@@ -37,12 +37,12 @@ function initializer({
     secondary: extendProfileTags(secondary, secondaryOptions, explorePagePath),
     explorePagePath,
     initialLocationCode,
-    pinInitialLocation,
+    rootGeographyHasData,
   };
 }
 
 function reducer(state, action) {
-  const { explorePagePath, initialLocationCode, pinInitialLocation } = state;
+  const { explorePagePath, initialLocationCode, rootGeographyHasData } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -95,7 +95,7 @@ function reducer(state, action) {
       if (state.primary.geography.code.toLowerCase() !== initialLocationCode) {
         return { ...state, isPinning: true };
       }
-      return { ...state, isPinning: pinInitialLocation };
+      return { ...state, isPinning: rootGeographyHasData };
     case "compare": {
       const code = action.payload?.code;
       if (code) {

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
@@ -1,7 +1,7 @@
-import RichTypography from "@commons-ui/legacy/RichTypography";
+import { RichText } from "@commons-ui/payload";
 import { Grid, Typography, IconButton, Avatar } from "@mui/material";
 import { useTour } from "@reactour/tour";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -56,9 +56,18 @@ function TutorialStep({ description, title, image, selector, ...props }) {
             </Avatar>
           </Grid>
           <Grid item xs={8}>
-            <RichTypography className={classes.description}>
-              {description}
-            </RichTypography>
+            <RichText
+              elements={description}
+              sx={(theme) => ({
+                marginLeft: theme.typography.pxToRem(16),
+                width: theme.typography.pxToRem(278),
+                lineHeight: 30 / 16,
+                "& p": {
+                  marginTop: 0,
+                  marginBottom: theme.typography.pxToRem(32),
+                },
+              })}
+            />
           </Grid>
         </Grid>
         <Grid item xs={12} md={6}>
@@ -70,7 +79,7 @@ function TutorialStep({ description, title, image, selector, ...props }) {
 }
 
 TutorialStep.propTypes = {
-  description: PropTypes.string,
+  description: PropTypes.arrayOf(PropTypes.shape({})),
   image: PropTypes.string,
   onClose: PropTypes.func,
   title: PropTypes.string,