Merge pull request #931 from CodeForAfrica/feat/civicsignal_webtools_…

…media_data

@/CivicSignalBlog - Add Ability to Manage MediaData Page

apps/civicsignalblog/.eslintrc.js

@@ -1,6 +1,9 @@
 module.exports = {
   root: true,
   extends: ["eslint-config-commons-ui/next"],
+  rules: {
+    "react/jsx-filename-extension": [1, { extensions: [".js", ".tsx"] }], // This rule allows JSX syntax in both .js and tsx files
+  },
   settings: {
     "import/resolver": {
       webpack: {

apps/civicsignalblog/jsconfig.json

@@ -4,7 +4,8 @@
     "paths": {
       "@/civicsignalblog/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
-      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"]
+      "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
+      "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"]
     }
   },
   "exclude": ["node_modules"]

apps/civicsignalblog/next.config.js

@@ -17,7 +17,11 @@ const nextConfig = {
   },
   pageExtensions: ["page.js"],
   reactStrictMode: true,
-  transpilePackages: ["@commons-ui/core", "@commons-ui/next"],
+  transpilePackages: [
+    "@commons-ui/core",
+    "@commons-ui/next",
+    "@commons-ui/payload",
+  ],
   webpack: (config) => {
     config.module.rules.push(
       {

apps/civicsignalblog/package.json

@@ -41,6 +41,7 @@
     "@aws-sdk/lib-storage": "catalog:",
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
+    "@commons-ui/payload": "workspace:*",
     "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",
     "@emotion/server": "catalog:",

apps/civicsignalblog/payload.config.ts

@@ -1,28 +1,30 @@
 import path from "path";
 
-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 { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+import nestedDocs from "@payloadcms/plugin-nested-docs";
 import { sentry } from "@payloadcms/plugin-sentry";
 import seo from "@payloadcms/plugin-seo";
-import nestedDocs from "@payloadcms/plugin-nested-docs";
-import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
-import { loadEnvConfig } from "@next/env";
+import { slateEditor } from "@payloadcms/richtext-slate";
+import { Request, Response, NextFunction } from "express";
+import { buildConfig } from "payload/config";
+import { CollectionConfig, GlobalConfig } from "payload/types";
 
-import Actions from "./src/payload/components/actions";
+import MediaData from "./src/payload/collections/Main/MediaData";
+import CivicSignalPages from "./src/payload/collections/Main/Pages";
 import Authors from "./src/payload/collections/Research/Authors";
 import Media from "./src/payload/collections/Research/Media";
 import Pages from "./src/payload/collections/Research/Pages";
-import CivicSignalPages from "./src/payload/collections/Main/Pages";
 import Posts from "./src/payload/collections/Research/Posts";
-import Publication from "./src/payload/globals/Publication";
-import Research from "./src/payload/globals/Site/research";
-import Main from "./src/payload/globals/Site/main";
 import Tags from "./src/payload/collections/Research/Tags";
 import Users from "./src/payload/collections/Users";
+import Actions from "./src/payload/components/actions";
+import Publication from "./src/payload/globals/Publication";
+import Main from "./src/payload/globals/Site/main";
+import Research from "./src/payload/globals/Site/research";
 import { applicationPages } from "./src/payload/lib/data/common/applications";
 import { defaultLocale, locales } from "./src/payload/utils/locales";
 
@@ -37,6 +39,8 @@ const cors =
     ?.map((d) => d.trim())
     ?.filter(Boolean) ?? [];
 
+const customHeaders: string[] = ["CS-App"];
+
 const csrf =
   process?.env?.PAYLOAD_CSRF?.split(",")
     ?.map((d) => d.trim())
@@ -67,6 +71,7 @@ export default buildConfig({
     Posts,
     Tags,
     CivicSignalPages,
+    MediaData,
     Users,
   ] as CollectionConfig[],
   globals: [Publication, Research, Main] as GlobalConfig[],
@@ -153,4 +158,19 @@ export default buildConfig({
     }),
   ] as any[],
   telemetry: process?.env?.NODE_ENV !== "production",
+  // We need to add a postMiddleware function to add support for custom headers in Payload
+  express: {
+    postMiddleware: [
+      (_req: Request, res: Response, next: NextFunction) => {
+        const existingHeaders =
+          res.getHeader("Access-Control-Allow-Headers") || "";
+        const controlHeaders = customHeaders
+          .concat((existingHeaders as string).split(","))
+          .filter((h) => h)
+          .join(", ");
+        res.header("Access-Control-Allow-Headers", controlHeaders);
+        next();
+      },
+    ],
+  },
 });

apps/civicsignalblog/server.ts

@@ -1,11 +1,12 @@
-import path from "path";
 import { spawn } from "child_process";
+import path from "path";
+
+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";
-import { loadEnvConfig } from "@next/env";
 
 const dev = process.env.NODE_ENV !== "production";
 const projectDir = process.cwd();

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

@@ -13,7 +13,7 @@ exports[`<CMSContent /> renders unchanged 1`] = `
       >
         Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit css-1yokalx-MuiTypography-root-MuiLink-root-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-ww82j7-MuiTypography-root-MuiLink-root-MuiTypography-root"
           href="https://whomakesthenews.org/gmmp-2020-final-reports/"
           rel="noreferrer noopener"
           target="_blank"

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

@@ -1,11 +1,10 @@
 /* eslint-env browser */
 import { Figure, Link } from "@commons-ui/next";
+import { RichText } from "@commons-ui/payload";
 import { Stack } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import RichText from "@/civicsignalblog/components/RichText";
-
 const FooterDescription = React.forwardRef(
   function FooterDescription(props, ref) {
     const { description, logo, sx } = props;

apps/civicsignalblog/src/components/LongFormRichText/LongFormRichText.js

@@ -1,7 +1,6 @@
+import { RichText } from "@commons-ui/payload";
 import React from "react";
 
-import RichText from "@/civicsignalblog/components/RichText";
-
 const LongFormRichText = React.forwardRef((props, ref) => {
   const { richTextBlockFields: { content } = {} } = props;
 

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

@@ -10,7 +10,7 @@ exports[`<LongFormRichText /> renders unchanged 1`] = `
     >
       Women make up only 22% of the people seen, heard or read about in the news in Africa, the results of the 
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit css-1yokalx-MuiTypography-root-MuiLink-root-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-body1 css-ww82j7-MuiTypography-root-MuiLink-root-MuiTypography-root"
         href="https://whomakesthenews.org/gmmp-2020-final-reports/"
         rel="noreferrer noopener"
         target="_blank"

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

@@ -1,5 +1,6 @@
 import { Section } from "@commons-ui/core";
 import { RichTypography } from "@commons-ui/next";
+import { RichText } from "@commons-ui/payload";
 import React from "react";
 
 import TwoToneBackground from "../TwoToneBackground";
@@ -31,9 +32,13 @@ const PageHeader = React.forwardRef(function PageHeader(props, ref) {
         >
           {title}
         </RichTypography>
-        <RichTypography component="h2" variant="h2">
-          {subtitle}
-        </RichTypography>
+        <RichText
+          typographyProps={{
+            fontWeight: "normal",
+            variant: "h2",
+          }}
+          elements={subtitle}
+        />
       </Section>
     </TwoToneBackground>
   );

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

@@ -13,11 +13,22 @@ exports[`<PageHeader /> renders unchanged 1`] = `
       >
         Contact
       </h2>
-      <h2
-        class="MuiTypography-root MuiTypography-h2 css-1w3bpx1-MuiTypography-root"
+      <div
+        class="MuiBox-root css-0"
       >
-        Let’s start something together!
-      </h2>
+        <h2
+          class="MuiTypography-root MuiTypography-h2 css-hd3436-MuiTypography-root"
+        >
+          Let's
+          <strong>
+             start 
+          </strong>
+          something
+          <strong>
+             together
+          </strong>
+        </h2>
+      </div>
     </div>
   </div>
 </div>

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

@@ -10,7 +10,16 @@ const render = createRender({ theme });
 
 const defaultProps = {
   title: "Contact",
-  subtitle: "Let’s start something together!",
+  subtitle: [
+    {
+      children: [
+        { text: "Let's", children: null },
+        { children: null, bold: true, text: " start " },
+        { children: null, text: "something" },
+        { children: null, bold: true, text: " together" },
+      ],
+    },
+  ],
 };
 
 describe("<PageHeader />", () => {