Impleent feedback

apps/codeforafrica/payload.config.ts

@@ -10,6 +10,7 @@ import Pages from "./src/payload/collections/Pages";
 import Partners from "./src/payload/collections/Partners";
 import Settings from "./src/payload/globals/Settings";
 import Tags from "./src/payload/collections/Tags";
+import Teams from "./src/payload/collections/Teams";
 import { CollectionConfig, GlobalConfig } from "payload/types";
 import dotenv from "dotenv";
 import seo from "@payloadcms/plugin-seo";
@@ -54,6 +55,7 @@ export default buildConfig({
     Media,
     Partners,
     Tags,
+    Teams,
   ] as CollectionConfig[],
   globals: [Settings] as GlobalConfig[],
   admin: {

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

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

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

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

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

@@ -1,17 +1,32 @@
 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) => {
+async function getTags(fields, docs) {
+  return fields.map((field) => {
+    if (field === "team") {
+      return {
+        field: "Team",
+        tags:
+          [
+            "All",
+            ...new Set(docs.map((item) => item[field].name).filter(Boolean)),
+          ] ?? [],
+      };
+    }
     const uniqueTags =
-      [...new Set(docs.map((item) => item[field]).filter(Boolean))] ?? [];
+      ["All", ...new Set(docs.map((item) => item[field]).filter(Boolean))] ??
+      [];
     return {
       field: `${field.charAt(0).toUpperCase()}${field.slice(1)}`,
       tags: uniqueTags,
     };
   });
+}
+
+async function ourTeam(block, api, context) {
+  const { query } = context;
+  const data = await getMembers(api, query);
+  const { docs = [] } = await api.getCollection("members");
+  const tags = await getTags(block?.fields, docs);
 
   return {
     ...block,

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

@@ -1,33 +1,32 @@
-const orQueryBuilder = (fields, search) => {
-  if (!search) {
-    return [];
-  }
-  return fields.map((field) => ({ [field]: { like: search } }));
-};
-
 function getQueryFromParams(params) {
-  const { field, tag } = params;
+  const { field, tag, q } = params;
+  const fields = ["name", "title", "country"];
+  const or = q ? fields.map((f) => ({ [f]: { like: q } })) : [];
   if (field && tag) {
+    if (field === "team") {
+      return {
+        or,
+        "team.name": {
+          like: tag,
+        },
+      };
+    }
     return {
+      or,
       [field]: {
         like: tag,
       },
     };
   }
-  return null;
+  return { or };
 }
 
 export async function getMembers(api, params) {
-  const { page: queryPage = 1, q } = params;
-  const fields = ["name", "title", "country"];
-  const orQuery = orQueryBuilder(fields, q);
+  const { page: queryPage = 1 } = params;
   const options = {
     limit: 18,
     page: queryPage,
-    where: {
-      or: orQuery,
-      ...getQueryFromParams(params),
-    },
+    where: getQueryFromParams(params),
   };
   const {
     docs: results,

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

@@ -1,7 +1,7 @@
-const Partners = {
+const OurTeam = {
   slug: "our-team",
   imageURL: "/images/cms/blocks/team.png",
-  imageAltText: "Our Partners",
+  imageAltText: "Our Team",
   labels: {
     singular: {
       en: "Our Team",
@@ -41,4 +41,4 @@ const Partners = {
   ],
 };
 
-export default Partners;
+export default OurTeam;

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

@@ -15,11 +15,6 @@ const Members = {
       en: "Members",
     },
   },
-  access: {
-    read: () => true,
-    create: () => true,
-    update: () => true,
-  },
   admin: {
     useAsTitle: "name",
   },
@@ -48,9 +43,9 @@ const Members = {
     slug({ fieldToUse: "name" }),
     {
       name: "country",
+      label: { en: "country" },
       type: "select",
       options: allCountries,
-      label: { en: "country" },
     },
     richText({
       name: "description",
@@ -72,7 +67,8 @@ const Members = {
       label: {
         en: "Team",
       },
-      type: "text",
+      type: "relationship",
+      relationTo: "teams",
     },
   ],
   hooks: {

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

@@ -0,0 +1,24 @@
+import slug from "../fields/slug";
+
+const Teams = {
+  slug: "teams",
+  admin: {
+    useAsTitle: "name",
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: "name",
+      label: "Name",
+      type: "text",
+      localized: true,
+      required: true,
+      unique: true,
+    },
+    slug({ fieldToUse: "name" }),
+  ],
+};
+
+export default Teams;