ft/Improve Posts

apps/codeforafrica/payload.config.ts

@@ -17,6 +17,7 @@ import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
 import Partners from "./src/payload/collections/Partners";
 import Posts from "./src/payload/collections/Posts";
+import PostsSettings from "./src/payload/globals/PostsSettings";
 import Projects from "./src/payload/collections/Projects";
 import Settings from "./src/payload/globals/Settings";
 import Tags from "./src/payload/collections/Tags";
@@ -67,7 +68,7 @@ export default buildConfig({
     Teams,
     Users,
   ] as CollectionConfig[],
-  globals: [Settings] as GlobalConfig[],
+  globals: [PostsSettings, Settings] as GlobalConfig[],
   ...(locales?.length
     ? {
         localization: {

apps/codeforafrica/src/components/Articles/Articles.js

@@ -35,7 +35,7 @@ const Articles = React.forwardRef(function Articles(props, ref) {
   const [q, setQ] = useState();
   const [filtering, setFiltering] = useState(false);
   const [tag, setTag] = useState(allTag);
-  const queryParams = useFilterQuery({ page, q, tag: tag.slug });
+  const queryParams = useFilterQuery({ page, q, tag });
 
   const router = useRouter();
 
@@ -59,7 +59,13 @@ const Articles = React.forwardRef(function Articles(props, ref) {
     setFiltering(isFiltering);
   }, [page, q, tag]);
 
-  const { data } = useArticles({ page, q, tag: tag.slug }, primaryTag);
+  const { data } = useArticles(
+    { page, q, tag },
+    {
+      primaryTag,
+      featured: !filtering && featuredArticle ? featuredArticle.slug : null,
+    },
+  );
   useEffect(() => {
     if (data) {
       const { posts: results, pagination } = data;

apps/codeforafrica/src/components/Articles/useArticles.js

@@ -4,11 +4,13 @@ import useFilterQuery from "@/codeforafrica/components/useFilterQuery";
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
-function useArticles(params, primaryTag) {
+function useArticles(params, { primaryTag, featured }) {
   const queryParams = useFilterQuery(params);
   const query = queryParams
-    ? `${queryParams}&primaryTag=${primaryTag}`
-    : `?primaryTag=${primaryTag}`;
+    ? `${queryParams}&primaryTag=${primaryTag}${
+        featured ? `&featured=${featured}` : ""
+      }`
+    : `?primaryTag=${primaryTag}${featured ? `&featured=${featured}` : ""}`;
   const { data, error } = useSWR(`/api/v1/posts${query}`, fetcher);
 
   return {

apps/codeforafrica/src/components/Opportunities/Opportunities.js

@@ -36,7 +36,7 @@ const Opportunities = React.forwardRef(function Opportunities(
   const [opportunities, setOpportunities] = useState(opportunitiesList);
   const [q, setQ] = useState();
   const [tag, setTag] = useState(allTag);
-  const queryParams = useFilterQuery({ page, q, tag: tag.slug });
+  const queryParams = useFilterQuery({ page, q, tag });
   const router = useRouter();
 
   const handleChangePage = (_, value) => {
@@ -54,7 +54,7 @@ const Opportunities = React.forwardRef(function Opportunities(
     setPage(1);
   };
 
-  const { data } = useOpportunities({ page, q, tag: tag.slug }, primaryTag);
+  const { data } = useOpportunities({ page, q, tag }, primaryTag);
   useEffect(() => {
     if (data) {
       const { posts: results, pagination } = data;

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/posts.js

@@ -11,6 +11,13 @@ async function posts(block, api, context) {
   const featured = featuredStory ? formatPost(featuredStory, primaryTag) : null;
   const options = {
     ...query,
+    ...(featured && {
+      where: {
+        slug: {
+          not_equals: featured.slug,
+        },
+      },
+    }),
   };
   // rename post to fix eslint no-shadow
   const { posts: list, pagination } = await getPosts(api, options, primaryTag);

apps/codeforafrica/src/lib/data/utils/posts.js

@@ -31,7 +31,7 @@ export function formatPost(post, primaryTag) {
 }
 
 export async function getPosts(api, params, primaryTag) {
-  const { page: queryPage = 1, tag, q, ...other } = params;
+  const { page: queryPage = 1, tag, q, where, ...other } = params;
   const options = {
     limit: 9,
     page: queryPage,
@@ -68,6 +68,7 @@ export async function getPosts(api, params, primaryTag) {
           },
         ],
       }),
+      ...where,
     },
     ...other,
   };
@@ -117,29 +118,54 @@ export async function getPost(api, slug, primaryTag) {
     image: coverImage,
     ...meta,
   };
-  return {
-    title,
-    blocks: [
+  const blocks = [
+    {
+      authors: authors.map(({ fullName, bio }) => {
+        return {
+          name: fullName,
+          bio,
+        };
+      }),
+      title,
+      coverImage,
+      excerpt,
+      tags,
+      publishedOn: formatDate(publishedOn, {
+        includeTime: false,
+        month: "short",
+      }),
+      primaryTag,
+      blockType: "article",
+      ...other,
+    },
+  ];
+
+  const globalPostSettings = await api.findGlobal("posts-settings", {});
+  const primaryTagGlobalSettings = globalPostSettings?.[primaryTag] ?? {};
+  const { showRecent, title: recentTitle } = primaryTagGlobalSettings;
+  if (showRecent) {
+    const { posts } = await getPosts(
+      api,
       {
-        authors: authors.map(({ fullName, bio }) => {
-          return {
-            name: fullName,
-            bio,
-          };
-        }),
-        title,
-        coverImage,
-        excerpt,
-        tags,
-        publishedOn: formatDate(publishedOn, {
-          includeTime: false,
-          month: "short",
-        }),
-        primaryTag,
-        blockType: "article",
-        ...other,
+        limit: 3,
+        where: {
+          slug: {
+            not_equals: slug,
+          },
+        },
       },
-    ],
+      primaryTag,
+    );
+    blocks.push({
+      title: recentTitle,
+      posts,
+      blockType: "recent-posts",
+    });
+  }
+
+  return {
+    title,
+    blocks,
     meta: postMeta,
   };
 }

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 = {
   "our-work": Projects,
   "page-header": PageHeader,
   project: Project,
+  "recent-posts": RelatedStories,
   stories: Articles,
 };
 

apps/codeforafrica/src/pages/api/v1/posts.page.js

@@ -2,12 +2,25 @@ import { getPosts } from "@/codeforafrica/lib/data/utils/posts";
 import api from "@/codeforafrica/lib/payload";
 
 export default async function handler(req, res) {
-  const { primaryTag, ...other } = req.query;
+  const { primaryTag, featured, ...other } = req.query;
   if (!primaryTag) {
     return res.status(400).json({ error: "Primary Tag is required" });
   }
   try {
-    const data = await getPosts(api, other, primaryTag);
+    const data = await getPosts(
+      api,
+      {
+        ...other,
+        ...(featured && {
+          where: {
+            slug: {
+              not_equals: featured,
+            },
+          },
+        }),
+      },
+      primaryTag,
+    );
     return res.json(data);
   } catch (error) {
     return res.status(500).json(error);