projects

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/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/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/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/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,13 +3,15 @@ import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
 import ourImpact from "./our-impact";
 import ourTeam from "./ourTeam";
+import ourWork from "./ourWork";
 
 const propsifyBlockBySlug = {
   hero,
   "meet-our-team": meetOurTeam,
   "our-impact": ourImpact,
   "get-involved": getInvolved,
   "our-team": ourTeam,
+  "our-work": ourWork,
 };
 
 async function blockify(blocks, api, context) {

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

@@ -0,0 +1,14 @@
+import { getProjects } from "@/codeforafrica/lib/data/utils/projects";
+
+async function ourWork(block, api, context) {
+  const { query } = context;
+  const data = await getProjects(api, query);
+
+  return {
+    ...block,
+    ...data,
+    slug: block.blockType,
+  };
+}
+
+export default ourWork;

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

@@ -0,0 +1,34 @@
+const orQueryBuilder = (fields, search) => {
+  if (!search) {
+    return [];
+  }
+  return fields.map((field) => ({ [field]: { like: search } }));
+};
+
+export async function getProjects(api, params) {
+  const { page: queryPage = 1, q } = params;
+  const fields = ["name", "title", "tags", "tagLine"];
+  const orQuery = orQueryBuilder(fields, q);
+  const options = {
+    limit: 6,
+    page: queryPage,
+    where: {
+      or: orQuery,
+    },
+  };
+  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

@@ -16,6 +16,7 @@ import OurPartners from "@/codeforafrica/components/OurPartners";
 import OurTeam from "@/codeforafrica/components/OurTeam";
 import PageHeader from "@/codeforafrica/components/PageHeader";
 import Partner from "@/codeforafrica/components/Partner";
+import Projects from "@/codeforafrica/components/Projects";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
 const componentsBySlugs = {
@@ -32,6 +33,7 @@ const componentsBySlugs = {
   "our-partners": OurPartners,
   "page-header": PageHeader,
   "our-team": OurTeam,
+  "our-work": Projects,
   projects: FeaturedProjects,
   partner: Partner,
 };

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

@@ -11,6 +11,10 @@ const Donors = {
       en: "Donors",
     },
   },
+  admin: {
+    useAsTitle: "name",
+    defaultColumns: ["name", "logo"],
+  },
   fields: [
     {
       name: "name",

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 fullTitle from "../fields/fullTitle";
 import slug from "../fields/slug";
@@ -59,6 +60,7 @@ const Pages = {
         OurImpact,
         OurPartners,
         OurTeam,
+        OurWork,
       ],
       admin: {
         initCollapsed: true,

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

@@ -1,9 +1,11 @@
 import dateTime from "../fields/dateTime";
 import image from "../fields/image";
-import link from "../fields/links/link";
 import linkArray from "../fields/links/linkArray";
+import linkGroup from "../fields/links/linkGroup";
 import richText from "../fields/richText";
+import slug from "../fields/slug";
 import tags from "../fields/tags";
+import nestCollectionUnderPage from "../utils/nestCollectionUnderPage";
 
 const Projects = {
   slug: "projects",
@@ -19,6 +21,13 @@ const Projects = {
       type: "text",
       required: true,
     },
+    {
+      name: "tagLine",
+      label: {
+        en: "Tag Line",
+      },
+      type: "text",
+    },
     {
       name: "title",
       label: { en: "Title" },
@@ -51,7 +60,7 @@ const Projects = {
         required: true,
       },
     }),
-    link(),
+    linkGroup({ overrides: { name: "externalHref" } }),
     linkArray(),
     {
       name: "badges",
@@ -88,7 +97,7 @@ const Projects = {
       },
       required: true,
       type: "relationship",
-      relationTo: "partners",
+      relationTo: "members",
       hasMany: true,
     },
     {
@@ -101,7 +110,11 @@ const Projects = {
       relationTo: "donors",
       hasMany: true,
     },
+    slug({ fieldToUse: "name" }),
   ],
+  hooks: {
+    afterRead: [nestCollectionUnderPage("work")],
+  },
 };
 
 export default Projects;

apps/codeforafrica/src/payload/fields/dateTime.js

@@ -6,7 +6,6 @@ const dateTime = (overrides) =>
       name: "date",
       type: "date",
       admin: {
-        readOnly: true,
         date: {
           pickerAppearance: "dayAndTime",
         },