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 { stories, sx, title } = props;
 
-  if (!articles?.length) {
+  if (!stories?.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={stories} 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",
+  stories: [
+    {
+      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/pagify/post.js

@@ -1,10 +1,39 @@
-import { getPost } from "@/codeforafrica/lib/data/utils/posts";
+import { getPost, getPosts } from "@/codeforafrica/lib/data/utils/posts";
 
-async function post(api, context) {
+async function post(api, context, parentPage) {
   const { params } = context;
   const page = params.slugs[1];
   const slug = params.slugs[2];
-  return getPost(api, slug, page);
+
+  const { posts: recentPost } = await getPosts(
+    api,
+    {
+      limit: 3,
+      sort: "publishedOn",
+    },
+    "stories",
+  );
+  const block = parentPage.blocks.find(
+    ({ blockType }) => blockType === "post-list",
+  );
+  const {
+    labels: { recentStories },
+  } = block;
+
+  const individualPost = await getPost(api, slug, page);
+  const { meta, blocks, title } = individualPost;
+  return {
+    title,
+    meta,
+    blocks: [
+      ...blocks,
+      {
+        blockType: "recent-stories",
+        title: recentStories,
+        stories: recentPost,
+      },
+    ],
+  };
 }
 
 export default post;

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,
+  "recent-stories": RelatedStories,
   stories: Articles,
 };
 

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

@@ -73,6 +73,16 @@ const Posts = {
           type: "text",
           defaultValue: "Read More",
         },
+        {
+          name: "recentStories",
+          label: "Recent Stories",
+          required: true,
+          type: "text",
+          defaultValue: "Recent Stories",
+          admin: {
+            description: "This will only be shown on individual stories pages",
+          },
+        },
       ],
     },
   ],