Ft/codeforafrica Navigation CMS setup

.github/workflows/codeforafrica-deploy-review-app.yml

@@ -55,7 +55,7 @@ jobs:
         with:
           build-args: |
             MONGODB_URL=${{ secrets.CODEFORAFRICA_MONGO_URL }}/${{ env.APP_NAME }}
-            NEXT_PUBLIC_APP_URL=${{ env.NEXT_PUBLIC_APP_URL }}
+            NEXT_PUBLIC_APP_URL=https://${{ env.APP_NAME }}.dev.codeforafrica.org
             PAYLOAD_SECRET=${{ secrets.CODEFORAFRICA_PAYLOAD_SECRET_KEY }}
             GHOST_URL=${{ secrets.GHOST_URL }}
             GHOST_API_KEY=${{ secrets.GHOST_API_KEY }}
@@ -80,14 +80,14 @@ jobs:
           deploy_docker_image: ${{ env.IMAGE_NAME }}:${{ github.sha }}
 
       - name: Update Preview URL
-        run: gh pr comment ${{ env.issue-number }} --edit-last --body=${{ env.body }}
+        run: (gh pr comment ${{ env.issue-number }} --edit-last --body='${{ env.body }}' || gh pr comment ${{ env.issue-number }} --body='${{ env.body }}')
         env:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            "Latest updated Preview URL
+            Latest updated Preview URL
             | Name  | Review |
             |-------|--------|
