@/CivicSignalBlog: Misc fixes on CivicSignal blog

apps/civicsignalblog/migrations/20241122_054517_migration.ts

@@ -0,0 +1,46 @@
+import { MigrateUpArgs, MigrateDownArgs } from "@payloadcms/db-mongodb";
+import mongoose from "mongoose";
+
+const mongoURL = process.env.MONGO_URL;
+const oldGlobalConfigType = "settings-site";
+const newGlobalConfigType = "settings-research-site";
+
+export async function up({ payload }: MigrateUpArgs): Promise<void> {
+  await mongoose.connect(mongoURL);
+  const db = mongoose.connection.db;
+
+  const existingOldGlobalConfig = await db.collection("globals").findOne({
+    globalType: oldGlobalConfigType,
+  });
+
+  if (!existingOldGlobalConfig) {
+    payload.logger.info(
+      `No existing global settings [${oldGlobalConfigType}] config found, exiting...`,
+    );
+    return;
+  }
+
+  const existingNewGlobalConfig = await db.collection("globals").findOne({
+    globalType: newGlobalConfigType,
+  });
+
+  if (existingNewGlobalConfig) {
+    payload.logger.error(
+      `Migration 20241122_054517 failed: Global type [${newGlobalConfigType}] already exists.`,
+    );
+    return;
+  }
+
+  try {
+    const { _id, globalType, ...newGlobalConfig } = existingOldGlobalConfig;
+    newGlobalConfig.globalType = newGlobalConfigType;
+    await db.collection("globals").insertOne(newGlobalConfig);
+    payload.logger.info(
+      `✓ Successfully migrated global config [${oldGlobalConfigType}] to [${newGlobalConfigType}]`,
+    );
+  } catch (error) {
+    payload.logger.error("Error: Migration 20241122_054517 failed.");
+    throw error;
+  }
+}
+export async function down({ payload }: MigrateDownArgs): Promise<void> {}

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

