Merge pull request #549 from CodeForAfrica/bug/fix-charter-issues

Fix Charterafrica issues
CodeForAfrica · Aug 10, 2023 · a327f0c · a327f0c
2 parents 9e3afc3 + 1a88a17
commit a327f0c
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 38 deletions.
diff --git a/apps/charterafrica/src/components/Infographic/Infographic.js b/apps/charterafrica/src/components/Infographic/Infographic.js
@@ -2,15 +2,17 @@ import { Box } from "@mui/material";
 import Script from "next/script";
 import React from "react";
 
+import site from "@/charterafrica/utils/site";
+
 const Infographic = React.forwardRef(function Infographic(props, ref) {
   const {
     countriesFile: countriesFileProp,
     dataFile: dataFileProp,
     infographicId: id,
     sx,
-    url,
   } = props;
 
+  const { url } = site;
   if (!(id && url)) {
     return null;
   }

diff --git a/apps/charterafrica/src/components/Tool/Contributors.js b/apps/charterafrica/src/components/Tool/Contributors.js
@@ -1,4 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
+import { Link } from "@commons-ui/next";
 import { Avatar, AvatarGroup, Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
@@ -16,7 +17,13 @@ const Contributors = React.forwardRef(function Contributors(props, ref) {
         </RichTypography>
         <AvatarGroup sx={{ justifyContent: { xs: "center", sm: "right" } }}>
           {list.map((item) => (
-            <Avatar key={item.id} alt={item.name} src={item.avatarUrl} />
+            <Avatar
+              key={item.id}
+              component={Link}
+              href={item.link.href}
+              alt={item.name}
+              src={item.avatarUrl}
+            />
           ))}
         </AvatarGroup>
       </Box>

diff --git a/apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js b/apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js
@@ -1,5 +1,5 @@
 import { RichTypography } from "@commons-ui/core";
-import { Figure } from "@commons-ui/next";
+import { Figure, Link } from "@commons-ui/next";
 import { Box, Button } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
@@ -23,14 +23,15 @@ const OrgThemeAndOperatingCountries = React.forwardRef(
             width: "auto",
           }}
         />
-        <RichTypography
+        <Link
+          href={organisation?.link?.href || "#"}
           textAlign="left"
           color="neutral.dark"
-          sx={{ fontWeight: 400 }}
-          variant="h4"
+          sx={{ textDecoration: "none" }}
+          variant="h3Small"
         >
           {organisation.name}
-        </RichTypography>
+        </Link>
         {theme ? (
           <Button
             variant="contained"

diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -250,8 +250,9 @@ exports[`<Tool /> renders unchanged 1`] = `
                   +
                   26
                 </div>
-                <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-r3976x-MuiAvatar-root"
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1sel0v5-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  href=""
                 >
                   <svg
                     aria-hidden="true"
@@ -264,9 +265,10 @@ exports[`<Tool /> renders unchanged 1`] = `
                       d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                     />
                   </svg>
-                </div>
-                <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-r3976x-MuiAvatar-root"
+                </a>
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1sel0v5-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  href=""
                 >
                   <svg
                     aria-hidden="true"
@@ -279,9 +281,10 @@ exports[`<Tool /> renders unchanged 1`] = `
                       d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                     />
                   </svg>
-                </div>
-                <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-r3976x-MuiAvatar-root"
+                </a>
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1sel0v5-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  href=""
                 >
                   <svg
                     aria-hidden="true"
@@ -294,9 +297,10 @@ exports[`<Tool /> renders unchanged 1`] = `
                       d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                     />
                   </svg>
-                </div>
-                <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-r3976x-MuiAvatar-root"
+                </a>
+                <a
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1sel0v5-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  href=""
                 >
                   <svg
                     aria-hidden="true"
@@ -309,7 +313,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                       d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
                     />
                   </svg>
-                </div>
+                </a>
               </div>
             </div>
           </div>

diff --git a/apps/charterafrica/src/lib/data/common/processPageIndex.js b/apps/charterafrica/src/lib/data/common/processPageIndex.js
@@ -1,5 +1,3 @@
-import site from "@/charterafrica/utils/site";
-
 const processHero = (page) => {
   const { blocks } = page;
   const heroIndex = blocks.findIndex((block) => block.slug === "hero");
@@ -34,19 +32,6 @@ const processHero = (page) => {
   }
 };
 
-const processInfographic = (page) => {
-  const { blocks } = page;
-  const infographicIndex = blocks.findIndex(
-    (block) => block.slug === "aga-infographic",
-  );
-
-  const infographic = blocks[infographicIndex] ?? null;
-  if (infographic) {
-    const { url } = site;
-    blocks[infographicIndex] = { ...infographic, url };
-  }
-};
-
 const processSpotlight = (page, api, context) => {
   const { blocks } = page;
   const { locale } = context;
@@ -101,7 +86,6 @@ const processMooc = (page) => {
 
 async function processPageIndex(page, api, context) {
   processHero(page);
-  processInfographic(page);
   processMooc(page);
   processSpotlight(page, api, context);
 

diff --git a/apps/charterafrica/src/lib/data/common/processPageTools.js b/apps/charterafrica/src/lib/data/common/processPageTools.js
@@ -53,6 +53,13 @@ async function processPageSingleTool(page, api, context) {
   });
   const tools = [];
   const filterLabels = labelsPerLocale[locale];
+  const organisationPage = await getPageUrl(api, "organisations");
+  const organisation = orgDocs?.[0]
+    ? {
+        ...orgDocs?.[0],
+        link: { href: `${organisationPage}/${orgDocs?.[0].slug}` },
+      }
+    : null;
   return {
     ...page,
     blocks: [
@@ -90,7 +97,7 @@ async function processPageSingleTool(page, api, context) {
         email: tool.organisation?.email ?? null,
         location: tool.organisation?.location ?? null,
         description: tool.description ?? null,
-        organisation: orgDocs?.[0] ?? null,
+        organisation,
         supportersTitle: filterLabels.supporters,
         partnersTitle: filterLabels.partners,
         contributorsText: filterLabels.contributors,

diff --git a/apps/charterafrica/src/lib/ecosystem/airtable/processData.js b/apps/charterafrica/src/lib/ecosystem/airtable/processData.js
@@ -178,8 +178,6 @@ export function processContributor(
   );
   return {
     airtableId: data.id,
-    avatarUrl:
-      getValue(data, contributorTableColumns.avatarUrl)?.[0]?.url ?? null,
     externalId,
     repoLink,
     socialMedia,