Merge pull request #622 from CodeForAfrica/feature/projects-showcase

Featured Projects block

apps/codeforafrica/src/components/FeaturedProjects/FeaturedProjects.js

@@ -6,18 +6,20 @@ import ChoiceChipGroup from "@/codeforafrica/components/ChoiceChipGroup";
 import ProjectTileList from "@/codeforafrica/components/ProjectTileList";
 import equalsIgnoreCase from "@/codeforafrica/utils/equalsIgnoreCase";
 
-const DEFAULT_TAG = "Products";
-
 const FeaturedProjects = React.forwardRef(
   function FeaturedProjects(props, ref) {
-    const { tags = [], projects = [], slug, ...other } = props;
-    const [selectedTag, setSelectedTag] = useState(DEFAULT_TAG);
+    const {
+      tags = [],
+      projects = [],
+      defaultTag: { slug: defaultTag } = {},
+    } = props;
+    const [selectedTag, setSelectedTag] = useState(defaultTag);
     const handleChangeCategory = (_, value) => {
-      const newTag = value || DEFAULT_TAG;
+      const newTag = value || defaultTag;
       setSelectedTag(newTag);
     };
     const filteredProjects = useMemo(() => {
-      return projects.filter((p) => equalsIgnoreCase(selectedTag, p.tag));
+      return projects.filter((p) => equalsIgnoreCase(selectedTag, p.tag.slug));
     }, [projects, selectedTag]);
 
     if (!projects?.length) {
@@ -32,7 +34,6 @@ const FeaturedProjects = React.forwardRef(
           px: { xs: 2.5, sm: 0 },
           py: { xs: 2.5, sm: 4.6, md: "66.8px" },
         }}
-        {...other}
         ref={ref}
       >
         {tags?.length > 0 ? (
@@ -42,7 +43,7 @@ const FeaturedProjects = React.forwardRef(
             value={selectedTag}
           >
             {tags.map((tag) => (
-              <ChoiceChip label={tag} value={tag} key={tag} />
+              <ChoiceChip label={tag.name} value={tag.slug} key={tag.slug} />
             ))}
           </ChoiceChipGroup>
         ) : null}

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

@@ -0,0 +1,15 @@
+import { sortTags } from "@/codeforafrica/lib/data/utils/tags";
+
+async function featuredWork(block) {
+  const { projects } = block;
+  const projectTags = projects.map(({ tag }) => tag).filter(Boolean);
+  const tags = sortTags(projectTags);
+
+  return {
+    ...block,
+    tags,
+    slug: block.blockType,
+  };
+}
+
+export default featuredWork;

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

@@ -1,4 +1,5 @@
 import featuredStories from "./featuredStories";
+import featuredWork from "./featuredWork";
 import getInvolved from "./get-involved";
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
@@ -8,6 +9,7 @@ import ourWork from "./ourWork";
 import posts from "./posts";
 
 const propsifyBlockBySlug = {
+  "featured-work": featuredWork,
   "featured-stories": featuredStories,
   "get-involved": getInvolved,
   hero,

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

@@ -1,14 +1,15 @@
 import { getProjects } from "@/codeforafrica/lib/data/utils/projects";
+import { sortTags } from "@/codeforafrica/lib/data/utils/tags";
 
 async function ourWork(block, api, context) {
   const { query } = context;
   const data = await getProjects(api, query);
   const { docs: allProjects } = await api.getCollection("projects");
   const projectTags = allProjects.map(({ tag }) => tag).filter(Boolean);
-  const tags = [{ name: "All", slug: "all" }, ...new Set(projectTags)];
+  const tags = sortTags(projectTags);
 
   return {
-    tags,
+    tags: [{ name: "All", slug: "all" }, ...tags],
     ...block,
     ...data,
     slug: block.blockType,

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

@@ -1,17 +1,6 @@
+import { sortTags } from "@/codeforafrica/lib/data/utils/tags";
 import formatDate from "@/codeforafrica/utils/formatDate";
 
-export function sortTags(tags) {
-  // Since we know 2 different tags can't have the same slug, we can just use
-  // an object instead of `Set` and `find`
-  const tagsBySlug = tags.reduce((acc, curr) => {
-    acc[curr.slug] = curr;
-    return acc;
-  }, {});
-  return Object.keys(tagsBySlug)
-    .sort()
-    .map((slug) => tagsBySlug[slug]);
-}
-
 export function formatPost(post, primaryTag) {
   const {
     id,

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

@@ -0,0 +1,13 @@
+export function sortTags(tags) {
+  // Since we know 2 different tags can't have the same slug, we can just use
+  // an object instead of `Set` and `find`
+  const tagsBySlug = tags.reduce((acc, curr) => {
+    acc[curr.slug] = curr;
+    return acc;
+  }, {});
+  return Object.keys(tagsBySlug)
+    .sort()
+    .map((slug) => tagsBySlug[slug]);
+}
+
+export default null;

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

@@ -29,6 +29,7 @@ const componentsBySlugs = {
   article: ArticlePage,
   "contact-form": ContactForm,
   "custom-page-header": CustomPageHeader,
+  "featured-work": FeaturedProjects,
   "featured-stories": NewsAndStories,
   "get-involved": GetInvolved,
   "get-in-touch": GetInTouch,
@@ -43,7 +44,6 @@ const componentsBySlugs = {
   "our-team": OurTeam,
   "our-work": Projects,
   "page-header": PageHeader,
-  projects: FeaturedProjects,
   project: Project,
   stories: Articles,
 };

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

@@ -0,0 +1,28 @@
+import tags from "../fields/tags";
+
+const FeaturedWork = {
+  slug: "featured-work",
+  imageURL: "/images/cms/blocks/our-work-showcase.png",
+  imageAltText: "Featured Work",
+  fields: [
+    tags({
+      name: "defaultTag",
+      label: {
+        en: "Default Tag",
+      },
+      hasMany: false,
+    }),
+    {
+      name: "projects",
+      type: "relationship",
+      relationTo: "projects",
+      hasMany: true,
+      required: true,
+      admin: {
+        isSortable: true,
+      },
+    },
+  ],
+};
+
+export default FeaturedWork;

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

@@ -2,6 +2,7 @@ import ContactForm from "../blocks/ContactForm";
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
 import FeaturedStories from "../blocks/FeaturedStories";
+import FeaturedWork from "../blocks/FeaturedWork";
 import GetInTouch from "../blocks/GetInTouch";
 import GetInvolved from "../blocks/GetInvolved";
 import GuidingPrinciples from "../blocks/GuidingPrinciples";
@@ -52,6 +53,7 @@ const Pages = {
       blocks: [
         ContactForm,
         Error,
+        FeaturedWork,
         FeaturedStories,
         GetInTouch,
         GetInvolved,