@@ -1,6 +1,6 @@
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
-import { Box, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import React from "react";
 
 import ArticleCardList from "@/civicsignalblog/components/ArticleCardList";
@@ -26,38 +26,35 @@ 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" } }}>
-        <Box
-          sx={{
-            order: { xs: 0, md: 1 },
-            width: "100%",
-          }}
-        >
-          {/* title is below featuredArticle in md and above hence needs margin-top */}
-          <RichTypography
-            variant="h4"
-            sx={{
-              mb: "10px",
-              mt: {
-                md: featuredArticle?.id ? 5 : 0,
-              },
-            }}
-          >
-            {title}
-          </RichTypography>
-          <FilterBar
-            onChangeQ={onChangeQ}
-            onChangeTag={onChangeTag}
-            q={q}
-            tag={selectedTag}
-            tags={tags}
-            SearchInputProps={{
-              placeholder: searchLabel,
-            }}
-            sx={{
-              mb: { xs: 2.5, md: 5 },
-            }}
-          />
-        </Box>
+        {articles?.length > 0 && (
+          <Grid item xs={12} sx={{ order: { xs: 0, md: 1 } }}>
+            {/* title is below featuredArticle in md and above hence needs margin-top */}
+            <RichTypography
+              variant="h4"
+              sx={{
+                mb: "10px",
+                mt: {
+                  md: featuredArticle?.id ? 5 : 0,
+                },
+              }}
+            >
+              {title}
+            </RichTypography>
+            <FilterBar
+              onChangeQ={onChangeQ}
+              onChangeTag={onChangeTag}
+              q={q}
+              tag={selectedTag}
+              tags={tags}
+              SearchInputProps={{
+                placeholder: searchLabel,
+              }}
+              sx={{
+                mb: { xs: 2.5, md: 5 },
+              }}
+            />
+          </Grid>
+        )}
         {featuredArticle ? (
           <Grid
             item

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

@@ -7,58 +7,7 @@ exports[`<ArticleGrid /> renders unchanged 1`] = `
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
-    >
-      <div
-        class="MuiBox-root css-1xugy04"
-      >
-        <div
-          class="MuiStack-root css-kbcct1-MuiStack-root"
-        >
-          <div
-            class="MuiFormControl-root MuiTextField-root css-1w88xu6-MuiFormControl-root-MuiTextField-root"
-          >
-            <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wq2s8-MuiInputBase-root-MuiOutlinedInput-root"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
-                type="search"
-                value=""
-              />
-              <button
-                aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
-                tabindex="0"
-                type="button"
-              >
-                <div
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
-                  focusable="false"
-                  viewbox="0 0 16 16"
-                />
-              </button>
-              <fieldset
-                aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-              >
-                <legend
-                  class="css-ihdtdm"
-                >
-                  <span
-                    class="notranslate"
-                  >
-                    ​
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;

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="MuiBox-root css-1xugy04"
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
         >
           <div
             class="MuiTypography-root MuiTypography-h4 css-7yxv5i-MuiTypography-root"

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

@@ -121,7 +121,7 @@ export async function getPost(api, slug, primaryTag, options) {
     description: excerpt,
     image: coverImage ?? null,
     article: {
-      authors: authors?.map((a) => a.fullname || a.bio) ?? null,
+      authors: authors?.map((a) => a.fullName || a.bio) ?? null,
       publishedAt: publishedOn,
       tags: tags.length ? tags.map((t) => t.name) : null,
       updatedAt,

apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.js

@@ -26,33 +26,35 @@ 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} sx={{ order: { xs: 0, md: 1 } }}>
-          {/* title is below featuredArticle in md and above hence needs margin-top */}
-          <RichTypography
-            variant="h4"
-            sx={{
-              mb: "10px",
-              mt: {
-                md: featuredArticle?.id ? 5 : 0,
-              },
-            }}
-          >
-            {title}
-          </RichTypography>
-          <FilterBar
-            onChangeQ={onChangeQ}
-            onChangeTag={onChangeTag}
-            q={q}
-            tag={selectedTag}
-            tags={tags}
-            SearchInputProps={{
-              placeholder: searchLabel,
-            }}
-            sx={{
-              mb: { xs: 2.5, md: 5 },
-            }}
-          />
-        </Grid>
+        {articles?.length > 0 && (
+          <Grid item xs={12} sx={{ order: { xs: 0, md: 1 } }}>
+            {/* title is below featuredArticle in md and above hence needs margin-top */}
+            <RichTypography
+              variant="h4"
+              sx={{
+                mb: "10px",
+                mt: {
+                  md: featuredArticle?.id ? 5 : 0,
+                },
+              }}
+            >
+              {title}
+            </RichTypography>
+            <FilterBar
+              onChangeQ={onChangeQ}
+              onChangeTag={onChangeTag}
+              q={q}
+              tag={selectedTag}
+              tags={tags}
+              SearchInputProps={{
+                placeholder: searchLabel,
+              }}
+              sx={{
+                mb: { xs: 2.5, md: 5 },
+              }}
+            />
+          </Grid>
+        )}
         {featuredArticle ? (
           <Grid
             item

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

@@ -7,58 +7,7 @@ exports[`<ArticleGrid /> renders unchanged 1`] = `
   >
     <div
       class="MuiGrid-root MuiGrid-container css-teoma9-MuiGrid-root"
-    >
-      <div
-        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-17kpph-MuiGrid-root"
-      >
-        <div
-          class="MuiStack-root css-kbcct1-MuiStack-root"
-        >
-          <div
-            class="MuiFormControl-root MuiTextField-root css-1p0a819-MuiFormControl-root-MuiTextField-root"
-          >
-            <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1avksc5-MuiInputBase-root-MuiOutlinedInput-root"
-            >
-              <input
-                aria-invalid="false"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-uotzle-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
-                type="search"
-                value=""
-              />
-              <button
-                aria-label="search"
-                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-k4oz44-MuiButtonBase-root-MuiIconButton-root"
-                tabindex="0"
-                type="button"
-              >
-                <div
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-iusnk6-MuiSvgIcon-root"
-                  focusable="false"
-                  viewbox="0 0 16 16"
-                />
-              </button>
-              <fieldset
-                aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-              >
-                <legend
-                  class="css-ihdtdm"
-                >
-                  <span
-                    class="notranslate"
-                  >
-                    ​
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;