Refractor stories function

CodeForAfrica · Sep 22, 2023 · 6833ce8 · 6833ce8
1 parent 8480fa7
commit 6833ce8
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 57 deletions.
diff --git a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.js b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.js
@@ -19,6 +19,7 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
     tags,
     title,
     searchLabel,
+    readMoreLabel,
     ...other
   } = props;
 
@@ -61,7 +62,10 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
                 sx={{ order: { xs: 1, md: 0 } }}
                 key={featuredArticle.id}
               >
-                <FeaturedArticle {...featuredArticle} />
+                <FeaturedArticle
+                  {...featuredArticle}
+                  readMoreLabel={readMoreLabel}
+                />
               </Grid>
             ) : null}
             <Grid item xs={12} sx={{ order: { xs: 2 } }}>

diff --git a/apps/codeforafrica/src/components/Articles/Articles.js b/apps/codeforafrica/src/components/Articles/Articles.js
@@ -10,7 +10,7 @@ const Articles = React.forwardRef(function Articles(props, ref) {
     sx,
     tags,
     title,
-    search,
+    labels: { search, readMore },
     pagination: { count, page = 1 },
   } = props;
 
@@ -30,6 +30,7 @@ const Articles = React.forwardRef(function Articles(props, ref) {
         onChangeTag={handleChangeTag}
         tags={tags}
         searchLabel={search}
+        readMoreLabel={readMore}
         title={title}
         sx={sx}
       />

diff --git a/apps/codeforafrica/src/components/Articles/Articles.test.js b/apps/codeforafrica/src/components/Articles/Articles.test.js
@@ -15,7 +15,10 @@ const defaultProps = {
     count: 10,
     page: 1,
   },
-  search: "Search",
+  labels: {
+    readMore: "Read More",
+    search: "Search",
+  },
   tags: ["tag1", "tag2"],
   title: "Title",
 };

diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.js
@@ -17,6 +17,7 @@ const FeaturedArticle = React.forwardRef(function FeaturedArticle(props, ref) {
     sx,
     title,
     variant = "standard",
+    readMoreLabel = "Read Story",
   } = props;
 
   return (
@@ -91,7 +92,7 @@ const FeaturedArticle = React.forwardRef(function FeaturedArticle(props, ref) {
                   display: { xs: "none", md: "flex" },
                 }}
               >
-                READ STORY
+                {readMoreLabel}
               </Button>
               <Typography
                 sx={{

diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -47,7 +47,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
               tabindex="0"
               type="button"
             >
-              READ STORY
+              Read Story
             </button>
             <span
               class="MuiTypography-root MuiTypography-caption css-13ob0ik-MuiTypography-root"

diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.test.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.test.js
@@ -25,6 +25,7 @@ const defaultProps = {
     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",
 };
 

diff --git a/apps/codeforafrica/src/lib/data/blockify/stories.js b/apps/codeforafrica/src/lib/data/blockify/stories.js
@@ -1,27 +1,54 @@
 import formatDate from "@/codeforafrica/utils/formatDate";
 
-async function stories(block, api) {
-  const { featured = {}, title, search } = block;
+function formatStory(story) {
   const {
-    title: featuredStoryTitle,
-    coverImage: featuredStoryCoverImage,
-    excerpt: featuredStoryExcerpt,
-    slug: featuredStorySlug,
-    publishedOn: featuredStoryPublishedOn,
-  } = featured;
+    title,
+    coverImage: { src, alt },
+    excerpt,
+    slug,
+    publishedOn,
+  } = story;
+  if (!title) {
+    return null;
+  }
+  return {
+    title,
+    image: {
+      src,
+      alt,
+    },
+    excerpt,
+    publishedOn: formatDate(publishedOn, {
+      includeTime: false,
+      month: "short",
+    }),
+    href: `/stories/${slug}`,
+  };
+}
+
+async function stories(block, api) {
+  const { featured, title, labels } = block;
+  const featuredStory = featured && (formatStory(featured) || null);
+  const featuredStorySlug = featuredStory
+    ? featuredStory.href.split("/").pop()
+    : null;
+
+  const options = {
+    limit: 9,
+    ...(featuredStorySlug && {
+      where: {
+        slug: {
+          not_equals: featuredStorySlug,
+        },
+      },
+    }),
+  };
 
   const {
     docs: storyList,
     totalPages,
     page,
-  } = await api.getCollection("article", {
-    where: {
-      slug: {
-        not_equals: featuredStorySlug,
-      },
-    },
-    limit: 9,
-  });
+  } = await api.getCollection("article", options);
 
   const uniqueTags = new Set(
     storyList
@@ -32,41 +59,14 @@ async function stories(block, api) {
       .sort(),
   );
 
-  const featuredStory = {
-    title: featuredStoryTitle,
-    image: featuredStoryCoverImage,
-    excerpt: featuredStoryExcerpt,
-    publishedOn: formatDate(featuredStoryPublishedOn, {
-      includeTime: false,
-      month: "short",
-    }),
-    href: `/stories/${featuredStorySlug}`,
-  };
+  const articles = storyList.map(formatStory);
 
   return {
     title,
-    search,
+    labels,
     tags: Array.from(uniqueTags),
-    featured: featuredStory,
-    articles: storyList.map((story) => {
-      const {
-        title: storyTitle,
-        coverImage: storyCoverImage,
-        excerpt: storyExcerpt,
-        slug: storySlug,
-        publishedOn: storyPublishedOn,
-      } = story;
-      return {
-        title: storyTitle,
-        image: storyCoverImage,
-        excerpt: storyExcerpt,
-        publishedOn: formatDate(storyPublishedOn, {
-          includeTime: false,
-          month: "short",
-        }),
-        href: `/stories/${storySlug}`,
-      };
-    }),
+    featured: featuredStory || null,
+    articles,
     pagination: {
       count: totalPages,
       page,

diff --git a/apps/codeforafrica/src/payload/blocks/Stories.js b/apps/codeforafrica/src/payload/blocks/Stories.js
@@ -15,11 +15,25 @@ const Stories = {
       type: "text",
     },
     {
-      name: "search",
-      label: "Search Label",
-      required: true,
-      type: "text",
-      defaultValue: "Search Stories",
+      name: "labels",
+      label: "Labels",
+      type: "group",
+      fields: [
+        {
+          name: "search",
+          label: "Search",
+          required: true,
+          type: "text",
+          defaultValue: "Search Stories",
+        },
+        {
+          name: "readMore",
+          label: "Read More",
+          required: true,
+          type: "text",
+          defaultValue: "Read More",
+        },
+      ],
     },
   ],
 };