Merge pull request #598 from CodeForAfrica/ft/codeforafrica-stories-cms

Codeforafrica Stories
CodeForAfrica · Sep 27, 2023 · 9366520 · 9366520
2 parents 55bfcfc + 4b652d6
commit 9366520
Show file tree

Hide file tree

Showing 20 changed files with 599 additions and 69 deletions.
diff --git a/apps/codeforafrica/payload.config.ts b/apps/codeforafrica/payload.config.ts
@@ -8,6 +8,7 @@ import Media from "./src/payload/collections/Media";
 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 Settings from "./src/payload/globals/Settings";
 import Tags from "./src/payload/collections/Tags";
 import Teams from "./src/payload/collections/Teams";
@@ -50,10 +51,11 @@ export default buildConfig({
     Authors,
     GuidingPrinciples,
     Impact,
+    Media,
     Members,
     Pages,
-    Media,
     Partners,
+    Posts,
     Tags,
     Teams,
   ] as CollectionConfig[],
@@ -85,7 +87,7 @@ export default buildConfig({
       },
     }),
     seo({
-      collections: ["pages"],
+      collections: ["pages", "posts"],
       globals: [],
       uploadsCollection: "media",
       generateTitle: ({ doc }: any) => doc?.title?.value as string,

diff --git a/apps/codeforafrica/src/components/ArticleCardList/ArticleCardList.js b/apps/codeforafrica/src/components/ArticleCardList/ArticleCardList.js
@@ -37,15 +37,15 @@ const ArticleCardList = React.forwardRef(function ArticleCardList(props, ref) {
                   display: { xs: "none", sm: "block" },
                   height: "217.64px",
                 }}
-                src={article.featureImage}
+                src={article.image.src}
               />
               <ArticleCardContent>
                 <Typography variant="subtitle1">{article.title}</Typography>
                 <Typography
                   sx={{ color: "#9F9494", display: "block", mt: 2 }}
                   variant="caption"
                 >
-                  {article.publishedAt}
+                  {article.publishedOn}
                 </Typography>
               </ArticleCardContent>
             </CardActionArea>

diff --git a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.js b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.js
@@ -18,6 +18,8 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
     sx,
     tags,
     title,
+    searchLabel,
+    readMoreLabel,
     ...other
   } = props;
 
@@ -44,32 +46,33 @@ const ArticleGrid = React.forwardRef(function ArticleGrid(props, ref) {
             tag={selectedTag}
             tags={tags}
             SearchInputProps={{
-              placeholder: "Search",
+              placeholder: searchLabel,
             }}
             sx={{
               mb: { xs: 2.5, md: 5 },
             }}
           />
         </Grid>
+        {featuredArticle ? (
+          <Grid
+            item
+            xs={12}
+            sx={{ order: { xs: 1, md: 0 } }}
+            key={featuredArticle.id}
+          >
+            <FeaturedArticle
+              {...featuredArticle}
+              readMoreLabel={readMoreLabel}
+            />
+          </Grid>
+        ) : null}
         {articles?.length > 0 ? (
-          <>
-            {featuredArticle ? (
-              <Grid
-                item
-                xs={12}
-                sx={{ order: { xs: 1, md: 0 } }}
-                key={featuredArticle.id}
-              >
-                <FeaturedArticle {...featuredArticle} />
-              </Grid>
-            ) : null}
-            <Grid item xs={12} sx={{ order: { xs: 2 } }}>
-              <ArticleCardList
-                sx={{ pt: { xs: "28px", md: 0 } }}
-                articles={articles}
-              />
-            </Grid>
-          </>
+          <Grid item xs={12} sx={{ order: { xs: 2 } }}>
+            <ArticleCardList
+              sx={{ pt: { xs: "28px", md: 0 } }}
+              articles={articles}
+            />
+          </Grid>
         ) : null}
       </Grid>
     </Section>

diff --git a/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js b/apps/codeforafrica/src/components/ArticleGrid/ArticleGrid.snap.js
@@ -24,7 +24,6 @@ exports[`<ArticleGrid /> 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"
                 type="search"
                 value=""
               />

diff --git a/apps/codeforafrica/src/components/Articles/Articles.js b/apps/codeforafrica/src/components/Articles/Articles.js
@@ -12,19 +12,16 @@ import equalsIgnoreCase from "@/codeforafrica/utils/equalsIgnoreCase";
 
 const Articles = React.forwardRef(function Articles(props, ref) {
   const {
-    articles: {
-      pagination: { count: countProp, page: pageProp = 1 },
-      results: resultsProp,
-    },
+    articles: articlesList,
+    featured: featuredArticle,
     sx,
     tags,
     title,
+    labels: { search, readMore },
+    pagination: { count: countProp, page: pageProp = 1 },
   } = props;
-  const [articles, setArticles] = useState(resultsProp);
+  const [articles, setArticles] = useState(articlesList);
   const [count, setCount] = useState(countProp);
-  const [featuredArticle, setFeaturedArticle] = useState(() =>
-    resultsProp?.find((article) => article.featured),
-  );
   const [page, setPage] = useState(pageProp);
   const [q, setQ] = useState();
   const [filtering, setFiltering] = useState(false);
@@ -55,27 +52,16 @@ const Articles = React.forwardRef(function Articles(props, ref) {
   const { data } = useArticles({ page, q, tag });
   useEffect(() => {
     if (data) {
-      const { results, pagination } = data;
-      let newFeaturedArticle;
-      let newArticles = results;
-      if (!filtering) {
-        newFeaturedArticle = newArticles.find((article) => article.featured);
-        if (newFeaturedArticle) {
-          newArticles = newArticles.filter(
-            (article) => article.id !== newFeaturedArticle.id,
-          );
-        }
-      }
+      const { stories: results, pagination } = data;
       setCount(pagination.count);
-      setFeaturedArticle(
-        newFeaturedArticle ? { ...newFeaturedArticle } : undefined,
-      );
-      setArticles([...newArticles]);
+      setArticles(results);
     }
   }, [data, filtering]);
 
   useEffect(() => {
-    router.push(queryParams, undefined, {
+    const [pathname] = router.asPath.split("?");
+    const url = pathname ? `${pathname}${queryParams}` : queryParams;
+    router.push(url, undefined, {
       scroll: true,
       shallow: true,
     });
@@ -89,11 +75,14 @@ const Articles = React.forwardRef(function Articles(props, ref) {
     <div ref={ref}>
       <ArticleGrid
         articles={articles}
-        featuredArticle={featuredArticle}
+        featuredArticle={filtering ? null : featuredArticle}
         onChangeQ={handleChangeQ}
         onChangeTag={handleChangeTag}
         selectedTag={tag}
-        tags={tags}
+        tags={[ALL_TAG, ...tags]}
+        searchLabel={search}
+        q={q}
+        readMoreLabel={readMore}
         title={title}
         sx={sx}
       />