Add members single Page View

apps/codeforafrica/src/components/Partner/Partner.js → apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.js

@@ -8,26 +8,38 @@ import RelatedProjects from "@/codeforafrica/components/RelatedProjects";
 import RichText from "@/codeforafrica/components/RichText";
 import SectionDivider from "@/codeforafrica/components/SectionDivider";
 
-const Partner = React.forwardRef(function Partner(
-  { description, connect, relatedProjects, relatedProjectsTitle, name, logo },
+const Page = React.forwardRef(function Page(
+  {
+    description,
+    connect,
+    relatedProjects,
+    relatedProjectsTitle,
+    name,
+    logo,
+    user,
+    title,
+  },
   ref,
 ) {
   return (
     <Box ref={ref} sx={{ pb: { xs: 10, md: 7 } }}>
       <AboutChildPageHeader
         name={name}
         image={logo}
+        title={title}
         FigureProps={{
-          sx: {
-            backgroundPositionY: "center",
-            backgroundRepeat: "no-repeat",
-            backgroundSize: "contain",
-            bgcolor: "background.default",
-            borderRadius: 0,
-            filter: "drop-shadow(0px 8.7px 17.4px rgba(0, 0, 0, 0.1))",
-            height: { xs: 116 },
-            width: { xs: 247 },
-          },
+          ...(!user && {
+            sx: {
+              backgroundPositionY: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "contain",
+              bgcolor: "background.default",
+              borderRadius: 0,
+              filter: "drop-shadow(0px 8.7px 17.4px rgba(0, 0, 0, 0.1))",
+              height: { xs: 116 },
+              width: { xs: 247 },
+            },
+          }),
         }}
       />
       <Section
@@ -86,4 +98,4 @@ const Partner = React.forwardRef(function Partner(
   );
 });
 
-export default Partner;
+export default Page;

apps/codeforafrica/src/components/Partner/Partner.snap.js → apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.snap.js

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Partners /> renders unchanged 1`] = `
+exports[`<AboutPageEntity /> renders unchanged 1`] = `
 <div>
   <div
     class="MuiBox-root css-1gghq2r"

apps/codeforafrica/src/components/Partner/Partner.test.js → apps/codeforafrica/src/components/AboutPageEntity/AboutPageEntity.test.js

@@ -1,7 +1,7 @@
 import { createRender } from "@commons-ui/testing-library";
 import React from "react";
 
-import Partner from "./Partner";
+import AboutPageEntity from "./AboutPageEntity";
 
 import theme from "@/codeforafrica/theme";
 
@@ -22,9 +22,9 @@ const defaultProps = {
   ],
 };
 
-describe("<Partners />", () => {
+describe("<AboutPageEntity />", () => {
   it("renders unchanged", () => {
-    const { container } = render(<Partner {...defaultProps} />);
+    const { container } = render(<AboutPageEntity {...defaultProps} />);
     expect(container).toMatchSnapshot();
   });
 });

apps/codeforafrica/src/components/AboutPageEntity/index.js

@@ -0,0 +1,3 @@
+import AboutPageEntity from "./AboutPageEntity";
+
+export default AboutPageEntity;

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

@@ -1,7 +1,9 @@
+import members from "./members";
 import partners from "./partners";
 
 const COLLECTION_BY_SLUG = {
   partners,
+  members,
 };
 
 async function pagify(parentPage, api, context) {

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

@@ -0,0 +1,37 @@
+import { imageFromMedia } from "@/codeforafrica/lib/data/utils";
+
+async function members(api, context) {
+  const { params, locale } = context;
+  const slug = params.slugs[2];
+  const { docs } = await api.getCollection("members", {
+    locale,
+    where: {
+      slug: {
+        equals: slug,
+      },
+    },
+  });
+  if (!docs?.length) {
+    return null;
+  }
+  const [member] = docs;
+  const meta = {
+    title: member.name,
+    description: member.decription,
+    image: member.image,
+  };
+  return {
+    blocks: [
+      {
+        relatedProjects: [],
+        ...member,
+        user: true,
+        logo: imageFromMedia(member.image),
+        blockType: "about-page-entity",
+      },
+    ],
+    meta,
+  };
+}
+
+export default members;

apps/codeforafrica/src/lib/data/pagify/partners.js

@@ -15,15 +15,21 @@ async function partners(api, context) {
     return null;
   }
   const [partner] = docs;
+  const meta = {
+    title: partner.name,
+    description: partner.decription,
+    image: partner.image,
+  };
   return {
     blocks: [
       {
         relatedProjects: [], // TODO(koechkevin) Related projects go here once projects implemented
         ...partner,
         logo: imageFromMedia(partner.logo),
-        blockType: "partner",
+        blockType: "about-page-entity",
       },
     ],
+    meta,
   };
 }
 

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { SWRConfig } from "swr";
 
+import AboutPageEntity from "@/codeforafrica/components/AboutPageEntity";
 import Articles from "@/codeforafrica/components/Articles";
 import ContactForm from "@/codeforafrica/components/ContactForm";
 import CustomPageHeader from "@/codeforafrica/components/CustomPageHeader";
@@ -16,10 +17,10 @@ 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 Partner from "@/codeforafrica/components/Partner";
 import { getPageServerSideProps } from "@/codeforafrica/lib/data";
 
 const componentsBySlugs = {
+  "about-page-entity": AboutPageEntity,
   articles: Articles,
   "contact-form": ContactForm,
   "custom-page-header": CustomPageHeader,
@@ -35,7 +36,6 @@ const componentsBySlugs = {
   "page-header": PageHeader,
   "our-team": OurTeam,
   projects: FeaturedProjects,
-  partner: Partner,
 };
 
 function Index({ blocks, fallback }) {