ft/Improve Posts

apps/codeforafrica/src/components/RelatedStories/RelatedStories.js

@@ -5,9 +5,9 @@ import React from "react";
 import ArticleCardList from "@/codeforafrica/components/ArticleCardList";
 
 const RelatedStories = React.forwardRef(function RelatedStories(props, ref) {
-  const { articles, sx, title } = props;
+  const { posts, sx, title } = props;
 
-  if (!articles?.length) {
+  if (!posts?.length) {
     return null;
   }
   return (
@@ -25,10 +25,7 @@ const RelatedStories = React.forwardRef(function RelatedStories(props, ref) {
       >
         {title}
       </RichTypography>
-      <ArticleCardList
-        articles={articles.slice(0, 3)}
-        sx={{ mb: { xs: 5, lg: "55px" } }}
-      />
+      <ArticleCardList articles={posts} sx={{ mb: { xs: 5, lg: "55px" } }} />
     </Section>
   );
 });

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

@@ -1,3 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RelatedStories /> renders unchanged 1`] = `<div />`;
+exports[`<RelatedStories /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1pmgh96-MuiContainer-root"
+  >
+    <div
+      class="MuiTypography-root MuiTypography-h5Small css-1v0gnt0-MuiTypography-root"
+    >
+      Related Stories
+    </div>
+    <div
+      class="MuiGrid-root MuiGrid-container css-16q497u-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 css-1dte7n6-MuiGrid-root"
+      >
+        <div
+          class="MuiPaper-root MuiPaper-outlined MuiCard-root css-1dxfqf3-MuiPaper-root-MuiCard-root"
+        >
+          <a
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiCardActionArea-root css-mfu8qg-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiCardActionArea-root"
+            href="/stories/article-1"
+            tabindex="0"
+          >
+            <img
+              class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-gzk243-MuiCardMedia-root"
+              src="https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png"
+            />
+            <div
+              class="MuiCardContent-root css-q7lov9-MuiCardContent-root"
+            >
+              <h6
+                class="MuiTypography-root MuiTypography-subtitle1 css-t0ku10-MuiTypography-root"
+              >
+                Battle for gender equality in African media continues
+              </h6>
+              <span
+                class="MuiTypography-root MuiTypography-caption css-1xdk20n-MuiTypography-root"
+              >
+                Jan 6, 2022
+              </span>
+            </div>
+            <span
+              class="MuiCardActionArea-focusHighlight css-1v2exvi-MuiCardActionArea-focusHighlight"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -10,6 +10,20 @@ const render = createRender({ theme });
 
 const defaultProps = {
   title: "Related Stories",
+  posts: [
+    {
+      title: "Battle for gender equality in African media continues",
+      excerpt:
+        "Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.",
+      publishedOn: "Jan 6, 2022",
+      image: {
+        src: "https://res.cloudinary.com/code-for-africa/image/upload/v1650885664/codeforafrica/unsplash_L6hr1BptcNc_of23p3.png",
+        alt: "Featured Article Image",
+      },
+      readMoreLabel: "Read Story",
+      href: "/stories/article-1",
+    },
+  ],
 };
 
 describe("<RelatedStories />", () => {

apps/codeforafrica/src/lib/data/blockify/index.js

@@ -5,6 +5,7 @@ import ourImpact from "./our-impact";
 import ourTeam from "./ourTeam";
 import ourWork from "./ourWork";
 import posts from "./posts";
+import relatedPosts from "./related-posts";
 
 const propsifyBlockBySlug = {
   "get-involved": getInvolved,
@@ -15,6 +16,7 @@ const propsifyBlockBySlug = {
   "our-work": ourWork,
   // post-list to avoid conflict with posts collection in payload
   "post-list": posts,
+  "related-posts": relatedPosts,
 };
 
 async function blockify(blocks, api, context) {

apps/codeforafrica/src/lib/data/blockify/related-posts.js

@@ -0,0 +1,17 @@
+import { getPosts } from "@/codeforafrica/lib/data/utils/posts";
+
+async function relatedPosts(block, api) {
+  const { primaryTag, number, ...other } = block;
+
+  const options = {
+    limit: number,
+  };
+  const { posts } = await getPosts(api, options, primaryTag);
+  return {
+    ...other,
+    posts,
+    slug: "related-posts",
+  };
+}
+
+export default relatedPosts;

apps/codeforafrica/src/pages/[...slugs].page.js

@@ -22,6 +22,7 @@ import OurTeam from "@/codeforafrica/components/OurTeam";
 import PageHeader from "@/codeforafrica/components/PageHeader";
 import Project from "@/codeforafrica/components/Project";
 import Projects from "@/codeforafrica/components/Projects";
+import RelatedStories from "@/codeforafrica/components/RelatedStories";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
 const componentsBySlugs = {
@@ -45,6 +46,7 @@ const componentsBySlugs = {
   "page-header": PageHeader,
   projects: FeaturedProjects,
   project: Project,
+  "related-posts": RelatedStories,
   stories: Articles,
 };
 

apps/codeforafrica/src/payload/blocks/RelatedPosts.js

@@ -0,0 +1,51 @@
+const primaryTags = [
+  {
+    label: "Stories",
+    value: "stories",
+  },
+  {
+    label: "Opportunities",
+    value: "opportunities",
+  },
+];
+
+const RelatedPosts = {
+  slug: "related-posts",
+  imageURL: "/images/cms/blocks/related_posts.jpg",
+  imageAltText: "Related Posts",
+  labels: {
+    singular: {
+      en: "Related Posts",
+    },
+    plural: {
+      en: "Related Posts",
+    },
+  },
+  fields: [
+    {
+      name: "title",
+      label: "Title",
+      required: true,
+      type: "text",
+    },
+    {
+      name: "primaryTag",
+      label: "Post Type",
+      required: true,
+      type: "select",
+      options: primaryTags,
+      hasMany: false,
+    },
+    {
+      name: "number",
+      label: "Number of Posts to Show",
+      required: true,
+      type: "number",
+      min: 1,
+      max: 3,
+      defaultValue: 3,
+    },
+  ],
+};
+
+export default RelatedPosts;

apps/codeforafrica/src/payload/collections/Pages.js

@@ -14,6 +14,7 @@ import OurTeam from "../blocks/OurTeam";
 import OurWork from "../blocks/OurWork";
 import PageHeader from "../blocks/PageHeader";
 import Posts from "../blocks/Posts";
+import RelatedPosts from "../blocks/RelatedPosts";
 import fullTitle from "../fields/fullTitle";
 import slug from "../fields/slug";
 import formatDraftUrl from "../utils/formatDraftUrl";
@@ -65,6 +66,7 @@ const Pages = {
         OurPartners,
         OurTeam,
         OurWork,
+        RelatedPosts,
       ],
       admin: {
         initCollapsed: true,