Add locations

CodeForAfrica · Oct 9, 2023 · 3121a87 · 3121a87
1 parent aef401c
commit 3121a87
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 7 deletions.
diff --git a/apps/codeforafrica/payload.config.ts b/apps/codeforafrica/payload.config.ts
@@ -12,6 +12,7 @@ import Authors from "./src/payload/collections/Authors";
 import Donors from "./src/payload/collections/Donors";
 import GuidingPrinciples from "./src/payload/collections/GuidingPrinciples";
 import Impact from "./src/payload/collections/Impact";
+import Locations from "./src/payload/collections/Locations";
 import Media from "./src/payload/collections/Media";
 import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
@@ -57,6 +58,7 @@ export default buildConfig({
     Donors,
     GuidingPrinciples,
     Impact,
+    Locations,
     Media,
     Members,
     Pages,

diff --git a/apps/codeforafrica/src/components/AddressCard/AddressCard.js b/apps/codeforafrica/src/components/AddressCard/AddressCard.js
@@ -13,14 +13,23 @@ const AddressCardRoot = styled(Card)(({ theme, ownerState }) => ({
 }));
 
 const AddressCard = React.forwardRef(function AddressCard(props, ref) {
-  const { active, content, onClick, title } = props;
+  const {
+    active,
+    addressLine1,
+    addressLine2,
+    zipcode,
+    city,
+    country,
+    onClick,
+    title,
+  } = props;
   const handleClick = (e) => {
     if (onClick) {
       onClick(e, title);
     }
   };
 
-  if (!(title && content)) {
+  if (!title) {
     return null;
   }
   const ownerState = { active };
@@ -38,12 +47,37 @@ const AddressCard = React.forwardRef(function AddressCard(props, ref) {
             {title}
           </RichTypography>
           <RichTypography
-            component="address"
             // In address, we treat <p> as a line i.e.no margins.
             sx={{ color: "inherit", pt: 1.25, "& p": { m: 0 } }}
             variant="body3"
           >
-            {content}
+            {addressLine1}
+          </RichTypography>
+          <RichTypography
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+          >
+            {addressLine2}
+          </RichTypography>
+          <RichTypography
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+            component="span"
+          >
+            {zipcode},
+          </RichTypography>
+          <RichTypography
+            component="span"
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+          >
+            {city}
+          </RichTypography>
+          <RichTypography
+            sx={{ color: "inherit", "& p": { m: 0 } }}
+            variant="body3"
+          >
+            {country}
           </RichTypography>
         </CardContent>
       </CardActionArea>

diff --git a/apps/codeforafrica/src/components/OfficeAddresses/OfficeAddresses.js b/apps/codeforafrica/src/components/OfficeAddresses/OfficeAddresses.js
@@ -18,7 +18,7 @@ const OfficeAddressesRoot = styled(Box)(({ theme, ownerState }) => ({
 }));
 
 const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
-  const { addresses, height = 700, map, title, ...other } = props;
+  const { addresses = [], height = 700, map, title, apiKey, ...other } = props;
   const [activeAddress, setActiveAddress] = React.useState(
     addresses?.[0] ?? null,
   );
@@ -33,8 +33,17 @@ const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
   }
   const ownerState = { height };
   const mapStyle = { height, width: "100%", ...map?.style };
+  const position = {
+    lng: activeAddress?.location?.[0],
+    lat: activeAddress?.location?.[1],
+  };
   return (
-    <OfficeAddressesRoot {...other} ownerState={ownerState} ref={ref}>
+    <OfficeAddressesRoot
+      {...other}
+      sx={{ mt: { xs: 2.5, md: 10 } }}
+      ownerState={ownerState}
+      ref={ref}
+    >
       <Box
         sx={{
           display: { xs: "none", md: "block" },
@@ -46,7 +55,13 @@ const OfficeAddresses = React.forwardRef(function OfficeAddresses(props, ref) {
           zIndex: -1,
         }}
       >
-        <GoogleMap {...map} {...activeAddress?.map} style={mapStyle} />
+        <GoogleMap
+          {...map}
+          {...activeAddress}
+          position={position}
+          center={position}
+          style={mapStyle}
+        />
       </Box>
       <Section
         sx={{

diff --git a/apps/codeforafrica/src/pages/[...slugs].page.js b/apps/codeforafrica/src/pages/[...slugs].page.js
@@ -14,6 +14,7 @@ import Hero from "@/codeforafrica/components/Hero";
 import JoinOurSlack from "@/codeforafrica/components/JoinOurSlack";
 import MeetOurTeam from "@/codeforafrica/components/MeetOurTeam";
 import NewsAndStories from "@/codeforafrica/components/NewsAndStories";
+import OfficeAddresses from "@/codeforafrica/components/OfficeAddresses";
 import Opportunities from "@/codeforafrica/components/Opportunities";
 import OurImpact from "@/codeforafrica/components/OurImpact";
 import OurMission from "@/codeforafrica/components/OurMission";
@@ -40,6 +41,7 @@ const componentsBySlugs = {
   "our-guiding-principles": GuidingPrinciplesCardList,
   "our-impact": OurImpact,
   "our-mission": OurMission,
+  "our-address": OfficeAddresses,
   "our-partners": OurPartners,
   "our-team": OurTeam,
   "our-work": Projects,

diff --git a/apps/codeforafrica/src/payload/blocks/OurAddress.js b/apps/codeforafrica/src/payload/blocks/OurAddress.js
@@ -0,0 +1,29 @@
+const OurAddress = {
+  slug: "our-address",
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    {
+      type: "group",
+      name: "map",
+      fields: [
+        {
+          name: "apiKey",
+          type: "text",
+          required: true,
+        },
+      ],
+    },
+    {
+      type: "relationship",
+      relationTo: "locations",
+      hasMany: true,
+      name: "addresses",
+    },
+  ],
+};
+
+export default OurAddress;
diff --git a/apps/codeforafrica/src/payload/collections/Locations.js b/apps/codeforafrica/src/payload/collections/Locations.js
@@ -0,0 +1,43 @@
+const Locations = {
+  slug: "locations",
+  admin: {
+    group: "Website",
+    defaultColumns: ["title"],
+    useAsTitle: "title",
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+    },
+    {
+      name: "location",
+      type: "point",
+      label: "Location",
+      required: true,
+    },
+    {
+      name: "addressLine1",
+      type: "text",
+    },
+    {
+      name: "addressLine2",
+      type: "text",
+    },
+    {
+      name: "zipcode",
+      type: "text",
+    },
+    {
+      name: "city",
+      type: "text",
+    },
+    {
+      name: "country",
+      type: "text",
+    },
+  ],
+};
+
+export default Locations;
diff --git a/apps/codeforafrica/src/payload/collections/Pages.js b/apps/codeforafrica/src/payload/collections/Pages.js
@@ -9,6 +9,7 @@ import GuidingPrinciples from "../blocks/GuidingPrinciples";
 import Hero from "../blocks/Hero";
 import JoinOurSlack from "../blocks/JoinOurSlack";
 import MeetOurTeam from "../blocks/MeetOurTeam";
+import OurAddress from "../blocks/OurAddress";
 import OurImpact from "../blocks/OurImpact";
 import OurMission from "../blocks/OurMission";
 import OurPartners from "../blocks/OurPartners";
@@ -63,6 +64,7 @@ const Pages = {
         PageHeader,
         Posts,
         CustomPageHeader,
+        OurAddress,
         OurImpact,
         OurMission,
         OurPartners,