Regenerate snapshots

CodeForAfrica · Sep 27, 2023 · fd0cce8 · fd0cce8
1 parent d9655c8
commit fd0cce8
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 36 deletions.
diff --git a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
@@ -19,7 +19,7 @@ exports[`<Opportunities /> renders unchanged 1`] = `
               aria-invalid="false"
               class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputTypeSearch MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-h7q3zr-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r0:"
-              placeholder="Search opportunities"
+              placeholder="Search"
               type="search"
               value=""
             />
@@ -52,6 +52,23 @@ exports[`<Opportunities /> renders unchanged 1`] = `
             </fieldset>
           </div>
         </div>
+        <div
+          class="MuiToggleButtonGroup-root css-czr1qx-MuiToggleButtonGroup-root"
+          role="group"
+        >
+          <div
+            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-1unqgnq-MuiButtonBase-root-MuiChip-root"
+            role="button"
+            tabindex="0"
+            value="All"
+          >
+            <span
+              class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+            >
+              All
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </div>

diff --git a/apps/codeforafrica/src/components/Opportunities/Opportunities.test.js b/apps/codeforafrica/src/components/Opportunities/Opportunities.test.js
@@ -9,7 +9,16 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  opportunities: { pagination: {}, results: [] },
+  opportunities: [],
+  pagination: {
+    count: 0,
+    page: 1,
+  },
+  tags: [],
+  labels: {
+    search: "Search",
+    readMore: "Read more",
+  },
 };
 
 describe("<Opportunities />", () => {

diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.js
@@ -16,7 +16,7 @@ const OpportunityCard = React.forwardRef(function OpportunityCard(props, ref) {
     image: { src, alt },
     excerpt,
     href,
-    publishedAt,
+    publishedOn,
     sx,
     tags,
     title,
@@ -38,9 +38,11 @@ const OpportunityCard = React.forwardRef(function OpportunityCard(props, ref) {
             <RichTypography
               sx={{ borderRight: "solid 1px", mr: 1.25, pr: 1.25 }}
             >
-              {publishedAt}
+              {publishedOn}
+            </RichTypography>
+            <RichTypography>
+              {tags.map((tag) => tag.name).join(", ")}
             </RichTypography>
-            <RichTypography>{tags?.join(", ")}</RichTypography>
           </Box>
           <RichTypography
             component="section"

diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -11,8 +11,9 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
       tabindex="0"
     >
       <img
-        alt=""
+        alt="Deputy Investigative Manager"
         class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
+        src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
       />
       <div
         class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
@@ -24,9 +25,15 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
         </div>
         <div
           class="MuiBox-root css-k008qs"
-        />
+        >
+          <div
+            class="MuiTypography-root MuiTypography-body1 css-fc9h1t-MuiTypography-root"
+          >
+            Data Journalism
+          </div>
+        </div>
         <section
-          class="MuiTypography-root MuiTypography-body2 css-vouzhn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body2 css-14zxna8-MuiTypography-root"
         >
           Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
         </section>
@@ -39,7 +46,7 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
           role="button"
           tabindex="0"
         >
-          Read More
+          Read more
         </div>
       </div>
       <span

diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.test.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.test.js
@@ -10,9 +10,21 @@ const render = createRender({ theme });
 
 const defaultProps = {
   href: "/opportunities/1",
+  image: {
+    src: "https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg",
+    alt: "Deputy Investigative Manager",
+  },
   title:
     "DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime",
-  html: "Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...",
+  excerpt:
+    "Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...",
+  readMore: "Read more",
+  tags: [
+    {
+      name: "Data Journalism",
+      slug: "data-journalism",
+    },
+  ],
 };
 
 describe("<OpportunityCard />", () => {

diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
@@ -14,8 +14,9 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
         tabindex="0"
       >
         <img
-          alt=""
+          alt="Deputy Investigative Manager"
           class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
+          src="https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg"
         />
         <div
           class="MuiCardContent-root css-1i9wt8r-MuiCardContent-root"
@@ -27,9 +28,15 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
           </div>
           <div
             class="MuiBox-root css-k008qs"
-          />
+          >
+            <div
+              class="MuiTypography-root MuiTypography-body1 css-fc9h1t-MuiTypography-root"
+            >
+              Data Journalism
+            </div>
+          </div>
           <section
-            class="MuiTypography-root MuiTypography-body2 css-vouzhn-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body2 css-14zxna8-MuiTypography-root"
           >
             Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...
           </section>
@@ -41,9 +48,7 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
             class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-12i2l1x-MuiButtonBase-root-MuiButton-root"
             role="button"
             tabindex="0"
-          >
-            Read More
-          </div>
+          />
         </div>
         <span
           class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"

diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.test.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.test.js
@@ -15,7 +15,19 @@ const defaultProps = {
       href: "/opportunities/1",
       title:
         "DEPUTY INVESTIGATIVE MANAGER: Support the fight against disinformation and transnational organised crime",
-      html: "Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...",
+      excerpt:
+        "Position in: Africa Do you want to help expose the puppet-masters behind disinformation networks, and expose transnational organised criminals? Code for Africa (CfA) has an immediate vacancy for a full-time Deputy Investigative Manager to join our pan-African forensic...",
+      readMore: "Read more",
+      image: {
+        src: "https://codeforafrica.org/wp-content/uploads/2021/09/Deputy-Investigative-Manager-1-1024x576.jpg",
+        alt: "Deputy Investigative Manager",
+      },
+      tags: [
+        {
+          name: "Data Journalism",
+          slug: "data-journalism",
+        },
+      ],
     },
   ],
 };

diff --git a/apps/codeforafrica/src/lib/data/pagify/index.js b/apps/codeforafrica/src/lib/data/pagify/index.js
@@ -1,10 +1,12 @@
 import members from "./members";
+import opportunities from "./opportunities";
 import partners from "./partners";
 import stories from "./stories";
 
 const COLLECTION_BY_SLUG = {
-  partners,
   members,
+  opportunities,
+  partners,
   stories,
 };
 

diff --git a/apps/codeforafrica/src/lib/data/pagify/opportunities.js b/apps/codeforafrica/src/lib/data/pagify/opportunities.js
@@ -0,0 +1,10 @@
+import { getPost } from "@/codeforafrica/lib/data/utils/posts";
+
+async function opportunities(api, context) {
+  const { params } = context;
+  const page = params.slugs[1];
+  const slug = params.slugs[2];
+  return getPost(api, slug, page);
+}
+
+export default opportunities;
diff --git a/apps/codeforafrica/src/lib/data/utils/posts.js b/apps/codeforafrica/src/lib/data/utils/posts.js
@@ -1,5 +1,28 @@
 import formatDate from "@/codeforafrica/utils/formatDate";
 
+export function formatTags(tags) {
+  const excludedTags = new Set(["stories", "opportunities"]);
+
+  const tagCounts = tags.reduce((counts, { name }) => {
+    // eslint-disable-next-line no-param-reassign
+    counts[name] = (counts[name] || 0) + 1;
+    return counts;
+  }, {});
+
+  const sortedTags = Object.keys(tagCounts)
+    .filter((tag) => !excludedTags.has(tag.toLowerCase()))
+    .sort((a, b) => tagCounts[b] - tagCounts[a])
+    .map((tagName) => {
+      const tag = tags.find(({ name }) => name === tagName);
+      return {
+        name: tag.name,
+        slug: tag.slug,
+      };
+    });
+
+  return sortedTags;
+}
+
 export function formatPost(post, path) {
   const {
     id,
@@ -8,6 +31,7 @@ export function formatPost(post, path) {
     excerpt,
     slug,
     publishedOn,
+    tags,
   } = post;
   if (!title) {
     return null;
@@ -21,27 +45,11 @@ export function formatPost(post, path) {
       includeTime: false,
       month: "short",
     }),
+    tags: formatTags(tags),
     href: `/posts/${path}/${slug}`,
   };
 }
 
-export function formatTags(tags) {
-  const excludedTags = new Set(["stories", "opportunities"]);
-
-  const tagCounts = tags.reduce((counts, { name }) => {
-    // eslint-disable-next-line no-param-reassign
-    counts[name] = (counts[name] || 0) + 1;
-    return counts;
-  }, {});
-
-  const sortedTags = Object.keys(tagCounts)
-    .filter((tag) => !excludedTags.has(tag.toLowerCase()))
-    .sort((a, b) => tagCounts[b] - tagCounts[a])
-    .map((tag) => tags.find(({ name }) => name === tag));
-
-  return sortedTags;
-}
-
 export async function getPosts(api, params, path) {
   const { page: queryPage = 1, tag, q, where = {}, ...other } = params;
   const options = {

diff --git a/apps/codeforafrica/src/payload/blocks/Opportunities.js b/apps/codeforafrica/src/payload/blocks/Opportunities.js
@@ -11,7 +11,7 @@ const Opportunities = {
           label: "Search",
           required: true,
           type: "text",
-          defaultValue: "Search Stories",
+          defaultValue: "Search Opportunities",
         },
         {
           name: "readMore",