Project List block

apps/codeforafrica/payload.config.ts

@@ -11,6 +11,8 @@ 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 Projects from "./src/payload/collections/Projects";
+import Donors from "./src/payload/collections/Donors";
 import Teams from "./src/payload/collections/Teams";
 import { CollectionConfig, GlobalConfig } from "payload/types";
 import dotenv from "dotenv";
@@ -49,12 +51,14 @@ export default buildConfig({
   serverURL: appURL,
   collections: [
     Authors,
+    Donors,
     GuidingPrinciples,
     Impact,
     Media,
     Members,
     Pages,
     Partners,
+    Projects,
     Posts,
     Tags,
     Teams,
@@ -95,7 +99,7 @@ export default buildConfig({
         doc?.slug?.value ? `${appURL}/${doc.slug.value}` : undefined,
     } as any),
     nestedDocs({
-      collections: ["pages"],
+      collections: ["pages", "projects"],
       generateLabel: (_, doc) => doc.title as string,
       generateURL: (docs) =>
         docs.reduce((url, doc) => `${url}/${doc.slug}`, ""),

apps/codeforafrica/src/components/ProjectCard/ProjectCard.js

@@ -12,6 +12,7 @@ import React from "react";
 
 import ProjectCardMedia from "@/codeforafrica/components/ProjectCardMedia";
 import ProjectTile from "@/codeforafrica/components/ProjectTile";
+import RichText from "@/codeforafrica/components/RichText";
 
 const ProjectActionArea = styled(CardActionArea, {
   slot: "Root",
@@ -31,7 +32,7 @@ const ProjectActionArea = styled(CardActionArea, {
 const ProjectCard = React.forwardRef(function ProjectCard(props, ref) {
   const {
     externalHref,
-    href,
+    link: { href },
     icon,
     name,
     subtitle,
@@ -47,7 +48,7 @@ const ProjectCard = React.forwardRef(function ProjectCard(props, ref) {
   const tileProps = { icon, name, tagLine };
 
   return (
-    <Card elevation={0} square ref={ref} ownerState={ownerState} {...other}>
+    <Card elevation={0} square ref={ref} ownerState={ownerState}>
       <ProjectActionArea component={href ? Link : undefined} href={href}>
         <ProjectCardMedia {...thumbnail} component="img" />
         <Box
@@ -73,12 +74,11 @@ const ProjectCard = React.forwardRef(function ProjectCard(props, ref) {
             >
               {title}
             </RichTypography>
-            <RichTypography
+            <RichText
               variant="body1"
               sx={{ mt: 2.5, typography: { md: "body2" } }}
-            >
-              {subtitle}
-            </RichTypography>
+              elements={subtitle}
+            />
           </CardContent>
           <CardActions sx={{ mt: 2, p: 0 }}>
             <Button component="div" variant="contained-reverse" sx={{ py: 1 }}>

apps/codeforafrica/src/components/ProjectCard/ProjectCard.test.js

@@ -8,7 +8,7 @@ import theme from "@/codeforafrica/theme";
 // eslint-disable-next-line testing-library/render-result-naming-convention
 const render = createRender({ theme });
 
-const defaultProps = {};
+const defaultProps = { link: {} };
 
 describe("<ProjectCard />", () => {
   it("renders unchanged", () => {

apps/codeforafrica/src/components/ProjectCardMedia/ProjectCardMedia.js

@@ -15,10 +15,11 @@ const ProjectCardMediaRoot = styled(CardMedia, {
   },
 }));
 
-const ProjectCardMedia = React.forwardRef(
-  function ProjectCardMedia(props, ref) {
-    return <ProjectCardMediaRoot component="img" {...props} ref={ref} />;
-  },
-);
+const ProjectCardMedia = React.forwardRef(function ProjectCardMedia(
+  { src, alt },
+  ref,
+) {
+  return <ProjectCardMediaRoot component="img" src={src} alt={alt} ref={ref} />;
+});
 
 export default ProjectCardMedia;

apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js

@@ -45,7 +45,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
           </ol>
         </nav>
         <img
-          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-vpxcaz-MuiCardMedia-root"
+          class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-tm1rxb-MuiCardMedia-root"
         />
         <div
           class="MuiBox-root css-1ntmuzk"

apps/codeforafrica/src/components/ProjectTile/ProjectTile.js

@@ -68,7 +68,7 @@ const ProjectTile = React.forwardRef(function ProjectTile(props, ref) {
         <>
           {icon?.src?.length > 0 ? (
             <Figure
-              ImageProps={{ alt: name, ...icon }}
+              ImageProps={{ alt: icon.alt, src: icon.src }}
               sx={{ height: "70px", width: "70px" }}
             />
           ) : null}

apps/codeforafrica/src/components/ProjectTile/ProjectTile.snap.js

@@ -13,7 +13,6 @@ exports[`<ProjectTile /> renders unchanged 1`] = `
         class="MuiBox-root css-f1ltsh"
       >
         <img
-          alt="africanDRONE"
           class="css-g98gbd"
           data-nimg="fill"
           decoding="async"

apps/codeforafrica/src/components/ProjectTileList/ProjectTileList.snap.js

@@ -19,7 +19,6 @@ exports[`<ProjectTileList /> renders unchanged 1`] = `
             class="MuiBox-root css-f1ltsh"
           >
             <img
-              alt="africanDRONE"
               class="css-g98gbd"
               data-nimg="fill"
               decoding="async"

apps/codeforafrica/src/components/Projects/Projects.js

@@ -16,10 +16,8 @@ import equalsIgnoreCase from "@/codeforafrica/utils/equalsIgnoreCase";
 const Projects = React.forwardRef(function Projects(
   {
     tags,
-    projects: {
-      pagination: { count: countProp, page: pageProp = 1 },
-      results: resultsProp,
-    },
+    pagination: { count: countProp, page: pageProp = 1 },
+    results: resultsProp,
     sx,
   },
   ref,
@@ -57,7 +55,9 @@ const Projects = React.forwardRef(function Projects(
   }, [data]);
 
   useEffect(() => {
-    router.push(queryParams, undefined, {
+    const [pathname] = router.asPath.split("?");
+    const url = pathname ? `${pathname}${queryParams}` : queryParams;
+    router.push(url, undefined, {
       scroll: true,
       shallow: true,
     });
@@ -84,7 +84,7 @@ const Projects = React.forwardRef(function Projects(
         {projects?.length > 0 ? (
           <Stack direction="column" spacing={{ xs: 5, md: 7.5 }}>
             {projects.map((project) => (
-              <ProjectCard {...project} key={project.slug} />
+              <ProjectCard {...project} key={project.id} />
             ))}
           </Stack>
         ) : null}

apps/codeforafrica/src/components/Projects/Projects.test.js

@@ -9,7 +9,8 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  projects: { pagination: {}, results: [] },
+  pagination: {},
+  results: [],
 };
 
 describe("<Projects />", () => {

apps/codeforafrica/src/components/Projects/useProjects.js

@@ -6,7 +6,7 @@ const fetcher = (url) => fetch(url).then((res) => res.json());
 
 function useProjects(query) {
   const queryParams = useFilterQuery(query);
-  const { data, error } = useSWR(`/api/projects${queryParams}`, fetcher);
+  const { data, error } = useSWR(`/api/v1/projects${queryParams}`, fetcher);
 
   return {
     data,

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

@@ -3,6 +3,7 @@ import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
 import ourImpact from "./our-impact";
 import ourTeam from "./ourTeam";
+import ourWork from "./ourWork";
 import stories from "./stories";
 
 const propsifyBlockBySlug = {
@@ -12,6 +13,7 @@ const propsifyBlockBySlug = {
   "our-impact": ourImpact,
   stories,
   "our-team": ourTeam,
+  "our-work": ourWork,
 };
 
 async function blockify(blocks, api, context) {

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

@@ -0,0 +1,17 @@
+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 } = await api.getCollection("tag");
+  const tags = docs.map(({ name }) => name);
+
+  return {
+    tags,
+    ...block,
+    ...data,
+    slug: block.blockType,
+  };
+}
+
+export default ourWork;

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

@@ -0,0 +1,37 @@
+function getQuery(fields, query) {
+  const { q, tag } = query;
+  const whereQuery = {
+    or: q ? fields.map((field) => ({ [field]: { like: q } })) : [],
+  };
+  if (tag) {
+    whereQuery["tag.name"] = {
+      like: tag,
+    };
+  }
+  return whereQuery;
+}
+
+export async function getProjects(api, params) {
+  const { page: queryPage = 1 } = params;
+  const fields = ["name", "title", "tag.name", "tagLine"];
+  const options = {
+    limit: 6,
+    page: queryPage,
+    where: getQuery(fields, params),
+  };
+  const {
+    docs: results,
+    totalPages,
+    page,
+  } = await api.getCollection("projects", options);
+
+  return {
+    results,
+    pagination: {
+      count: totalPages,
+      page,
+    },
+  };
+}
+
+export default undefined;

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

@@ -17,6 +17,7 @@ import OurImpact from "@/codeforafrica/components/OurImpact";
 import OurPartners from "@/codeforafrica/components/OurPartners";
 import OurTeam from "@/codeforafrica/components/OurTeam";
 import PageHeader from "@/codeforafrica/components/PageHeader";
+import Projects from "@/codeforafrica/components/Projects";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
 const componentsBySlugs = {
@@ -35,6 +36,7 @@ const componentsBySlugs = {
   "our-partners": OurPartners,
   "page-header": PageHeader,
   "our-team": OurTeam,
+  "our-work": Projects,
   projects: FeaturedProjects,
 };
 

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

@@ -0,0 +1,11 @@
+import { getProjects } from "@/codeforafrica/lib/data/utils/projects";
+import api from "@/codeforafrica/lib/payload";
+
+export default async function handler(req, res) {
+  try {
+    const data = await getProjects(api, req.query);
+    return res.json(data);
+  } catch (error) {
+    return res.status(500).json(error);
+  }
+}

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

@@ -0,0 +1,24 @@
+const OurWork = {
+  slug: "our-work",
+  imageURL: "/images/cms/blocks/projects.png",
+  imageAltText: "Our Work",
+  labels: {
+    singular: {
+      en: "Our Work",
+    },
+    plural: {
+      en: "Our Work",
+    },
+  },
+  fields: [
+    {
+      name: "title",
+      label: {
+        en: "Title",
+      },
+      type: "text",
+    },
+  ],
+};
+
+export default OurWork;

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

@@ -0,0 +1,37 @@
+import image from "../fields/image";
+import slug from "../fields/slug";
+
+const Donors = {
+  slug: "donors",
+  labels: {
+    singular: {
+      en: "Donor",
+    },
+    plural: {
+      en: "Donors",
+    },
+  },
+  admin: {
+    useAsTitle: "name",
+    defaultColumns: ["name", "logo"],
+  },
+  fields: [
+    {
+      name: "name",
+      label: {
+        en: "Name",
+      },
+      type: "text",
+      required: true,
+    },
+    slug({ fieldToUse: "name" }),
+    image({
+      overrides: {
+        name: "logo",
+        required: true,
+      },
+    }),
+  ],
+};
+
+export default Donors;

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

@@ -10,6 +10,7 @@ import MeetOurTeam from "../blocks/MeetOurTeam";
 import OurImpact from "../blocks/OurImpact";
 import OurPartners from "../blocks/OurPartners";
 import OurTeam from "../blocks/OurTeam";
+import OurWork from "../blocks/OurWork";
 import PageHeader from "../blocks/PageHeader";
 import Stories from "../blocks/Stories";
 import fullTitle from "../fields/fullTitle";
@@ -60,6 +61,7 @@ const Pages = {
         OurImpact,
         OurPartners,
         OurTeam,
+        OurWork,
         Stories,
       ],
       admin: {