Merge branch 'main' into feature/roboshield_hero_payload

CodeForAfrica · Jul 3, 2024 · ef7f1de · ef7f1de
2 parents 5aac1b4 + 1f52ad2
commit ef7f1de
Show file tree

Hide file tree

Showing 34 changed files with 1,054 additions and 541 deletions.
diff --git a/apps/charterafrica/src/components/Tool/DescriptionAndShare.js b/apps/charterafrica/src/components/Tool/DescriptionAndShare.js
@@ -8,6 +8,7 @@ import ShareThisPage from "@/charterafrica/components/ShareThisPage";
 const DescriptionAndShare = React.forwardRef(
   function DescriptionAndShare(props, ref) {
     const { sx, description, lastActive, activeText } = props;
+    const lastActiveText = lastActive ? `${activeText} ${lastActive}` : null;
     return (
       <Box sx={sx} ref={ref}>
         <RichTypography
@@ -28,7 +29,7 @@ const DescriptionAndShare = React.forwardRef(
           }}
           variant="captionCap"
         >
-          {activeText} {lastActive}
+          {lastActiveText}
         </RichTypography>
         <Box
           display="flex"

diff --git a/apps/charterafrica/src/components/Tool/Metrics.js b/apps/charterafrica/src/components/Tool/Metrics.js
@@ -11,15 +11,18 @@ import ViewsIcon from "@/charterafrica/assets/icons/Type=views, Size=24, Color=C
 const Metrics = React.forwardRef(function Metrics(props, ref) {
   const {
     sx,
-    stars = "0",
+    stars,
     starsText,
     commitText,
     forksText,
     contributorsText,
     lastCommit,
-    forks = "0",
+    forks,
     contributors,
   } = props;
+  if (!contributors?.length && !stars && !forks && !lastCommit.committedDate) {
+    return null;
+  }
   return (
     <Box display="flex" sx={sx} ref={ref} flexWrap="wrap" alignItems="center">
       <Box display="flex" alignItems="center" sx={{ mb: 2, mr: 2 }}>

diff --git a/apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js b/apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js
@@ -8,7 +8,7 @@ const OrgThemeAndOperatingCountries = React.forwardRef(
   function OrgThemeAndOperatingCountries(props, ref) {
     const { sx, organisation, theme, operatingCountries } = props;
     const countries = operatingCountries?.join(", ");
-    if (!organisation) {
+    if (!organisation && !theme) {
       return null;
     }
     return (
@@ -25,8 +25,8 @@ const OrgThemeAndOperatingCountries = React.forwardRef(
         >
           <Figure
             ImageProps={{
-              alt: organisation.name,
-              src: organisation.avatarUrl,
+              alt: organisation?.name,
+              src: organisation?.avatarUrl,
             }}
             sx={{
               height: 50,
@@ -51,7 +51,7 @@ const OrgThemeAndOperatingCountries = React.forwardRef(
             sx={{ textDecoration: "none", fontWeight: 400 }}
             variant="h4"
           >
-            {organisation.name}
+            {organisation?.name}
           </Link>
         </Box>
         <Box

diff --git a/apps/charterafrica/src/components/Tool/Tool.js b/apps/charterafrica/src/components/Tool/Tool.js
@@ -121,44 +121,48 @@ const Tool = React.forwardRef(function Tool(props, ref) {
                 ml: "auto",
               }}
             >
-              <Button
-                component={goToRepo?.href ? Link : undefined}
-                href={goToRepo?.href}
-                variant="contained"
-                target="_blank"
-                sx={{
-                  mt: 1.25,
-                  width: "100%",
-                  height: 50,
-                }}
-              >
-                <SvgIcon
-                  component={GithubIcon}
+              {goToRepo?.href ? (
+                <Button
+                  component={Link}
+                  href={goToRepo?.href}
+                  variant="contained"
+                  target="_blank"
                   sx={{
-                    color: "text.secondary",
-                    display: "inline-flex",
-                    fill: "none",
-                    width: 16,
-                    height: 16,
-                    mr: 1,
+                    mt: 1.25,
+                    width: "100%",
+                    height: 50,
                   }}
-                />
-                {goToRepo?.label}
-              </Button>
+                >
+                  <SvgIcon
+                    component={GithubIcon}
+                    sx={{
+                      color: "text.secondary",
+                      display: "inline-flex",
+                      fill: "none",
+                      width: 16,
+                      height: 16,
+                      mr: 1,
+                    }}
+                  />
+                  {goToRepo?.label}
+                </Button>
+              ) : null}
             </Box>
             <TechSkills
               list={techSkills}
               title="Skills Needed"
               sx={{ mt: 3.75 }}
             />
-            <Box sx={{ mt: 3.75 }}>
-              <RichTypography variant="p3SemiBold" color="neutral.dark">
-                {collectionText}
-              </RichTypography>
-              <RichTypography sx={{ mt: 1 }} variant="p3">
-                {classification}
-              </RichTypography>
-            </Box>
+            {classification ? (
+              <Box sx={{ mt: 3.75 }}>
+                <RichTypography variant="p3SemiBold" color="neutral.dark">
+                  {collectionText}
+                </RichTypography>
+                <RichTypography sx={{ mt: 1 }} variant="p3">
+                  {classification}
+                </RichTypography>
+              </Box>
+            ) : null}
             <Contributors
               sx={{ mt: 3.75 }}
               list={contributors}

diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -88,13 +88,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
-                >
-                  <div
-                    class="MuiTypography-root MuiTypography-p1 css-1tpbw3s-MuiTypography-root"
-                  >
-                    0
-                  </div>
-                </div>
+                />
               </div>
               <div
                 class="MuiBox-root css-33u6ly"
@@ -106,13 +100,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                 />
                 <div
                   class="MuiBox-root css-1isemmb"
-                >
-                  <div
-                    class="MuiTypography-root MuiTypography-p1 css-1tpbw3s-MuiTypography-root"
-                  >
-                    0
-                  </div>
-                </div>
+                />
               </div>
             </div>
             <div
@@ -126,8 +114,7 @@ exports[`<Tool /> renders unchanged 1`] = `
               <div
                 class="MuiTypography-root MuiTypography-captionCap css-hr3rav-MuiTypography-root"
               >
-                 
-                6 Months ago
+                undefined 6 Months ago
               </div>
               <div
                 class="MuiBox-root css-oqyb22"
@@ -190,25 +177,6 @@ exports[`<Tool /> renders unchanged 1`] = `
         >
           <div
             class="MuiBox-root css-11uk14q"
-          >
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-qy1l2s-MuiButtonBase-root-MuiButton-root"
-              href=""
-              tabindex="0"
-              target="_blank"
-              type="button"
-            >
-              <div
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1bnrqzj-MuiSvgIcon-root"
-                focusable="false"
-                viewbox="0 0 24 24"
-              />
-              Go to Repo
-            </button>
-          </div>
-          <div
-            class="MuiBox-root css-46b038"
           />
           <div
             class="MuiBox-root css-46b038"

diff --git a/apps/charterafrica/src/lib/ecosystem/airtable/processData.js b/apps/charterafrica/src/lib/ecosystem/airtable/processData.js
@@ -20,6 +20,16 @@ function getSourceType(link) {
   return "github";
 }
 
+function checkFields(obj) {
+  const emptyFields = Object.keys(obj)
+    .map((field) => (!obj[field] ? field : null))
+    .filter(Boolean);
+  if (emptyFields.length > 0) {
+    return `The following fields are missing ${emptyFields.join(", ")}`;
+  }
+  return null;
+}
+
 function getRepoLink(source = "github", slug = "") {
   if (source === "github" && slug) {
     return `https://github.com/${slug}`;
@@ -70,8 +80,9 @@ export function processTool(item, config, { partnersData }) {
   } = config;
   const data = { ...item.fields, id: item.id };
   const externalId = getValue(data, toolTableColumns.slug)?.trim();
-  if (!externalId?.length) {
-    const message = `Missing externalId for Tool ${data.id}. Skipping`;
+  const name = getValue(data, toolTableColumns.name)?.trim();
+  if (!name) {
+    const message = `Missing name for Tool ${data.id}. Skipping`;
     Sentry.captureMessage(message);
     return null;
   }
@@ -115,12 +126,28 @@ export function processTool(item, config, { partnersData }) {
     data,
   );
   const source = getSourceType(getValue(data, toolTableColumns.source.url));
+  const avatarUrl =
+    getValue(data, toolTableColumns.avatarUrl)?.[0]?.url ?? null;
+  const fieldsToCheck = {
+    avatarUrl,
+    name,
+    description,
+    operatingCountries,
+    theme,
+  };
+  const missingFields = checkFields(fieldsToCheck);
+  if (missingFields) {
+    const message = `Tool ${name}: ${missingFields}`;
+    Sentry.captureMessage(message);
+    return null;
+  }
+
   return {
     airtableId: data.id,
-    avatarUrl: getValue(data, toolTableColumns.avatarUrl)?.[0]?.url ?? null,
+    avatarUrl,
     externalId,
     repoLink: getValue(data, toolTableColumns.source.url),
-    name: getValue(data, toolTableColumns.name),
+    name,
     link: getValue(data, toolTableColumns.url),
     operatingCountries,
     contributors: getValue(data, toolTableColumns.contributors),

diff --git a/apps/charterafrica/src/lib/ecosystem/github/processData.js b/apps/charterafrica/src/lib/ecosystem/github/processData.js
@@ -80,6 +80,9 @@ function fetchUserQuery(username) {
 }
 
 export async function fetchTool({ externalId }) {
+  if (!externalId) {
+    return null;
+  }
   let [repositoryOwner, repositoryName] = externalId
     .replace(/^https?:\/\/github\.com\//, "")
     .replace(/\/$/, "")

diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json
@@ -23,6 +23,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
+    "@mui/material-nextjs": "^5.15.11",
     "@mui/utils": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.1",
     "@next/env": "^14.2.4",

diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
@@ -56,6 +56,57 @@ export interface Page {
             blockType: "page-header";
           }
         | PageHero
+        | {
+            content?:
+              | (
+                  | {
+                      content: {
+                        [k: string]: unknown;
+                      }[];
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "richtext";
+                    }
+                  | {
+                      image: string | Media;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "mediaBlock";
+                    }
+                  | {
+                      externalEmbeddFields?: {
+                        embedType?: ("url" | "code") | null;
+                        url?: string | null;
+                        caption?: string | null;
+                        code?: string | null;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "externalEmbedd";
+                    }
+                )[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: "content";
+          }
+        | {
+            title: string;
+            statistics?:
+              | {
+                  name: string;
+                  value: string;
+                  description: {
+                    [k: string]: unknown;
+                  }[];
+                  icon?: string | Media | null;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: "statistics";
+          }
         | {
             toolTipText: string;
             steps?:

diff --git a/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx b/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx
@@ -1,4 +1,6 @@
-import PageHeader from "@/roboshield/components/PageHeader/PageHeader";
+import PageHeader from "@/roboshield/components/PageHeader";
+import Content from "@/roboshield/components/Content";
+import Statistics from "@/roboshield/components/Statistics";
 import { Page } from "@/root/payload-types";
 import Hero from "@/roboshield/components/Hero";
 import RoboForm from "@/roboshield/components/RoboForm";
@@ -9,17 +11,19 @@ interface BlockRendererProps extends Pick<Page, "blocks"> {}
 const components = {
   "page-header": PageHeader,
   "page-hero": Hero,
+  content: Content,
+  statistics: Statistics,
   "robo-form": RoboForm,
 };
 
 export default function BlockRenderer({ blocks }: BlockRendererProps) {
   return (
     <>
-      {blocks?.map((block, index) => {
+      {blocks?.map((block) => {
         const Component: FC<any> = components[block.blockType];
 
         if (Component) {
-          return <Component key={index} {...block} />;
+          return <Component key={block.blockType} {...block} />;
         }
 
         return null;