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

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

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

@@ -1,3 +1,4 @@
+import featuredProjects from "./featuredProjects";
 import getInvolved from "./get-involved";
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
@@ -13,6 +14,7 @@ const propsifyBlockBySlug = {
   "our-impact": ourImpact,
   "our-team": ourTeam,
   "our-work": ourWork,
+  "featured-projects": featuredProjects,
   // post-list to avoid conflict with posts collection in payload
   "post-list": posts,
 };

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

@@ -1,14 +1,15 @@
+import { sortTags } from "@/codeforafrica/lib/data/utils/posts";
 import { getProjects } from "@/codeforafrica/lib/data/utils/projects";
 
 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/pages/[...slugs].page.js

@@ -43,7 +43,7 @@ const componentsBySlugs = {
   "our-team": OurTeam,
   "our-work": Projects,
   "page-header": PageHeader,
-  projects: FeaturedProjects,
+  "featured-projects": FeaturedProjects,
   project: Project,
   stories: Articles,
 };

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

@@ -0,0 +1,28 @@
+import tags from "../fields/tags";
+
+const FeaturedProjects = {
+  slug: "featured-projects",
+  imageURL: "/images/cms/blocks/our-work-showcase.png",
+  imageAltText: "Featured Projects",
+  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 FeaturedProjects;

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

@@ -1,6 +1,7 @@
 import ContactForm from "../blocks/ContactForm";
 import CustomPageHeader from "../blocks/CustomPageHeader";
 import Error from "../blocks/Error";
+import FeaturedProjects from "../blocks/FeaturedProjects";
 import GetInTouch from "../blocks/GetInTouch";
 import GetInvolved from "../blocks/GetInvolved";
 import GuidingPrinciples from "../blocks/GuidingPrinciples";
@@ -51,6 +52,7 @@ const Pages = {
       blocks: [
         ContactForm,
         Error,
+        FeaturedProjects,
         GetInTouch,
         GetInvolved,
         GuidingPrinciples,