From fa2a33f9f224945e67f466af4f37d5b01417c4d2 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:55:30 +0300
Subject: [PATCH 01/20] Add default location to HURUMap config

---
 .../src/pages/api/hurumap/profiles.js         | 25 +++++++++++
 .../src/payload/fields/LocationSelect.js      | 43 +++++++++++++++++++
 .../src/payload/globals/HURUMap/index.js      | 34 +++++++++++++++
 3 files changed, 102 insertions(+)
 create mode 100644 apps/climatemappedafrica/src/pages/api/hurumap/profiles.js
 create mode 100644 apps/climatemappedafrica/src/payload/fields/LocationSelect.js

diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles.js b/apps/climatemappedafrica/src/pages/api/hurumap/profiles.js
new file mode 100644
index 000000000..ae3ff17a5
--- /dev/null
+++ b/apps/climatemappedafrica/src/pages/api/hurumap/profiles.js
@@ -0,0 +1,25 @@
+import { fetchProfile } from "@/climatemappedafrica/lib/hurumap";
+
+let cache = null;
+let cacheExpiry = 0;
+
+export default async function handler(req, res) {
+  if (req.method === "GET") {
+    const now = Date.now();
+
+    if (cache && now < cacheExpiry) {
+      return res.status(200).json(cache);
+    }
+
+    try {
+      const result = await fetchProfile();
+      cache = result;
+      cacheExpiry = now + 5 * 60 * 1000;
+      return res.status(200).json(result);
+    } catch (err) {
+      return res.status(500).json(err.message);
+    }
+  }
+
+  return res.status(405).end();
+}
diff --git a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
new file mode 100644
index 000000000..5e6e3bf94
--- /dev/null
+++ b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
@@ -0,0 +1,43 @@
+import { Select } from "payload/components/forms";
+import { select } from "payload/dist/fields/validations";
+import { createElement, useMemo } from "react";
+import useSWR from "swr";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
+
+export async function validateLocation(value, { hasMany, required, t }) {
+  const response = await fetch(`${apiUrl}/api/hurumap/profiles`);
+  const data = await response.json();
+  const { locations } = data ?? {};
+  const options =
+    locations
+      ?.filter(({ level }) => level !== "region")
+      ?.map((location) => ({
+        label: location.name,
+        value: location.code,
+      })) || [];
+  return select(value, { hasMany, options, required, t });
+}
+
+function LocationSelect(props) {
+  const url = `${apiUrl}/api/hurumap/profiles`;
+  const { data } = useSWR(url, fetcher, {
+    dedupingInterval: 60000,
+    revalidateOnFocus: false,
+  });
+  const { locations } = data ?? {};
+  const memoOptions = () =>
+    (
+      locations
+        ?.filter(({ level }) => level !== "region")
+        ?.map((location) => ({
+          label: location.name,
+          value: location.code,
+        })) || []
+    ).sort((a, b) => a.label.localeCompare(b.label));
+  const options = useMemo(memoOptions, [locations]);
+  return createElement(Select, { ...props, options });
+}
+
+export default LocationSelect;
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 6a6592f31..3e3e9cc55 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -1,11 +1,15 @@
+import LocationSelect, { validateLocation } from "../../fields/LocationSelect";
+
 const HURUMap = {
   slug: "settings-hurumap",
   label: "HURUMap",
+  description: "HURUMap Configuration",
   access: {
     read: () => true,
   },
   admin: {
     group: "Settings",
+    hideAPIURL: true,
   },
   fields: [
     {
@@ -15,6 +19,36 @@ const HURUMap = {
       relationTo: ["pages"],
       maxDepth: 1,
       required: true,
+      admin: {
+        description:
+          "The page to use as the Explore page. It will contain the interactive map.",
+      },
+    },
+    {
+      name: "initialLocation",
+      label: "Initial Location",
+      type: "group",
+      fields: [
+        {
+          name: "name",
+          type: "text",
+          required: true,
+          hasMany: false,
+          defaultValue: "af",
+          validate: validateLocation,
+          admin: {
+            components: {
+              Field: LocationSelect,
+            },
+          },
+        },
+        {
+          name: "center",
+          label: "Center Point",
+          type: "point",
+          defaultValue: [0.3051933453207569, 37.908818734483155],
+        },
+      ],
     },
   ],
 };

From 852494c6fbca0baeff2cba6344e4570788a51066 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:01:37 +0300
Subject: [PATCH 02/20] Improve LocationSelect

---
 .../src/payload/fields/LocationSelect.js      | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
index 5e6e3bf94..293f4b762 100644
--- a/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
+++ b/apps/climatemappedafrica/src/payload/fields/LocationSelect.js
@@ -3,40 +3,37 @@ import { select } from "payload/dist/fields/validations";
 import { createElement, useMemo } from "react";
 import useSWR from "swr";
 
-const fetcher = (url) => fetch(url).then((res) => res.json());
 const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const getOptions = (locations) =>
+  locations
+    ?.filter(({ level }) => level !== "region")
+    ?.map((location) => ({
+      label: location.name,
+      value: location.code,
+    })) || [];
 
 export async function validateLocation(value, { hasMany, required, t }) {
-  const response = await fetch(`${apiUrl}/api/hurumap/profiles`);
-  const data = await response.json();
-  const { locations } = data ?? {};
-  const options =
-    locations
-      ?.filter(({ level }) => level !== "region")
-      ?.map((location) => ({
-        label: location.name,
-        value: location.code,
-      })) || [];
+  const data = await fetcher(`${apiUrl}/api/hurumap/profiles`);
+  const options = getOptions(data.locations);
   return select(value, { hasMany, options, required, t });
 }
 
 function LocationSelect(props) {
-  const url = `${apiUrl}/api/hurumap/profiles`;
-  const { data } = useSWR(url, fetcher, {
+  const { data } = useSWR(`${apiUrl}/api/hurumap/profiles`, fetcher, {
     dedupingInterval: 60000,
     revalidateOnFocus: false,
   });
-  const { locations } = data ?? {};
-  const memoOptions = () =>
-    (
-      locations
-        ?.filter(({ level }) => level !== "region")
-        ?.map((location) => ({
-          label: location.name,
-          value: location.code,
-        })) || []
-    ).sort((a, b) => a.label.localeCompare(b.label));
-  const options = useMemo(memoOptions, [locations]);
+
+  const options = useMemo(
+    () =>
+      getOptions(data?.locations).sort((a, b) =>
+        a.label.localeCompare(b.label),
+      ),
+    [data],
+  );
+
   return createElement(Select, { ...props, options });
 }
 

From 61e80740702961098aa755a993cde21e2dfcd1b2 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:55:32 +0300
Subject: [PATCH 03/20] Working Explore Page

---
 .../src/lib/data/blockify/explore-page.js     | 181 ++++++++++++++++++
 .../src/lib/data/blockify/index.js            |   2 +
 .../src/lib/data/common/index.js              |  22 ++-
 .../src/pages/[[...slug]].js                  |   2 +
 4 files changed, 206 insertions(+), 1 deletion(-)
 create mode 100644 apps/climatemappedafrica/src/lib/data/blockify/explore-page.js

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
new file mode 100644
index 000000000..a3a432129
--- /dev/null
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -0,0 +1,181 @@
+const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const fetchProfile = async () => {
+  const data = await fetcher(`${apiUrl}/api/hurumap/profiles`);
+  return data;
+};
+
+const fetchProfileGeography = async (geoCode) => {
+  const data = await fetcher(`${apiUrl}/api/hurumap/geographies/${geoCode}`);
+  return data;
+};
+
+async function explorePage({ slug: code, center }) {
+  const hurumapProfile = await fetchProfile();
+
+  const { locations, preferredChildren, mapType, choropleth } = hurumapProfile;
+
+  const locationCodes = locations.map(({ code: locationCode }) => locationCode);
+  const geoCodes = code
+    .split("-vs-")
+    .map((c) => c.trim())
+    .filter((c) => c);
+  if (!geoCodes.every((gC) => locationCodes.includes(gC))) {
+    return {
+      notFound: true,
+    };
+  }
+
+  const [primaryCode, secondaryCode] = geoCodes;
+  const primaryProfile = await fetchProfileGeography(primaryCode);
+  const profile = [primaryProfile];
+  if (secondaryCode) {
+    const secondaryProfile = await fetchProfileGeography(secondaryCode);
+    profile.push(secondaryProfile);
+  }
+
+  // TODO: Move this to a PayloadCMS
+  const blocks = {
+    texts: [],
+    tutorial: {
+      items: [
+        {
+          title: "SELECT LOCATION",
+          description:
+            "Select the County or Municipality you want to explore, by clicking on the search field and the dropdown menu.<br><br>Once you have made your selection, explore the visualisations, change location or pin to compare it to a second location.",
+          selector: "#location-search",
+          image:
+            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png",
+          imageProps: {
+            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png",
+            width: 694,
+            height: 572,
+            type: "png",
+            blurDataURL:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGOoqW09f/7Shw8fzp07x8AuoC4qqdXf311YWMTAL6YVE5ve2tpcV18PAHqlETRE6fa/AAAAAElFTkSuQmCC",
+            placeholder: "blur",
+          },
+        },
+        {
+          description:
+            "Explore the map to confirm or change your selection. You can also pin your location if you want to compare two places. <br><br>Once a location is confirmed, click on the “Rich Data” button (on the left hand-side) to display the data visualisations.",
+          title: "EXPLORE THE MAP",
+          selector: "#none",
+          image:
+            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png",
+          imageProps: {
+            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png",
+            width: 751,
+            height: 589,
+            type: "png",
+            blurDataURL:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGP49u3rxEnTDxw4sn//fobCggJeYVU+YaWCvByGzMxMPmElWwfPgvw8AH1vD9GRbZHGAAAAAElFTkSuQmCC",
+            placeholder: "blur",
+          },
+        },
+        {
+          title: "BROWSE THE CHARTS",
+          description:
+            "Continue to open the Rich Data dashboard, using the button on the left.<br><br>Browse the charts by scrolling the data dashboard. You can share and download the data using the buttons on the side of each chart.",
+          selector: "#rich-data",
+          image:
+            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png",
+          imageProps: {
+            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png",
+            width: 670,
+            height: 439,
+            type: "png",
+            blurDataURL:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ANbW1s3NyVtbWrKyswDOztFdY38JCxe5ubcA3t7ffIKf4uPq////vgcX8ZIA2dgAAAAASUVORK5CYII=",
+            placeholder: "blur",
+          },
+        },
+        {
+          title: "PIN AND COMPARE",
+          description:
+            "There are two ways to pin and compare a second location: <br><br>1) From the data dashboard: look for the “pin” icon and select a second location from the dropdown menu. <br><br>2) From the map: pin your selected location by clicking on the ”pin” icon, then select a second location, which will appear in a different colour.",
+          selector: "#pin",
+          image:
+            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png",
+          imageProps: {
+            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png",
+            width: 675,
+            height: 491,
+            type: "png",
+            blurDataURL:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/APj491lWYA8QI+zs6wC/wMHXzMmLi5uztLYAu7u7w8XF39/eu7u7x7oYwYnBuWcAAAAASUVORK5CYII=",
+            placeholder: "blur",
+          },
+        },
+      ],
+      lazyblock: {
+        slug: "lazyblock/tutorial",
+      },
+      align: "",
+      anchor: "",
+      blockId: "Z1npKaH",
+      blockUniqueClass: "lazyblock-tutorial-Z1npKaH",
+      ghostkitSpacings: "",
+      ghostkitSR: "",
+    },
+    panel: {
+      panelItems: [
+        {
+          value: "rich-data",
+          icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
+          iconProps: {
+            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
+            width: 44,
+            height: 44,
+            type: "svg",
+            blurDataURL:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNgQAP/T///f/o/jHMWiQMHACIVCyeABSwfAAAAAElFTkSuQmCC",
+            placeholder: "blur",
+          },
+        },
+        {
+          value: "pin",
+          icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
+          pin: true,
+          iconProps: {
+            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
+            width: 44,
+            height: 44,
+            type: "svg",
+            blurDataURL:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgQAP/L/z/f/r//4P/wZzT//+fBbOQAQBvnQ3r6iVM4QAAAABJRU5ErkJggg==",
+            placeholder: "blur",
+          },
+        },
+      ],
+      scrollToTopLabel: "Back To Top",
+      dataNotAvailable: "— DATA NOT AVAILABLE",
+      lazyblock: {
+        slug: "lazyblock/panel",
+      },
+      align: "",
+      anchor: "",
+      blockId: "20amuc",
+      blockUniqueClass: "lazyblock-panel-20amuc",
+      ghostkitSpacings: "",
+      ghostkitSR: "",
+    },
+  };
+
+  const res = {
+    blockType: "explore-page",
+    blocks,
+    center,
+    choropleth,
+    locations,
+    mapType,
+    profile,
+    variant: "explore",
+    preferredChildren,
+  };
+
+  return res;
+}
+
+export default explorePage;
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/index.js b/apps/climatemappedafrica/src/lib/data/blockify/index.js
index 07d61107f..39df28c48 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/index.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/index.js
@@ -1,7 +1,9 @@
+import explorePage from "./explore-page";
 import pageHero from "./page-hero";
 import team from "./team";
 
 const propsifyBlockBySlug = {
+  "explore-page": explorePage,
   "page-hero": pageHero,
   team,
 };
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index ab0341049..7afcf048e 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -53,6 +53,22 @@ function getNavBar(siteSettings, variant) {
   };
 }
 
+async function processExplorePage(slugs, hurumap) {
+  const {
+    initialLocation: { name, center },
+  } = hurumap;
+  const slug = slugs.length ? slugs[0] : name;
+  const blocks = await blockify([
+    {
+      blockType: "explore-page",
+      center,
+      slug: slug.trim().toLowerCase(),
+    },
+  ]);
+
+  return blocks;
+}
+
 export async function getPageProps(api, context) {
   // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc.,
   // so params.slug[0] is good enough
@@ -74,13 +90,17 @@ export async function getPageProps(api, context) {
     page: { value: explorePage },
   } = hurumap;
 
-  const blocks = await blockify(page.blocks, api, context);
+  let blocks = await blockify(page.blocks, api, context);
   const variant = page.slug === explorePage.slug ? "explore" : "default";
 
   const siteSettings = await api.findGlobal("settings-site");
   const footer = getFooter(siteSettings, variant);
   const menus = getNavBar(siteSettings, variant);
 
+  if (slug === explorePage.slug) {
+    blocks = await processExplorePage(slugs.slice(1), hurumap);
+  }
+
   return {
     blocks,
     footer,
diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js
index d5b79793e..2be1812c3 100644
--- a/apps/climatemappedafrica/src/pages/[[...slug]].js
+++ b/apps/climatemappedafrica/src/pages/[[...slug]].js
@@ -3,6 +3,7 @@ import React from "react";
 import { SWRConfig } from "swr";
 
 import AboutTeam from "@/climatemappedafrica/components/AboutTeam";
+import ExplorePage from "@/climatemappedafrica/components/ExplorePage";
 import Footer from "@/climatemappedafrica/components/Footer";
 import Navigation from "@/climatemappedafrica/components/Navigation";
 import PageHero from "@/climatemappedafrica/components/PageHero";
@@ -10,6 +11,7 @@ import Summary from "@/climatemappedafrica/components/Summary";
 import { getPageServerSideProps } from "@/climatemappedafrica/lib/data";
 
 const componentsBySlugs = {
+  "explore-page": ExplorePage,
   "page-hero": PageHero,
   summary: Summary,
   team: AboutTeam,

From acb6cab656e83addbbd4e54469dc846a7d86a697 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 16:46:16 +0300
Subject: [PATCH 04/20] Show tutorial

---
 .../src/components/ExplorePage/index.js       |   9 +-
 .../src/lib/data/blockify/explore-page.js     | 160 +++++-------------
 .../src/lib/data/blockify/index.js            |   2 +
 .../src/lib/data/blockify/tutorial.js         |  88 ++++++++++
 .../src/lib/data/common/index.js              |   3 +
 .../src/pages/[[...slug]].js                  |  21 ++-
 6 files changed, 156 insertions(+), 127 deletions(-)
 create mode 100644 apps/climatemappedafrica/src/lib/data/blockify/tutorial.js

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 20c977918..792ace1b6 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -21,7 +21,11 @@ function initialState(profiles, onClick) {
   };
 }
 
-function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
+function ExplorePage({
+  panel: panelProps = {},
+  profile: profileProp,
+  ...props
+}) {
   const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
@@ -166,8 +170,7 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
 }
 
 ExplorePage.propTypes = {
-  apiUri: PropTypes.string,
-  panelProps: PropTypes.shape({}),
+  panel: PropTypes.shape({}),
   profile: PropTypes.oneOfType([
     PropTypes.shape({
       geography: PropTypes.shape({}),
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index a3a432129..36a7a17cc 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -36,140 +36,56 @@ async function explorePage({ slug: code, center }) {
   }
 
   // TODO: Move this to a PayloadCMS
-  const blocks = {
-    texts: [],
-    tutorial: {
-      items: [
-        {
-          title: "SELECT LOCATION",
-          description:
-            "Select the County or Municipality you want to explore, by clicking on the search field and the dropdown menu.<br><br>Once you have made your selection, explore the visualisations, change location or pin to compare it to a second location.",
-          selector: "#location-search",
-          image:
-            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png",
-          imageProps: {
-            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png",
-            width: 694,
-            height: 572,
-            type: "png",
-            blurDataURL:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGOoqW09f/7Shw8fzp07x8AuoC4qqdXf311YWMTAL6YVE5ve2tpcV18PAHqlETRE6fa/AAAAAElFTkSuQmCC",
-            placeholder: "blur",
-          },
+  const panel = {
+    panelItems: [
+      {
+        value: "rich-data",
+        icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
+        iconProps: {
+          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
+          width: 44,
+          height: 44,
+          type: "svg",
+          blurDataURL:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNgQAP/T///f/o/jHMWiQMHACIVCyeABSwfAAAAAElFTkSuQmCC",
+          placeholder: "blur",
         },
-        {
-          description:
-            "Explore the map to confirm or change your selection. You can also pin your location if you want to compare two places. <br><br>Once a location is confirmed, click on the “Rich Data” button (on the left hand-side) to display the data visualisations.",
-          title: "EXPLORE THE MAP",
-          selector: "#none",
-          image:
-            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png",
-          imageProps: {
-            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png",
-            width: 751,
-            height: 589,
-            type: "png",
-            blurDataURL:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGP49u3rxEnTDxw4sn//fobCggJeYVU+YaWCvByGzMxMPmElWwfPgvw8AH1vD9GRbZHGAAAAAElFTkSuQmCC",
-            placeholder: "blur",
-          },
-        },
-        {
-          title: "BROWSE THE CHARTS",
-          description:
-            "Continue to open the Rich Data dashboard, using the button on the left.<br><br>Browse the charts by scrolling the data dashboard. You can share and download the data using the buttons on the side of each chart.",
-          selector: "#rich-data",
-          image:
-            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png",
-          imageProps: {
-            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png",
-            width: 670,
-            height: 439,
-            type: "png",
-            blurDataURL:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ANbW1s3NyVtbWrKyswDOztFdY38JCxe5ubcA3t7ffIKf4uPq////vgcX8ZIA2dgAAAAASUVORK5CYII=",
-            placeholder: "blur",
-          },
-        },
-        {
-          title: "PIN AND COMPARE",
-          description:
-            "There are two ways to pin and compare a second location: <br><br>1) From the data dashboard: look for the “pin” icon and select a second location from the dropdown menu. <br><br>2) From the map: pin your selected location by clicking on the ”pin” icon, then select a second location, which will appear in a different colour.",
-          selector: "#pin",
-          image:
-            "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png",
-          imageProps: {
-            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png",
-            width: 675,
-            height: 491,
-            type: "png",
-            blurDataURL:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/APj491lWYA8QI+zs6wC/wMHXzMmLi5uztLYAu7u7w8XF39/eu7u7x7oYwYnBuWcAAAAASUVORK5CYII=",
-            placeholder: "blur",
-          },
-        },
-      ],
-      lazyblock: {
-        slug: "lazyblock/tutorial",
       },
-      align: "",
-      anchor: "",
-      blockId: "Z1npKaH",
-      blockUniqueClass: "lazyblock-tutorial-Z1npKaH",
-      ghostkitSpacings: "",
-      ghostkitSR: "",
-    },
-    panel: {
-      panelItems: [
-        {
-          value: "rich-data",
-          icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
-          iconProps: {
-            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2021/11/Group-4505.svg",
-            width: 44,
-            height: 44,
-            type: "svg",
-            blurDataURL:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR4nGNgQAP/T///f/o/jHMWiQMHACIVCyeABSwfAAAAAElFTkSuQmCC",
-            placeholder: "blur",
-          },
-        },
-        {
-          value: "pin",
-          icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
-          pin: true,
-          iconProps: {
-            src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
-            width: 44,
-            height: 44,
-            type: "svg",
-            blurDataURL:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgQAP/L/z/f/r//4P/wZzT//+fBbOQAQBvnQ3r6iVM4QAAAABJRU5ErkJggg==",
-            placeholder: "blur",
-          },
+      {
+        value: "pin",
+        icon: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
+        pin: true,
+        iconProps: {
+          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/01/Path-210-1-1.svg",
+          width: 44,
+          height: 44,
+          type: "svg",
+          blurDataURL:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgQAP/L/z/f/r//4P/wZzT//+fBbOQAQBvnQ3r6iVM4QAAAABJRU5ErkJggg==",
+          placeholder: "blur",
         },
-      ],
-      scrollToTopLabel: "Back To Top",
-      dataNotAvailable: "— DATA NOT AVAILABLE",
-      lazyblock: {
-        slug: "lazyblock/panel",
       },
-      align: "",
-      anchor: "",
-      blockId: "20amuc",
-      blockUniqueClass: "lazyblock-panel-20amuc",
-      ghostkitSpacings: "",
-      ghostkitSR: "",
+    ],
+    scrollToTopLabel: "Back To Top",
+    dataNotAvailable: "— DATA NOT AVAILABLE",
+    lazyblock: {
+      slug: "lazyblock/panel",
     },
+    align: "",
+    anchor: "",
+    blockId: "20amuc",
+    blockUniqueClass: "lazyblock-panel-20amuc",
+    ghostkitSpacings: "",
+    ghostkitSR: "",
   };
-
   const res = {
+    id: "explore-page",
     blockType: "explore-page",
-    blocks,
     center,
     choropleth,
     locations,
     mapType,
+    panel,
     profile,
     variant: "explore",
     preferredChildren,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/index.js b/apps/climatemappedafrica/src/lib/data/blockify/index.js
index 39df28c48..9e91332ea 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/index.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/index.js
@@ -1,11 +1,13 @@
 import explorePage from "./explore-page";
 import pageHero from "./page-hero";
 import team from "./team";
+import tutorial from "./tutorial";
 
 const propsifyBlockBySlug = {
   "explore-page": explorePage,
   "page-hero": pageHero,
   team,
+  tutorial,
 };
 
 export const blockify = async (blocks, api, context) => {
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/tutorial.js b/apps/climatemappedafrica/src/lib/data/blockify/tutorial.js
new file mode 100644
index 000000000..781934ccc
--- /dev/null
+++ b/apps/climatemappedafrica/src/lib/data/blockify/tutorial.js
@@ -0,0 +1,88 @@
+async function tutorial() {
+  // TODO: Move this to Payload CMS
+  return {
+    blockType: "tutorial",
+    id: "tutorial",
+    items: [
+      {
+        title: "SELECT LOCATION",
+        description:
+          "Select the County or Municipality you want to explore, by clicking on the search field and the dropdown menu.<br><br>Once you have made your selection, explore the visualisations, change location or pin to compare it to a second location.",
+        selector: "#location-search",
+        image:
+          "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png",
+        imageProps: {
+          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-1.png",
+          width: 694,
+          height: 572,
+          type: "png",
+          blurDataURL:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGOoqW09f/7Shw8fzp07x8AuoC4qqdXf311YWMTAL6YVE5ve2tpcV18PAHqlETRE6fa/AAAAAElFTkSuQmCC",
+          placeholder: "blur",
+        },
+      },
+      {
+        description:
+          "Explore the map to confirm or change your selection. You can also pin your location if you want to compare two places. <br><br>Once a location is confirmed, click on the “Rich Data” button (on the left hand-side) to display the data visualisations.",
+        title: "EXPLORE THE MAP",
+        selector: "#none",
+        image:
+          "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png",
+        imageProps: {
+          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-2.png",
+          width: 751,
+          height: 589,
+          type: "png",
+          blurDataURL:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVR4nGP49u3rxEnTDxw4sn//fobCggJeYVU+YaWCvByGzMxMPmElWwfPgvw8AH1vD9GRbZHGAAAAAElFTkSuQmCC",
+          placeholder: "blur",
+        },
+      },
+      {
+        title: "BROWSE THE CHARTS",
+        description:
+          "Continue to open the Rich Data dashboard, using the button on the left.<br><br>Browse the charts by scrolling the data dashboard. You can share and download the data using the buttons on the side of each chart.",
+        selector: "#rich-data",
+        image:
+          "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png",
+        imageProps: {
+          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-3a.png",
+          width: 670,
+          height: 439,
+          type: "png",
+          blurDataURL:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ANbW1s3NyVtbWrKyswDOztFdY38JCxe5ubcA3t7ffIKf4uPq////vgcX8ZIA2dgAAAAASUVORK5CYII=",
+          placeholder: "blur",
+        },
+      },
+      {
+        title: "PIN AND COMPARE",
+        description:
+          "There are two ways to pin and compare a second location: <br><br>1) From the data dashboard: look for the “pin” icon and select a second location from the dropdown menu. <br><br>2) From the map: pin your selected location by clicking on the ”pin” icon, then select a second location, which will appear in a different colour.",
+        selector: "#pin",
+        image:
+          "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png",
+        imageProps: {
+          src: "https://cms.dev.codeforafrica.org/pesayetu/wp-content/uploads/sites/2/2022/04/PesaYetu-Tutorial-4.png",
+          width: 675,
+          height: 491,
+          type: "png",
+          blurDataURL:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/APj491lWYA8QI+zs6wC/wMHXzMmLi5uztLYAu7u7w8XF39/eu7u7x7oYwYnBuWcAAAAASUVORK5CYII=",
+          placeholder: "blur",
+        },
+      },
+    ],
+    lazyblock: {
+      slug: "lazyblock/tutorial",
+    },
+    align: "",
+    anchor: "",
+    blockId: "Z1npKaH",
+    blockUniqueClass: "lazyblock-tutorial-Z1npKaH",
+    ghostkitSpacings: "",
+    ghostkitSR: "",
+  };
+}
+
+export default tutorial;
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 7afcf048e..5c76cd59d 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -64,6 +64,9 @@ async function processExplorePage(slugs, hurumap) {
       center,
       slug: slug.trim().toLowerCase(),
     },
+    {
+      blockType: "tutorial",
+    },
   ]);
 
   return blocks;
diff --git a/apps/climatemappedafrica/src/pages/[[...slug]].js b/apps/climatemappedafrica/src/pages/[[...slug]].js
index 2be1812c3..471d852dc 100644
--- a/apps/climatemappedafrica/src/pages/[[...slug]].js
+++ b/apps/climatemappedafrica/src/pages/[[...slug]].js
@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
 import React from "react";
 import { SWRConfig } from "swr";
@@ -5,6 +6,7 @@ import { SWRConfig } from "swr";
 import AboutTeam from "@/climatemappedafrica/components/AboutTeam";
 import ExplorePage from "@/climatemappedafrica/components/ExplorePage";
 import Footer from "@/climatemappedafrica/components/Footer";
+import Tutorial from "@/climatemappedafrica/components/HURUmap/Tutorial";
 import Navigation from "@/climatemappedafrica/components/Navigation";
 import PageHero from "@/climatemappedafrica/components/PageHero";
 import Summary from "@/climatemappedafrica/components/Summary";
@@ -18,6 +20,10 @@ const componentsBySlugs = {
 };
 
 function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
+  const {
+    query: { showTutorial },
+  } = useRouter();
+
   const pageSeo = {};
   pageSeo.title = seo?.title || null;
   pageSeo.description = seo?.metaDesc || null;
@@ -37,6 +43,13 @@ function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
     }
   }
 
+  const tutorialBlock = blocks.find((block) => block.blockType === "tutorial");
+
+  let TutorialComponent = React.Fragment;
+  if (tutorialBlock) {
+    TutorialComponent = Tutorial;
+  }
+
   let PageConfig = React.Fragment;
   let pageConfigProps;
   if (fallback) {
@@ -44,7 +57,11 @@ function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
     pageConfigProps = { value: { fallback } };
   }
   return (
-    <>
+    <TutorialComponent
+      key={showTutorial}
+      {...tutorialBlock}
+      defaultOpen={Number.parseInt(showTutorial, 10) === 1}
+    >
       <Navigation {...menus} />
       <NextSeo
         {...pageSeo}
@@ -62,7 +79,7 @@ function Index({ blocks, menus, footer: footerProps, seo = {}, fallback }) {
         })}
       </PageConfig>
       <Footer {...footerProps} />
-    </>
+    </TutorialComponent>
   );
 }
 

From 47045174a4bda1caa67b8fce8741c8835f1e217c Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:05:02 +0300
Subject: [PATCH 05/20] Dynamic explore page

---
 .../src/components/ExplorePage/index.js       |  6 +++--
 .../src/components/ExplorePage/useExplore.js  | 22 +++++++++++--------
 .../src/lib/data/blockify/explore-page.js     |  3 ++-
 .../src/lib/data/common/index.js              |  5 +++--
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 792ace1b6..25fed694e 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -22,6 +22,7 @@ function initialState(profiles, onClick) {
 }
 
 function ExplorePage({
+  explorePageUrl,
   panel: panelProps = {},
   profile: profileProp,
   ...props
@@ -37,6 +38,7 @@ function ExplorePage({
   };
   const [state, dispatch] = useExplore(
     initialState(profileProp, handleClickTag),
+    explorePageUrl,
   );
   useEffect(() => {
     dispatch({
@@ -69,7 +71,7 @@ function ExplorePage({
       state.isPinning || state.isCompare
         ? `${state.primary.geography.code}-vs-${code}`
         : `${code}`;
-    const href = `/explore/${newPath.toLowerCase()}`;
+    const href = `/${explorePageUrl}/${newPath.toLowerCase()}`;
     router.push(href, href, { shallow: true });
     const type = state.isPinning && state.isCompare ? "compare" : "fetch";
     dispatch({ type, payload });
@@ -92,7 +94,7 @@ function ExplorePage({
   };
   useEffect(() => {
     if (state.slug) {
-      const href = `/explore/${state.slug}`;
+      const href = `/${explorePageUrl}/${state.slug}`;
       router.push(href, href, { shallow: true });
     }
     // router shouldn't part of useEffect dependencies: https://nextjs.org/docs/api-reference/next/router#userouter
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
index f82569823..d81eaf640 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -2,7 +2,7 @@ import { useReducer } from "react";
 
 import Link from "@/climatemappedafrica/components/Link";
 
-function extendProfileTags(profile, options) {
+function extendProfileTags(profile, options, explorePageUrl) {
   const { tags: originalTags, ...other } = profile || {};
   if (!originalTags) {
     return profile;
@@ -12,7 +12,7 @@ function extendProfileTags(profile, options) {
     ...otherTags,
     code,
     component: Link,
-    href: `/explore/${code.toLowerCase()}`,
+    href: `/${explorePageUrl}/${code.toLowerCase()}`,
     shallow: true,
     underline: "none",
     ...options,
@@ -32,7 +32,7 @@ function initializer({ profiles, options }) {
   };
 }
 
-function reducer(state, action) {
+function reducer(state, action, explorePageUrl) {
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -67,10 +67,14 @@ function reducer(state, action) {
         );
         if (profileType) {
           const newState = { ...state };
-          newState[profileType] = extendProfileTags(profile, {
-            ...others,
-            color: profileType,
-          });
+          newState[profileType] = extendProfileTags(
+            profile,
+            {
+              ...others,
+              color: profileType,
+            },
+            explorePageUrl,
+          );
           return newState;
         }
       }
@@ -118,8 +122,8 @@ function reducer(state, action) {
   }
 }
 
-function useExplore(initializerArg) {
-  return useReducer(reducer, initializerArg, initializer);
+function useExplore(initializerArg, explorePageUrl) {
+  return useReducer(reducer, initializerArg, initializer, explorePageUrl);
 }
 
 export default useExplore;
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 36a7a17cc..8c8d7f2d6 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -11,7 +11,7 @@ const fetchProfileGeography = async (geoCode) => {
   return data;
 };
 
-async function explorePage({ slug: code, center }) {
+async function explorePage({ slug: code, center, explorePageUrl }) {
   const hurumapProfile = await fetchProfile();
 
   const { locations, preferredChildren, mapType, choropleth } = hurumapProfile;
@@ -83,6 +83,7 @@ async function explorePage({ slug: code, center }) {
     blockType: "explore-page",
     center,
     choropleth,
+    explorePageUrl,
     locations,
     mapType,
     panel,
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 5c76cd59d..f13e628a2 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -53,7 +53,7 @@ function getNavBar(siteSettings, variant) {
   };
 }
 
-async function processExplorePage(slugs, hurumap) {
+async function processExplorePage(slugs, hurumap, explorePage) {
   const {
     initialLocation: { name, center },
   } = hurumap;
@@ -63,6 +63,7 @@ async function processExplorePage(slugs, hurumap) {
       blockType: "explore-page",
       center,
       slug: slug.trim().toLowerCase(),
+      explorePageUrl: explorePage.slug,
     },
     {
       blockType: "tutorial",
@@ -101,7 +102,7 @@ export async function getPageProps(api, context) {
   const menus = getNavBar(siteSettings, variant);
 
   if (slug === explorePage.slug) {
-    blocks = await processExplorePage(slugs.slice(1), hurumap);
+    blocks = await processExplorePage(slugs.slice(1), hurumap, explorePage);
   }
 
   return {

From 1ef7ca95a5c81b19ff91d43a74308876bd9bc1c0 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:11:14 +0300
Subject: [PATCH 06/20] Dynamic explore page nav url

---
 .../components/Navigation/ExploreNavigation/index.js   |  3 ++-
 .../components/Navigation/MobileNavigation/index.js    | 10 +++++++++-
 apps/climatemappedafrica/src/lib/data/common/index.js  |  5 +++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
index f74bde844..dd170e6fc 100644
--- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ logo, variant }) {
+function ExploreNavigation({ explorePageUrl, logo, variant }) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -71,6 +71,7 @@ function ExploreNavigation({ logo, variant }) {
           >
             <DropdownSearch
               icon={SearchIcon}
+              href={explorePageUrl}
               placeholder="Search for a Location" // TODO: Read from cms
               variant={variant}
               classes={{
diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
index 1628a8dc3..efcca61a2 100644
--- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
@@ -151,7 +151,14 @@ const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="left" timeout={1000} ref={ref} {...props} />;
 });
 
-function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) {
+function MobileNavigation({
+  drawerLogo,
+  explorePageUrl,
+  logo,
+  menus,
+  socialLinks,
+  ...props
+}) {
   const classes = useStyles(props);
   const [open, setOpen] = useState(false);
   const router = useRouter();
@@ -277,6 +284,7 @@ function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) {
                   }}
                 >
                   <DropdownSearch
+                    href={explorePageUrl}
                     classes={{
                       root: classes.search,
                       inputRoot: classes.searchInput,
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index f13e628a2..d3aac19df 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -34,7 +34,7 @@ function getFooter(siteSettings, variant) {
   };
 }
 
-function getNavBar(siteSettings, variant) {
+function getNavBar(siteSettings, variant, { slug }) {
   const {
     connect: { links = [] },
     primaryNavigation: { menus = [], connect = [] },
@@ -47,6 +47,7 @@ function getNavBar(siteSettings, variant) {
   return {
     logo: imageFromMedia(title, primaryLogo.url),
     drawerLogo: imageFromMedia(title, drawerLogo.url),
+    explorePageUrl: slug,
     menus,
     socialLinks,
     variant,
@@ -99,7 +100,7 @@ export async function getPageProps(api, context) {
 
   const siteSettings = await api.findGlobal("settings-site");
   const footer = getFooter(siteSettings, variant);
-  const menus = getNavBar(siteSettings, variant);
+  const menus = getNavBar(siteSettings, variant, explorePage);
 
   if (slug === explorePage.slug) {
     blocks = await processExplorePage(slugs.slice(1), hurumap, explorePage);

From 2849bedfca283e8b4ee2907ce4aca53bea200b1b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 23 Oct 2024 09:51:15 +0300
Subject: [PATCH 07/20] Handle possibly undefined slugs

---
 apps/climatemappedafrica/src/lib/data/common/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index d3aac19df..fa37fc1a7 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -103,7 +103,11 @@ export async function getPageProps(api, context) {
   const menus = getNavBar(siteSettings, variant, explorePage);
 
   if (slug === explorePage.slug) {
-    blocks = await processExplorePage(slugs.slice(1), hurumap, explorePage);
+    blocks = await processExplorePage(
+      slugs?.slice(1) || [],
+      hurumap,
+      explorePage,
+    );
   }
 
   return {

From 0acf0b332effc973e7cbf3600de17797b65f25de Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:33:01 +0300
Subject: [PATCH 08/20] Fix page slug

---
 .../climatemappedafrica/src/lib/data/common/index.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index fa37fc1a7..e6b4ce82e 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -76,9 +76,9 @@ async function processExplorePage(slugs, hurumap, explorePage) {
 
 export async function getPageProps(api, context) {
   // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc.,
-  // so params.slug[0] is good enough
-  const slugs = context.params?.slug || undefined;
-  const [slug] = slugs || ["index"];
+  // so params.slugs[0] is good enough
+  const slugs = context.params?.slugs || ["index"];
+  const [slug] = slugs;
   const { draftMode = false } = context;
   const options = { draft: draftMode };
 
@@ -103,11 +103,7 @@ export async function getPageProps(api, context) {
   const menus = getNavBar(siteSettings, variant, explorePage);
 
   if (slug === explorePage.slug) {
-    blocks = await processExplorePage(
-      slugs?.slice(1) || [],
-      hurumap,
-      explorePage,
-    );
+    blocks = await processExplorePage(slugs.slice(1), hurumap, explorePage);
   }
 
   return {

From 7ad53adb100a68245f876c9e7586d45fbcb1b337 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:03:00 +0300
Subject: [PATCH 09/20] Fix explore url

---
 .../src/components/ExplorePage/index.js       | 10 ++++----
 .../src/components/ExplorePage/useExplore.js  | 24 ++++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 4cc6fefd8..07472dbfe 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -11,13 +11,14 @@ import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-function initialState(profiles, onClick) {
+function initialState(profiles, onClick, explorePageUrl) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
     options: [
       { color: "primary", onClick },
       { color: "secondary", onClick },
     ],
+    explorePageUrl,
   };
 }
 
@@ -37,15 +38,14 @@ function ExplorePage({
     setGeoCode(code);
   };
   const [state, dispatch] = useExplore(
-    initialState(profileProp, handleClickTag),
-    explorePageUrl,
+    initialState(profileProp, handleClickTag, explorePageUrl),
   );
   useEffect(() => {
     dispatch({
       type: "reset",
-      payload: initialState(profileProp, handleClickTag),
+      payload: initialState(profileProp, handleClickTag, explorePageUrl),
     });
-  }, [dispatch, profileProp]);
+  }, [dispatch, profileProp, explorePageUrl]);
   useEffect(() => {
     if (geoCode) {
       dispatch({ type: "fetch", payload: { code: geoCode } });
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
index d81eaf640..ed7a023af 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -20,19 +20,21 @@ function extendProfileTags(profile, options, explorePageUrl) {
   return { ...other, tags };
 }
 
-function initializer({ profiles, options }) {
+function initializer({ explorePageUrl, profiles, options }) {
   const [primary, secondary] = profiles;
   const [primaryOptions, secondaryOptions] = options;
 
   return {
     isPinning: false,
     isCompare: !!(primary && secondary),
-    primary: extendProfileTags(primary, primaryOptions),
-    secondary: extendProfileTags(secondary, secondaryOptions),
+    primary: extendProfileTags(primary, primaryOptions, explorePageUrl),
+    secondary: extendProfileTags(secondary, secondaryOptions, explorePageUrl),
+    explorePageUrl,
   };
 }
 
-function reducer(state, action, explorePageUrl) {
+function reducer(state, action) {
+  const { explorePageUrl } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -105,9 +107,13 @@ function reducer(state, action, explorePageUrl) {
         newState.secondary = undefined;
       } else if (state.primary?.geography?.code === code && state.secondary) {
         // NOTE: need to reset color from secondary back to primary as well
-        newState.primary = extendProfileTags(state.secondary, {
-          color: "primary",
-        });
+        newState.primary = extendProfileTags(
+          state.secondary,
+          {
+            color: "primary",
+          },
+          explorePageUrl,
+        );
         newState.secondary = undefined;
       }
       newState.secondary = undefined;
@@ -122,8 +128,8 @@ function reducer(state, action, explorePageUrl) {
   }
 }
 
-function useExplore(initializerArg, explorePageUrl) {
-  return useReducer(reducer, initializerArg, initializer, explorePageUrl);
+function useExplore(initializerArg) {
+  return useReducer(reducer, initializerArg, initializer);
 }
 
 export default useExplore;

From 690eeded71d14657321d2102a87ccce169e617a8 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:21:00 +0300
Subject: [PATCH 10/20] Use center and initialLocation from cms

---
 .../src/components/ExplorePage/index.js              | 12 +++++++++---
 .../src/components/ExplorePage/useExplore.js         |  7 ++++---
 .../src/lib/data/blockify/explore-page.js            |  8 +++++++-
 .../climatemappedafrica/src/lib/data/common/index.js |  1 +
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 07472dbfe..9cdbc78ec 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -11,7 +11,7 @@ import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-function initialState(profiles, onClick, explorePageUrl) {
+function initialState(profiles, onClick, explorePageUrl, initialLocation) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
     options: [
@@ -19,10 +19,13 @@ function initialState(profiles, onClick, explorePageUrl) {
       { color: "secondary", onClick },
     ],
     explorePageUrl,
+    initialLocation,
   };
 }
 
 function ExplorePage({
+  center,
+  initialLocation,
   explorePageUrl,
   panel: panelProps = {},
   profile: profileProp,
@@ -38,7 +41,7 @@ function ExplorePage({
     setGeoCode(code);
   };
   const [state, dispatch] = useExplore(
-    initialState(profileProp, handleClickTag, explorePageUrl),
+    initialState(profileProp, handleClickTag, explorePageUrl, initialLocation),
   );
   useEffect(() => {
     dispatch({
@@ -125,7 +128,7 @@ function ExplorePage({
       >
         <div className={classes.root}>
           <Map
-            center={[0.3051933453207569, 37.908818734483155]}
+            center={center}
             geography={geography}
             secondaryGeography={state.secondary?.geography}
             geometries={geometries}
@@ -172,6 +175,9 @@ function ExplorePage({
 }
 
 ExplorePage.propTypes = {
+  center: PropTypes.arrayOf(PropTypes.number),
+  initialLocation: PropTypes.string,
+  explorePageUrl: PropTypes.string,
   panel: PropTypes.shape({}),
   profile: PropTypes.oneOfType([
     PropTypes.shape({
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
index ed7a023af..89e311f80 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -20,7 +20,7 @@ function extendProfileTags(profile, options, explorePageUrl) {
   return { ...other, tags };
 }
 
-function initializer({ explorePageUrl, profiles, options }) {
+function initializer({ explorePageUrl, initialLocation, profiles, options }) {
   const [primary, secondary] = profiles;
   const [primaryOptions, secondaryOptions] = options;
 
@@ -30,11 +30,12 @@ function initializer({ explorePageUrl, profiles, options }) {
     primary: extendProfileTags(primary, primaryOptions, explorePageUrl),
     secondary: extendProfileTags(secondary, secondaryOptions, explorePageUrl),
     explorePageUrl,
+    initialLocation,
   };
 }
 
 function reducer(state, action) {
-  const { explorePageUrl } = state;
+  const { explorePageUrl, initialLocation } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -84,7 +85,7 @@ function reducer(state, action) {
       return state;
     }
     case "pin":
-      if (state.primary.geography.code.toLowerCase() !== "af") {
+      if (state.primary.geography.code.toLowerCase() !== initialLocation) {
         return { ...state, isPinning: true };
       }
       return { ...state, isPinning: false };
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 8c8d7f2d6..cae85d99f 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -11,7 +11,12 @@ const fetchProfileGeography = async (geoCode) => {
   return data;
 };
 
-async function explorePage({ slug: code, center, explorePageUrl }) {
+async function explorePage({
+  slug: code,
+  center,
+  initialLocation,
+  explorePageUrl,
+}) {
   const hurumapProfile = await fetchProfile();
 
   const { locations, preferredChildren, mapType, choropleth } = hurumapProfile;
@@ -83,6 +88,7 @@ async function explorePage({ slug: code, center, explorePageUrl }) {
     blockType: "explore-page",
     center,
     choropleth,
+    initialLocation,
     explorePageUrl,
     locations,
     mapType,
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index e6b4ce82e..13ab9fe64 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -63,6 +63,7 @@ async function processExplorePage(slugs, hurumap, explorePage) {
     {
       blockType: "explore-page",
       center,
+      initialLocation: name,
       slug: slug.trim().toLowerCase(),
       explorePageUrl: explorePage.slug,
     },

From 1f2051361e688b365e6edee0a9e37c5d811014f4 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Wed, 23 Oct 2024 17:02:57 +0300
Subject: [PATCH 11/20]  rename panelProps to PanelProps

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 apps/climatemappedafrica/src/components/ExplorePage/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 9cdbc78ec..f7a2250ed 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -27,7 +27,7 @@ function ExplorePage({
   center,
   initialLocation,
   explorePageUrl,
-  panel: panelProps = {},
+  panel: PanelProps = {},
   profile: profileProp,
   ...props
 }) {
@@ -168,7 +168,7 @@ function ExplorePage({
         onSelectLocation={handleSelectLocation}
         primaryProfile={state.primary}
         secondaryProfile={state.secondary}
-        {...panelProps}
+        {...PanelProps}
       />
     </>
   );

From 234211ab6f310b84c94e9bcac7d00dd3c8c4f67f Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 10:27:49 +0300
Subject: [PATCH 12/20] Add localization on HURUMap globals

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/payload/globals/HURUMap/index.js           | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 3e3e9cc55..2664400da 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -26,12 +26,19 @@ const HURUMap = {
     },
     {
       name: "initialLocation",
-      label: "Initial Location",
+      label: {
+        en: "Initial Location",
+      },
       type: "group",
+      localized: true,
       fields: [
         {
           name: "name",
           type: "text",
+          label: {
+            en: "Name",
+          },
+          localized: true,
           required: true,
           hasMany: false,
           defaultValue: "af",
@@ -44,7 +51,10 @@ const HURUMap = {
         },
         {
           name: "center",
-          label: "Center Point",
+          localized: true,
+          label: {
+            en: "Center",
+          },
           type: "point",
           defaultValue: [0.3051933453207569, 37.908818734483155],
         },

From 0b3f5ba2978599225147467b2a7277fef35b2a34 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:02:21 +0300
Subject: [PATCH 13/20] Use a shared map with hero

---
 .../src/components/Hero/Hero.js               |  3 ++-
 .../src/lib/data/blockify/hero.js             | 10 ++++---
 .../src/lib/data/blockify/index.js            |  4 +--
 .../src/lib/data/common/index.js              |  2 +-
 .../src/payload/blocks/Hero.js                | 27 -------------------
 .../src/payload/globals/HURUMap/index.js      |  7 ++---
 6 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
index 7f375673c..8c687dbc8 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -13,6 +13,7 @@ import Section from "@/climatemappedafrica/components/Section";
 const Map = dynamic(() => import("./Map"), { ssr: false });
 
 function Hero({
+  center,
   comment,
   title,
   subtitle,
@@ -20,7 +21,6 @@ function Hero({
   featuredLocations,
   searchPlaceholder,
   properties,
-  location: { center },
   level,
   ...props
 }) {
@@ -151,6 +151,7 @@ function Hero({
 }
 
 Hero.propTypes = {
+  center: PropTypes.arrayOf(PropTypes.number),
   comment: PropTypes.string,
   subtitle: PropTypes.arrayOf(PropTypes.shape({})),
   searchLabel: PropTypes.string,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 69eaccaf0..4983af2b2 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -3,10 +3,11 @@ import {
   fetchProfileGeography,
 } from "@/climatemappedafrica/lib/hurumap";
 
-export default async function hero(block) {
-  const { geometries } = await fetchProfileGeography(
-    block.location?.name?.toLowerCase(),
-  );
+export default async function hero(block, _, __, hurumap) {
+  const {
+    initialLocation: { center, name },
+  } = hurumap;
+  const { geometries } = await fetchProfileGeography(name.toLowerCase());
   const { level } = geometries.boundary?.properties ?? {};
   const childLevelMaps = {
     continent: "country",
@@ -24,6 +25,7 @@ export default async function hero(block) {
   const boundary = children[preferredLevel];
   return {
     ...block,
+    center,
     slug: "hero",
     boundary,
     featuredLocations,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/index.js b/apps/climatemappedafrica/src/lib/data/blockify/index.js
index 0cac4328b..f81829636 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/index.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/index.js
@@ -12,13 +12,13 @@ const propsifyBlockBySlug = {
   tutorial,
 };
 
-export const blockify = async (blocks, api, context) => {
+export const blockify = async (blocks, api, context, hurumap) => {
   const promises = blocks?.map(async (block) => {
     const slug = block.blockType;
     const propsifyBlock = propsifyBlockBySlug[slug];
 
     if (propsifyBlock) {
-      return propsifyBlock(block, api, context);
+      return propsifyBlock(block, api, context, hurumap);
     }
     return {
       ...block,
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 13ab9fe64..1edd7c6d4 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -96,7 +96,7 @@ export async function getPageProps(api, context) {
     page: { value: explorePage },
   } = hurumap;
 
-  let blocks = await blockify(page.blocks, api, context);
+  let blocks = await blockify(page.blocks, api, context, hurumap);
   const variant = page.slug === explorePage.slug ? "explore" : "default";
 
   const siteSettings = await api.findGlobal("settings-site");
diff --git a/apps/climatemappedafrica/src/payload/blocks/Hero.js b/apps/climatemappedafrica/src/payload/blocks/Hero.js
index ba1b08a90..62e3286ac 100644
--- a/apps/climatemappedafrica/src/payload/blocks/Hero.js
+++ b/apps/climatemappedafrica/src/payload/blocks/Hero.js
@@ -1,4 +1,3 @@
-import LocationSelect, { validateLocation } from "../fields/LocationSelect";
 import richText from "../fields/richText";
 
 const Hero = {
@@ -34,32 +33,6 @@ const Hero = {
       label: "Search Placeholder",
       localized: true,
     },
-    {
-      name: "location",
-      label: "Featured Location",
-      type: "group",
-      fields: [
-        {
-          name: "name",
-          type: "text",
-          required: true,
-          hasMany: false,
-          defaultValue: "af",
-          validate: validateLocation,
-          localized: true,
-          admin: {
-            components: {
-              Field: LocationSelect,
-            },
-          },
-        },
-        {
-          name: "center",
-          label: "Center Point",
-          type: "point",
-        },
-      ],
-    },
     {
       name: "comment",
       type: "text",
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 2664400da..5e4059533 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -51,12 +51,9 @@ const HURUMap = {
         },
         {
           name: "center",
-          localized: true,
-          label: {
-            en: "Center",
-          },
+          label: "Center Point",
           type: "point",
-          defaultValue: [0.3051933453207569, 37.908818734483155],
+          defaultValue: [20.0, 4.25],
         },
       ],
     },

From b01c8bf583c03fe5f639c83a79155853922ece87 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:06:59 +0300
Subject: [PATCH 14/20] Refactor explorePageUrl to explorePagePath for
 consistency

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/ExplorePage/index.js        | 18 +++++++++---------
 .../src/components/ExplorePage/useExplore.js   | 18 +++++++++---------
 .../Navigation/ExploreNavigation/index.js      |  4 ++--
 .../Navigation/MobileNavigation/index.js       |  4 ++--
 .../src/lib/data/blockify/explore-page.js      |  4 ++--
 .../src/lib/data/common/index.js               |  4 ++--
 6 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index f7a2250ed..d4c131754 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -11,14 +11,14 @@ import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-function initialState(profiles, onClick, explorePageUrl, initialLocation) {
+function initialState(profiles, onClick, explorePagePath, initialLocation) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
     options: [
       { color: "primary", onClick },
       { color: "secondary", onClick },
     ],
-    explorePageUrl,
+    explorePagePath,
     initialLocation,
   };
 }
@@ -26,7 +26,7 @@ function initialState(profiles, onClick, explorePageUrl, initialLocation) {
 function ExplorePage({
   center,
   initialLocation,
-  explorePageUrl,
+  explorePagePath,
   panel: PanelProps = {},
   profile: profileProp,
   ...props
@@ -41,14 +41,14 @@ function ExplorePage({
     setGeoCode(code);
   };
   const [state, dispatch] = useExplore(
-    initialState(profileProp, handleClickTag, explorePageUrl, initialLocation),
+    initialState(profileProp, handleClickTag, explorePagePath, initialLocation),
   );
   useEffect(() => {
     dispatch({
       type: "reset",
-      payload: initialState(profileProp, handleClickTag, explorePageUrl),
+      payload: initialState(profileProp, handleClickTag, explorePagePath),
     });
-  }, [dispatch, profileProp, explorePageUrl]);
+  }, [dispatch, profileProp, explorePagePath]);
   useEffect(() => {
     if (geoCode) {
       dispatch({ type: "fetch", payload: { code: geoCode } });
@@ -74,7 +74,7 @@ function ExplorePage({
       state.isPinning || state.isCompare
         ? `${state.primary.geography.code}-vs-${code}`
         : `${code}`;
-    const href = `/${explorePageUrl}/${newPath.toLowerCase()}`;
+    const href = `/${explorePagePath}/${newPath.toLowerCase()}`;
     router.push(href, href, { shallow: true });
     const type = state.isPinning && state.isCompare ? "compare" : "fetch";
     dispatch({ type, payload });
@@ -97,7 +97,7 @@ function ExplorePage({
   };
   useEffect(() => {
     if (state.slug) {
-      const href = `/${explorePageUrl}/${state.slug}`;
+      const href = `/${explorePagePath}/${state.slug}`;
       router.push(href, href, { shallow: true });
     }
     // router shouldn't part of useEffect dependencies: https://nextjs.org/docs/api-reference/next/router#userouter
@@ -177,7 +177,7 @@ function ExplorePage({
 ExplorePage.propTypes = {
   center: PropTypes.arrayOf(PropTypes.number),
   initialLocation: PropTypes.string,
-  explorePageUrl: PropTypes.string,
+  explorePagePath: PropTypes.string,
   panel: PropTypes.shape({}),
   profile: PropTypes.oneOfType([
     PropTypes.shape({
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
index 89e311f80..308740a17 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -2,7 +2,7 @@ import { useReducer } from "react";
 
 import Link from "@/climatemappedafrica/components/Link";
 
-function extendProfileTags(profile, options, explorePageUrl) {
+function extendProfileTags(profile, options, explorePagePath) {
   const { tags: originalTags, ...other } = profile || {};
   if (!originalTags) {
     return profile;
@@ -12,7 +12,7 @@ function extendProfileTags(profile, options, explorePageUrl) {
     ...otherTags,
     code,
     component: Link,
-    href: `/${explorePageUrl}/${code.toLowerCase()}`,
+    href: `/${explorePagePath}/${code.toLowerCase()}`,
     shallow: true,
     underline: "none",
     ...options,
@@ -20,22 +20,22 @@ function extendProfileTags(profile, options, explorePageUrl) {
   return { ...other, tags };
 }
 
-function initializer({ explorePageUrl, initialLocation, profiles, options }) {
+function initializer({ explorePagePath, initialLocation, profiles, options }) {
   const [primary, secondary] = profiles;
   const [primaryOptions, secondaryOptions] = options;
 
   return {
     isPinning: false,
     isCompare: !!(primary && secondary),
-    primary: extendProfileTags(primary, primaryOptions, explorePageUrl),
-    secondary: extendProfileTags(secondary, secondaryOptions, explorePageUrl),
-    explorePageUrl,
+    primary: extendProfileTags(primary, primaryOptions, explorePagePath),
+    secondary: extendProfileTags(secondary, secondaryOptions, explorePagePath),
+    explorePagePath,
     initialLocation,
   };
 }
 
 function reducer(state, action) {
-  const { explorePageUrl, initialLocation } = state;
+  const { explorePagePath, initialLocation } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -76,7 +76,7 @@ function reducer(state, action) {
               ...others,
               color: profileType,
             },
-            explorePageUrl,
+            explorePagePath,
           );
           return newState;
         }
@@ -113,7 +113,7 @@ function reducer(state, action) {
           {
             color: "primary",
           },
-          explorePageUrl,
+          explorePagePath,
         );
         newState.secondary = undefined;
       }
diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
index dd170e6fc..98ed5f461 100644
--- a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ explorePageUrl, logo, variant }) {
+function ExploreNavigation({ explorePagePath, logo, variant }) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -71,7 +71,7 @@ function ExploreNavigation({ explorePageUrl, logo, variant }) {
           >
             <DropdownSearch
               icon={SearchIcon}
-              href={explorePageUrl}
+              href={explorePagePath}
               placeholder="Search for a Location" // TODO: Read from cms
               variant={variant}
               classes={{
diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
index efcca61a2..3d3640a11 100644
--- a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
+++ b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
@@ -153,7 +153,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
 
 function MobileNavigation({
   drawerLogo,
-  explorePageUrl,
+  explorePagePath,
   logo,
   menus,
   socialLinks,
@@ -284,7 +284,7 @@ function MobileNavigation({
                   }}
                 >
                   <DropdownSearch
-                    href={explorePageUrl}
+                    href={explorePagePath}
                     classes={{
                       root: classes.search,
                       inputRoot: classes.searchInput,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index cae85d99f..28c213b4b 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -15,7 +15,7 @@ async function explorePage({
   slug: code,
   center,
   initialLocation,
-  explorePageUrl,
+  explorePagePath,
 }) {
   const hurumapProfile = await fetchProfile();
 
@@ -89,7 +89,7 @@ async function explorePage({
     center,
     choropleth,
     initialLocation,
-    explorePageUrl,
+    explorePagePath,
     locations,
     mapType,
     panel,
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index 1edd7c6d4..de19e45a3 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -47,7 +47,7 @@ function getNavBar(siteSettings, variant, { slug }) {
   return {
     logo: imageFromMedia(title, primaryLogo.url),
     drawerLogo: imageFromMedia(title, drawerLogo.url),
-    explorePageUrl: slug,
+    explorePagePath: slug,
     menus,
     socialLinks,
     variant,
@@ -65,7 +65,7 @@ async function processExplorePage(slugs, hurumap, explorePage) {
       center,
       initialLocation: name,
       slug: slug.trim().toLowerCase(),
-      explorePageUrl: explorePage.slug,
+      explorePagePath: explorePage.slug,
     },
     {
       blockType: "tutorial",

From 5dbdfb9d0edaa6503cd9c21090e1fd65d58262ad Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:19:50 +0300
Subject: [PATCH 15/20] Fix failing tests

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 apps/climatemappedafrica/src/components/Hero/Hero.snap.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index 4fc9fb1e1..cb86d4c6f 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -64,6 +64,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               blocktype="hero"
               boundary="[object Object]"
               class="MuiInputBase-root makeStyles-inputRoot-8 MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1illudf-MuiInputBase-root"
+              location="[object Object]"
               slug="hero"
             >
               <input

From 67c8b221eabf3c5d4981f7bd4e6739ad93ec1365 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:07:05 +0300
Subject: [PATCH 16/20] Improve explore page

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/components/ExplorePage/index.js       | 18 +++++++---
 .../src/components/ExplorePage/useExplore.js  | 13 +++++---
 .../src/lib/data/blockify/explore-page.js     | 17 +++++-----
 .../src/lib/data/common/index.js              | 33 +++++++------------
 .../src/payload/globals/HURUMap/index.js      |  9 +++++
 5 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index d4c131754..9d6ae08b9 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -11,7 +11,7 @@ import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-function initialState(profiles, onClick, explorePagePath, initialLocation) {
+function initialState(profiles, onClick, explorePagePath, initialLocationCode) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
     options: [
@@ -19,18 +19,18 @@ function initialState(profiles, onClick, explorePagePath, initialLocation) {
       { color: "secondary", onClick },
     ],
     explorePagePath,
-    initialLocation,
+    initialLocationCode,
   };
 }
 
 function ExplorePage({
-  center,
   initialLocation,
   explorePagePath,
   panel: PanelProps = {},
   profile: profileProp,
   ...props
 }) {
+  const { center, name: initialLocationCode } = initialLocation;
   const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
@@ -41,7 +41,12 @@ function ExplorePage({
     setGeoCode(code);
   };
   const [state, dispatch] = useExplore(
-    initialState(profileProp, handleClickTag, explorePagePath, initialLocation),
+    initialState(
+      profileProp,
+      handleClickTag,
+      explorePagePath,
+      initialLocationCode,
+    ),
   );
   useEffect(() => {
     dispatch({
@@ -176,7 +181,10 @@ function ExplorePage({
 
 ExplorePage.propTypes = {
   center: PropTypes.arrayOf(PropTypes.number),
-  initialLocation: PropTypes.string,
+  initialLocation: PropTypes.shape({
+    center: PropTypes.arrayOf(PropTypes.number),
+    name: PropTypes.string,
+  }),
   explorePagePath: PropTypes.string,
   panel: PropTypes.shape({}),
   profile: PropTypes.oneOfType([
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
index 308740a17..0d0ecd9d1 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -20,7 +20,12 @@ function extendProfileTags(profile, options, explorePagePath) {
   return { ...other, tags };
 }
 
-function initializer({ explorePagePath, initialLocation, profiles, options }) {
+function initializer({
+  explorePagePath,
+  initialLocationCode,
+  profiles,
+  options,
+}) {
   const [primary, secondary] = profiles;
   const [primaryOptions, secondaryOptions] = options;
 
@@ -30,12 +35,12 @@ function initializer({ explorePagePath, initialLocation, profiles, options }) {
     primary: extendProfileTags(primary, primaryOptions, explorePagePath),
     secondary: extendProfileTags(secondary, secondaryOptions, explorePagePath),
     explorePagePath,
-    initialLocation,
+    initialLocationCode,
   };
 }
 
 function reducer(state, action) {
-  const { explorePagePath, initialLocation } = state;
+  const { explorePagePath, initialLocationCode } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -85,7 +90,7 @@ function reducer(state, action) {
       return state;
     }
     case "pin":
-      if (state.primary.geography.code.toLowerCase() !== initialLocation) {
+      if (state.primary.geography.code.toLowerCase() !== initialLocationCode) {
         return { ...state, isPinning: true };
       }
       return { ...state, isPinning: false };
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 28c213b4b..02097d0bb 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -11,12 +11,13 @@ const fetchProfileGeography = async (geoCode) => {
   return data;
 };
 
-async function explorePage({
-  slug: code,
-  center,
-  initialLocation,
-  explorePagePath,
-}) {
+async function explorePage({ slugs }, _, __, hurumap) {
+  const {
+    initialLocation,
+    page: { value },
+  } = hurumap;
+  const { name } = initialLocation;
+  const code = slugs.length ? slugs[0] : name;
   const hurumapProfile = await fetchProfile();
 
   const { locations, preferredChildren, mapType, choropleth } = hurumapProfile;
@@ -86,10 +87,9 @@ async function explorePage({
   const res = {
     id: "explore-page",
     blockType: "explore-page",
-    center,
     choropleth,
     initialLocation,
-    explorePagePath,
+    explorePagePath: value.slug,
     locations,
     mapType,
     panel,
@@ -99,6 +99,7 @@ async function explorePage({
   };
 
   return res;
+  // return {}
 }
 
 export default explorePage;
diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js
index de19e45a3..5df1234a0 100644
--- a/apps/climatemappedafrica/src/lib/data/common/index.js
+++ b/apps/climatemappedafrica/src/lib/data/common/index.js
@@ -54,27 +54,6 @@ function getNavBar(siteSettings, variant, { slug }) {
   };
 }
 
-async function processExplorePage(slugs, hurumap, explorePage) {
-  const {
-    initialLocation: { name, center },
-  } = hurumap;
-  const slug = slugs.length ? slugs[0] : name;
-  const blocks = await blockify([
-    {
-      blockType: "explore-page",
-      center,
-      initialLocation: name,
-      slug: slug.trim().toLowerCase(),
-      explorePagePath: explorePage.slug,
-    },
-    {
-      blockType: "tutorial",
-    },
-  ]);
-
-  return blocks;
-}
-
 export async function getPageProps(api, context) {
   // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc.,
   // so params.slugs[0] is good enough
@@ -104,7 +83,17 @@ export async function getPageProps(api, context) {
   const menus = getNavBar(siteSettings, variant, explorePage);
 
   if (slug === explorePage.slug) {
-    blocks = await processExplorePage(slugs.slice(1), hurumap, explorePage);
+    // The explore page is a special case. The only block we need to render is map and tutorial.
+    const explorePageBlocks = [
+      {
+        blockType: "explore-page",
+        slugs: slugs.slice(1),
+      },
+      {
+        blockType: "tutorial",
+      },
+    ];
+    blocks = await blockify(explorePageBlocks, api, context, hurumap);
   }
 
   return {
diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
index 5e4059533..095a5b69a 100644
--- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
+++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js
@@ -55,6 +55,15 @@ const HURUMap = {
           type: "point",
           defaultValue: [20.0, 4.25],
         },
+        {
+          name: "pinInitialLocation",
+          type: "checkbox",
+          localized: true,
+          label: {
+            en: "Allow pinning of initial location",
+          },
+          defaultValue: false,
+        },
       ],
     },
   ],

From 7be913bb83a55003b3b282ba137b00e8f931207a Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:13:14 +0300
Subject: [PATCH 17/20] Refactor explorePage.js to use imported functions for
 fetching profile and profile geography data

Signed-off-by: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
---
 .../src/lib/data/blockify/explore-page.js        | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 02097d0bb..3f30efc6a 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -1,15 +1,7 @@
-const apiUrl = process.env.PAYLOAD_PUBLIC_APP_URL;
-const fetcher = (url) => fetch(url).then((res) => res.json());
-
-const fetchProfile = async () => {
-  const data = await fetcher(`${apiUrl}/api/hurumap/profiles`);
-  return data;
-};
-
-const fetchProfileGeography = async (geoCode) => {
-  const data = await fetcher(`${apiUrl}/api/hurumap/geographies/${geoCode}`);
-  return data;
-};
+import {
+  fetchProfile,
+  fetchProfileGeography,
+} from "@/climatemappedafrica/lib/hurumap";
 
 async function explorePage({ slugs }, _, __, hurumap) {
   const {

From 55dfe9d5984e2bef3b7dc687c5dfc03bde8c2caf Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:42:47 +0300
Subject: [PATCH 18/20] Allow pining of default location

---
 .../src/components/ExplorePage/index.js       | 53 ++++++++++++++-----
 .../src/components/ExplorePage/useExplore.js  |  6 ++-
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index 9d6ae08b9..4296a53b3 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -11,7 +11,13 @@ import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-function initialState(profiles, onClick, explorePagePath, initialLocationCode) {
+function initialState(
+  profiles,
+  onClick,
+  explorePagePath,
+  initialLocationCode,
+  pinInitialLocation,
+) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
     options: [
@@ -20,6 +26,7 @@ function initialState(profiles, onClick, explorePagePath, initialLocationCode) {
     ],
     explorePagePath,
     initialLocationCode,
+    pinInitialLocation,
   };
 }
 
@@ -30,7 +37,11 @@ function ExplorePage({
   profile: profileProp,
   ...props
 }) {
-  const { center, name: initialLocationCode } = initialLocation;
+  const {
+    center,
+    name: initialLocationCode,
+    pinInitialLocation,
+  } = initialLocation;
   const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
@@ -46,23 +57,38 @@ function ExplorePage({
       handleClickTag,
       explorePagePath,
       initialLocationCode,
+      pinInitialLocation,
     ),
   );
   useEffect(() => {
     dispatch({
       type: "reset",
-      payload: initialState(profileProp, handleClickTag, explorePagePath),
+      payload: initialState(
+        profileProp,
+        handleClickTag,
+        explorePagePath,
+        initialLocationCode,
+        pinInitialLocation,
+      ),
     });
-  }, [dispatch, profileProp, explorePagePath]);
+  }, [
+    dispatch,
+    profileProp,
+    explorePagePath,
+    initialLocationCode,
+    pinInitialLocation,
+  ]);
   useEffect(() => {
     if (geoCode) {
       dispatch({ type: "fetch", payload: { code: geoCode } });
     }
   }, [dispatch, geoCode]);
+
   const router = useRouter();
   const shouldFetch = () =>
     (state.primary.shouldFetch && state.primary.code) ||
     (state.secondary?.shouldFetch && state.secondary?.code);
+
   const { data, error } = useProfileGeography(shouldFetch);
   useEffect(() => {
     if (data) {
@@ -73,6 +99,16 @@ function ExplorePage({
     }
   }, [dispatch, data]);
 
+  // Update URL when state.slug changes
+  useEffect(() => {
+    if (state.slug) {
+      const href = `/${explorePagePath}/${state.slug}`;
+      router.push(href, href, { shallow: true });
+    }
+    // router shouldn't part of useEffect dependencies: https://nextjs.org/docs/api-reference/next/router#userouter
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.slug]);
+
   const handleSelectLocation = (payload) => {
     const { code } = payload;
     const newPath =
@@ -100,14 +136,6 @@ function ExplorePage({
     }
     dispatch({ type: "unpin", payload });
   };
-  useEffect(() => {
-    if (state.slug) {
-      const href = `/${explorePagePath}/${state.slug}`;
-      router.push(href, href, { shallow: true });
-    }
-    // router shouldn't part of useEffect dependencies: https://nextjs.org/docs/api-reference/next/router#userouter
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.slug]);
 
   const isLoading = shouldFetch() && !(data || error);
   const {
@@ -184,6 +212,7 @@ ExplorePage.propTypes = {
   initialLocation: PropTypes.shape({
     center: PropTypes.arrayOf(PropTypes.number),
     name: PropTypes.string,
+    pinInitialLocation: PropTypes.bool,
   }),
   explorePagePath: PropTypes.string,
   panel: PropTypes.shape({}),
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
index 0d0ecd9d1..c621b93f5 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -24,6 +24,7 @@ function initializer({
   explorePagePath,
   initialLocationCode,
   profiles,
+  pinInitialLocation,
   options,
 }) {
   const [primary, secondary] = profiles;
@@ -36,11 +37,12 @@ function initializer({
     secondary: extendProfileTags(secondary, secondaryOptions, explorePagePath),
     explorePagePath,
     initialLocationCode,
+    pinInitialLocation,
   };
 }
 
 function reducer(state, action) {
-  const { explorePagePath, initialLocationCode } = state;
+  const { explorePagePath, initialLocationCode, pinInitialLocation } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -93,7 +95,7 @@ function reducer(state, action) {
       if (state.primary.geography.code.toLowerCase() !== initialLocationCode) {
         return { ...state, isPinning: true };
       }
-      return { ...state, isPinning: false };
+      return { ...state, isPinning: pinInitialLocation };
     case "compare": {
       const code = action.payload?.code;
       if (code) {

From 479df32379a5b66f554b9158939d4b032c6c97f6 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:46:11 +0300
Subject: [PATCH 19/20] Update
 apps/climatemappedafrica/src/lib/data/blockify/explore-page.js

Co-authored-by: KEVIN KOECH <koechkevin92@gmail.com>
---
 apps/climatemappedafrica/src/lib/data/blockify/explore-page.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 3f30efc6a..2d326c7d8 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -91,7 +91,6 @@ async function explorePage({ slugs }, _, __, hurumap) {
   };
 
   return res;
-  // return {}
 }
 
 export default explorePage;

From 8a6a31372f8075b0f82aea63fcb2b7bc7ef652b1 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 25 Oct 2024 08:48:30 +0300
Subject: [PATCH 20/20] Used named params in propsifyBlock

---
 apps/climatemappedafrica/src/lib/data/blockify/explore-page.js | 2 +-
 apps/climatemappedafrica/src/lib/data/blockify/hero.js         | 2 +-
 apps/climatemappedafrica/src/lib/data/blockify/index.js        | 2 +-
 apps/climatemappedafrica/src/lib/data/blockify/page-hero.js    | 2 +-
 apps/climatemappedafrica/src/lib/data/blockify/team.js         | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
index 2d326c7d8..509b6d341 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js
@@ -3,7 +3,7 @@ import {
   fetchProfileGeography,
 } from "@/climatemappedafrica/lib/hurumap";
 
-async function explorePage({ slugs }, _, __, hurumap) {
+async function explorePage({ block: { slugs }, hurumap }) {
   const {
     initialLocation,
     page: { value },
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
index 4983af2b2..f6c7cefbc 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -3,7 +3,7 @@ import {
   fetchProfileGeography,
 } from "@/climatemappedafrica/lib/hurumap";
 
-export default async function hero(block, _, __, hurumap) {
+export default async function hero({ block, hurumap }) {
   const {
     initialLocation: { center, name },
   } = hurumap;
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/index.js b/apps/climatemappedafrica/src/lib/data/blockify/index.js
index f81829636..d8a83f9fe 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/index.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/index.js
@@ -18,7 +18,7 @@ export const blockify = async (blocks, api, context, hurumap) => {
     const propsifyBlock = propsifyBlockBySlug[slug];
 
     if (propsifyBlock) {
-      return propsifyBlock(block, api, context, hurumap);
+      return propsifyBlock({ block, api, context, hurumap });
     }
     return {
       ...block,
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js b/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js
index 0a732a785..1be4c04a4 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/page-hero.js
@@ -1,6 +1,6 @@
 import { imageFromMedia } from "@/climatemappedafrica/lib/data/utils";
 
-async function pageHero(block) {
+async function pageHero({ block }) {
   const { background: media, ...others } = block;
   let background = null;
   if (media) {
diff --git a/apps/climatemappedafrica/src/lib/data/blockify/team.js b/apps/climatemappedafrica/src/lib/data/blockify/team.js
index ccc51693e..74c51abf6 100644
--- a/apps/climatemappedafrica/src/lib/data/blockify/team.js
+++ b/apps/climatemappedafrica/src/lib/data/blockify/team.js
@@ -8,7 +8,7 @@ import { equalsIgnoreCase } from "@/climatemappedafrica/utils";
 const getCountryFromCode = (alpha3) =>
   countries.find((c) => equalsIgnoreCase(c.alpha3, alpha3)) ?? null;
 
-async function team(block, api, context) {
+async function team({ block, api, context }) {
   const { query } = context;
   const data = await getMembers(api, query);
   let members = null;