-            | ${{ env.APP_NAME }}  | [Visit](https://${{ env.APP_NAME }}.dev.codeforafrica.org)  |"
+            | ${{ env.APP_NAME }}  | [Visit](https://${{ env.APP_NAME }}.dev.codeforafrica.org)  |
 
   destroy_review_app:
     runs-on: ubuntu-latest

Dockerfile.codeforafrica

@@ -34,7 +34,7 @@ RUN pnpm install --recursive --offline --frozen-lockfile
 ARG PORT=3000 \
     MONGODB_URL \
     PAYLOAD_SECRET \
-    NEXT_PUBLIC_APP_URL=http://localhost:3000 \
+    NEXT_PUBLIC_APP_URL \
     GHOST_URL \
     GHOST_API_KEY
 

apps/codeforafrica/jest.setup.js

@@ -1,5 +1,14 @@
 /* eslint-env jest */
 
+global.TextEncoder = jest.fn().mockImplementation(() => ({
+  encode: jest.fn(),
+  encodeInto: jest.fn(),
+}));
+
+global.TextDecoder = jest.fn().mockImplementation(() => ({
+  decode: jest.fn(),
+}));
+
 jest.mock("next/router", () => ({
   useRouter: jest.fn().mockImplementation(() => ({
     asPath: "",

apps/codeforafrica/package.json

@@ -23,7 +23,7 @@
   "scripts": {
     "cms": "netlify-cms-proxy-server",
     "build-server": "tsc --project tsconfig.server.json",
-    "build-next": "NEXT_BUILD=true pnpm pnpm build-server && NEXT_BUILD=true PAYLOAD_PUBLIC_APP_URL=http://localhost:3000 PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js",
+    "build-next": "NEXT_BUILD=true pnpm pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=dist/payload.config.js node dist/server.js",
     "build-payload": "payload build",
     "dev": "NODE_OPTIONS='--inspect' ts-node --project tsconfig.server.json server.ts",
     "lint-check": "TIMING=1 eslint './'",
@@ -64,6 +64,7 @@
     "next-seo": "^5.15.0",
     "payload": "^1.7.5",
     "prop-types": "^15.8.1",
+    "qs": "^6.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-share": "^4.4.1",

apps/codeforafrica/payload.config.ts

@@ -1,7 +1,8 @@
 import { buildConfig } from "payload/config";
 import Media from "./src/payload/collections/Media";
 import Pages from "./src/payload/collections/Pages";
-import { CollectionConfig } from "payload/types";
+import Navigation from "./src/payload/globals/Navigation";
+import { CollectionConfig, GlobalConfig } from "payload/types";
 import dotenv from "dotenv";
 import seo from "@payloadcms/plugin-seo";
 import nestedDocs from "@payloadcms/plugin-nested-docs";
@@ -27,6 +28,7 @@ const adapter = s3Adapter({
 export default buildConfig({
   serverURL: appURL,
   collections: [Pages, Media] as CollectionConfig[],
+  globals: [Navigation] as GlobalConfig[],
   admin: {
     webpack: (config) => ({
       ...config,

apps/codeforafrica/src/components/DesktopNavBar/DesktopNavBar.js

@@ -6,7 +6,7 @@ import NavBarNavList from "@/codeforafrica/components/NavBarNavList";
 import NextImageButton from "@/codeforafrica/components/NextImageButton";
 
 const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) {
-  const { logo, menu, sx } = props;
+  const { logo, menu, socialLinks, sx } = props;
 
   return (
     <Grid
@@ -28,7 +28,11 @@ const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) {
       </Grid>
       <Grid item>
         <Box component="nav" sx={{ justifyContent: "flex-end" }}>
-          <NavBarNavList menu={menu} direction="row" />
+          <NavBarNavList
+            menu={menu}
+            socialLinks={socialLinks}
+            direction="row"
+          />
         </Box>
       </Grid>
     </Grid>

apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.js

@@ -27,7 +27,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
 });
 
 const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
-  const { logo, menu, sx } = props;
+  const { logo, menu, socialLinks, sx } = props;
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
@@ -82,7 +82,7 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
             }}
             onClose={handleClose}
           >
-            <NavBarNavList menu={menu} />
+            <NavBarNavList menu={menu} socialLinks={socialLinks} />
             <NextImageButton
               src={closebutton}
               alt="Logo"

apps/codeforafrica/src/components/NavBar/NavBar.js

@@ -5,20 +5,22 @@ import React from "react";
 import DesktopNavBar from "@/codeforafrica/components/DesktopNavBar";
 import MobileNavBar from "@/codeforafrica/components/MobileNavBar";
 
-function NavBar({ logo, menu }) {
+function NavBar({ logo, menu, socialLinks }) {
   return (
     <NavigationBar sx={{ py: { xs: "10px", md: "15.5" } }}>
       <Section sx={{ px: { xs: 2.5, sm: 0 } }}>
         <MobileNavBar
           logo={logo}
           menu={menu}
+          socialLinks={socialLinks}
           sx={{
             display: { xs: "flex", md: "none" },
           }}
         />
         <DesktopNavBar
           logo={logo}
           menu={menu}
+          socialLinks={socialLinks}
           sx={{
             display: { xs: "none", md: "flex" },
           }}

apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js

@@ -4,11 +4,25 @@ import { SvgIcon } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
+import FacebookIcon from "@/codeforafrica/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg";
+import GitHubIcon from "@/codeforafrica/assets/icons/Type=github, Size=24, Color=CurrentColor.svg";
+import InstagramIcon from "@/codeforafrica/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg";
+import LinkedInIcon from "@/codeforafrica/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg";
+import SlackIcon from "@/codeforafrica/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg";
 import TwitterIcon from "@/codeforafrica/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg";
 import NavListItem from "@/codeforafrica/components/NavListItem";
 
+const mapPlatformToIcon = {
+  Facebook: FacebookIcon,
+  Twitter: TwitterIcon,
+  Instagram: InstagramIcon,
+  Linkedin: LinkedInIcon,
+  Github: GitHubIcon,
+  Slack: SlackIcon,
+};
+
 const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
-  const { direction, menu, ...other } = props;
+  const { direction, menu, socialLinks, ...other } = props;
 
   if (!menu?.length) {
     return null;
@@ -34,20 +48,27 @@ const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
           </Link>
         </NavListItem>
       ))}
-      <NavListItem sx={{ m: "20px", mr: 0 }}>
-        <Link
-          href="https://twitter.com/Code4Africa"
-          sx={{ color: { xs: "inherit" } }}
-        >
-          <SvgIcon
-            component={TwitterIcon}
-            sx={{
-              mt: direction === "column" ? 0 : 1,
-              fill: { xs: "none" },
-            }}
-          />
-        </Link>
-      </NavListItem>
+      {socialLinks?.map(({ platform, url }) => {
+        const Icon = mapPlatformToIcon[platform];
+        return (
+          <NavListItem key={platform} sx={{ m: "20px", mr: 0 }}>
+            <Link
+              href={url}
+              sx={{ color: { xs: "inherit" } }}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <SvgIcon
+                component={Icon}
+                sx={{
+                  mt: direction === "column" ? 0 : 1,
+                  fill: { xs: "none" },
+                }}
+              />
+            </Link>
+          </NavListItem>
+        );
+      })}
     </NavList>
   );
 });

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

@@ -55,20 +55,37 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
         Contact
       </a>
     </li>
+    <li
+      class="css-14eadhm"
+    >
+      <a
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-bmq8gb-MuiTypography-root-MuiLink-root"
+        href="https://www.facebook.com/CodeForAfrica"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-o1xeqk-MuiSvgIcon-root"
+          focusable="false"
+          viewBox="0 0 24 24"
+        />
+      </a>
+    </li>
     <li
       class="css-14eadhm"
     >
       <a
         class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-bmq8gb-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
-        rel="noreferrer noopener"
+        rel="noopener noreferrer"
         target="_blank"
       >
-        <div
+        <svg
           aria-hidden="true"
           class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-o1xeqk-MuiSvgIcon-root"
           focusable="false"
-          viewbox="0 0 24 24"
+          viewBox="0 0 24 24"
         />
       </a>
     </li>

apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.test.js

@@ -31,6 +31,16 @@ const defaultProps = {
       href: "/contact",
     },
   ],
+  socialLinks: [
+    {
+      url: "https://www.facebook.com/CodeForAfrica",
+      platform: "facebook",
+    },
+    {
+      url: "https://twitter.com/Code4Africa",
+      platform: "twitter",
+    },
+  ],
 };
 
 describe("<NavBarNavList />", () => {

apps/codeforafrica/src/lib/api.netlify-cms/index.js

@@ -19,7 +19,6 @@ import getProjectTeam from "./getProjectTeam";
 import getRelatedProjects from "./getRelatedProjects";
 import getTeam from "./getTeam";
 import getFooter from "./sections/getFooter";
-import getHeader from "./sections/getHeader";
 import getHero from "./sections/getHero";
 import getMeetOurTeam from "./sections/getMeetOurTeam";
 import getSeo from "./seo";
@@ -29,7 +28,6 @@ export {
   getContactForm,
   getCmsProjects,
   getFooter,
-  getHeader,
   getHero,
   getGetInTouch,
   getJoinUs,