members Collection and our team block

apps/codeforafrica/payload.config.ts

@@ -7,6 +7,7 @@ import Media from "./src/payload/collections/Media";
 import Pages from "./src/payload/collections/Pages";
 import Partners from "./src/payload/collections/Partners";
 import Settings from "./src/payload/globals/Settings";
+import Members from "./src/payload/collections/Members";
 import { CollectionConfig, GlobalConfig } from "payload/types";
 import dotenv from "dotenv";
 import seo from "@payloadcms/plugin-seo";
@@ -19,6 +20,16 @@ dotenv.config({ path: "./.env.local" });
 
 const appURL = process?.env?.PAYLOAD_PUBLIC_APP_URL;
 
+const cors =
+  process?.env?.PAYLOAD_CORS?.split(",")
+    ?.map((d) => d.trim())
+    ?.filter(Boolean) ?? [];
+
+const csrf =
+  process?.env?.PAYLOAD_CSRF?.split(",")
+    ?.map((d) => d.trim())
+    ?.filter(Boolean) ?? [];
+
 const adapter = s3Adapter({
   config: {
     region: process?.env?.S3_REGION,
@@ -38,6 +49,7 @@ export default buildConfig({
     Pages,
     Media,
     Partners,
+    Members,
   ] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
   admin: {
@@ -55,6 +67,8 @@ export default buildConfig({
       },
     }),
   },
+  cors,
+  csrf,
   plugins: [
     cloudStorage({
       collections: {

apps/codeforafrica/src/components/OurTeam/OurTeam.js

@@ -22,13 +22,10 @@ function getTags(tagsByFields, field) {
 
 const OurTeam = React.forwardRef(function OurTeam(
   {
-    pathname,
     sx,
     tags: tagsByFields = [],
-    team: {
-      pagination: { count: countProp, page: pageProp },
-      results: resultsProp,
-    },
+    pagination: { count: countProp, page: pageProp },
+    results: resultsProp,
     title,
   },
   ref,
@@ -79,12 +76,13 @@ const OurTeam = React.forwardRef(function OurTeam(
   useEffect(() => {
     if (data) {
       const { results, pagination } = data;
-      setCount(pagination.count);
+      setCount(pagination?.count);
       setMembers([...results]);
     }
   }, [data]);
 
   useEffect(() => {
+    const [pathname] = router.asPath.split("?");
     const url = pathname ? `${pathname}${queryParams}` : queryParams;
     router.push(url, undefined, {
       shallow: true,

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

@@ -9,7 +9,8 @@ import theme from "@/codeforafrica/theme";
 const render = createRender({ theme });
 
 const defaultProps = {
-  team: { pagination: {}, results: [] },
+  pagination: {},
+  results: [],
   title: "Our team",
 };
 

apps/codeforafrica/src/components/OurTeam/useMembers.js

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

apps/codeforafrica/src/components/TeamMemberCard/TeamMemberCard.js

@@ -25,13 +25,18 @@ const TeamMemberCardMedia = styled(CardMedia, {
 });
 
 const TeamMemberCard = React.forwardRef(function TeamMemberCard(props, ref) {
-  const { href, name, title, thumbnail } = props;
+  const {
+    link: { href },
+    name,
+    title,
+    image: { src },
+  } = props;
 
   return (
     <TeamMemberCardRoot elevation={0} square ref={ref}>
       <CardActionArea component={href ? Link : undefined} href={href}>
         <>
-          <TeamMemberCardMedia {...thumbnail} component="img" />
+          <TeamMemberCardMedia src={src} component="img" />
           <CardContent
             sx={{
               p: "10px",

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

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

apps/codeforafrica/src/components/TeamMemberCardList/TeamMemberCardList.js

@@ -39,7 +39,7 @@ const TeamMemberCardList = React.forwardRef(
           }}
         >
           {team?.map((member) => (
-            <Grid item key={member.href}>
+            <Grid item key={member.id}>
               <TeamMemberCard {...member} />
             </Grid>
           ))}

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

@@ -2,21 +2,23 @@ import getInvolved from "./get-involved";
 import hero from "./hero";
 import meetOurTeam from "./meetOurTeam";
 import ourImpact from "./our-impact";
+import ourTeam from "./ourTeam";
 
 const propsifyBlockBySlug = {
   hero,
   "meet-our-team": meetOurTeam,
   "our-impact": ourImpact,
   "get-involved": getInvolved,
+  "our-team": ourTeam,
 };
 
-async function blockify(blocks) {
+async function blockify(blocks, api, context) {
   const promises = blocks?.map(async (block) => {
     const slug = block.blockType;
     const propsifyBlock = propsifyBlockBySlug[slug];
 
     if (propsifyBlock) {
-      return propsifyBlock(block);
+      return propsifyBlock(block, api, context);
     }
     return {
       ...block,

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

@@ -0,0 +1,24 @@
+import { getMembers } from "@/codeforafrica/lib/data/utils/members";
+
+async function ourTeam(block, api, context) {
+  const { query } = context;
+  const data = await getMembers(api, query);
+  const { docs = [] } = await api.getCollection("members");
+  const tags = block?.fields.map((field) => {
+    const uniqueTags =
+      [...new Set(docs.map((item) => item[field]).filter(Boolean))] ?? [];
+    return {
+      field: `${field.charAt(0).toUpperCase()}${field.slice(1)}`,
+      tags: uniqueTags,
+    };
+  });
+
+  return {
+    ...block,
+    ...data,
+    slug: block.blockType,
+    tags,
+  };
+}
+
+export default ourTeam;

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

@@ -156,7 +156,7 @@ export async function getPageProps(api, context) {
   if (params?.slugs?.length > 2) {
     page = await pagify(page, api, context);
   }
-  const blocks = await blockify(page?.blocks);
+  const blocks = await blockify(page?.blocks, api, context);
   const settings = await api.findGlobal("settings");
   const navbar = getNavBar(settings);
   const footer = getFooter(settings);