Fix @/climatemappedafrica HURUmap data handling

apps/climatemappedafrica/src/lib/data/blockify/explore-page.js

@@ -1,13 +1,19 @@
 import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
 
-async function explorePage({ block: { slugs }, hurumap, hurumapProfile }) {
+/**
+ * This function will be called only when HURUmap is enabled.
+ * @see @/climatemappedafrica/lib/data/common/index.js
+ */
+async function explorePage(block, _api, _context, { hurumap }) {
   const {
-    rootGeography,
-    labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
     items: panelItems,
-    page: { value },
+    labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
+    profile: hurumapProfile,
+    profilePage,
+    rootGeography,
   } = hurumap;
   const { code: name } = rootGeography;
+  const { slugs } = block;
   const code = slugs.length ? slugs[0] : name;
 
   const { locations, preferredChildren, mapType, choropleth } = hurumapProfile;
@@ -41,7 +47,7 @@ async function explorePage({ block: { slugs }, hurumap, hurumapProfile }) {
     blockType: "explore-page",
     choropleth,
     rootGeography,
-    explorePagePath: value.slug,
+    explorePagePath: profilePage.slug,
     locations,
     mapType,
     panel,

apps/climatemappedafrica/src/lib/data/blockify/hero.js

@@ -3,13 +3,19 @@ import {
   fetchProfileGeography,
 } from "@/climatemappedafrica/lib/hurumap";
 
-export default async function hero({ block, hurumap }) {
+/**
+ * This function will be called even when HURUmap is disabled.
+ * @see @/climatemappedafrica/lib/data/common/index.js
+ *
+ * TODO(koech): Handle the case when hurumap?.enabled is undefined/false
+ *              Should we hide the map?
+ */
+export default async function hero(block, _api, _context, { hurumap }) {
   const {
-    rootGeography: { center, code, rootGeographyHasData: pinRootGeography },
-    page: {
-      value: { slug: explorePageSlug },
-    },
+    profilePage,
+    rootGeography: { center, code, hasData: pinRootGeography },
   } = hurumap;
+  const { slug: explorePageSlug } = profilePage;
   const { geometries } = await fetchProfileGeography(code.toLowerCase());
   const { level } = geometries.boundary?.properties ?? {};
   const childLevelMaps = {
@@ -26,15 +32,16 @@ export default async function hero({ block, hurumap }) {
     (location) => location.level === childLevel,
   );
   const boundary = children[preferredLevel];
+
   return {
     ...block,
-    center,
-    slug: "hero",
     boundary,
+    center,
+    explorePageSlug,
     featuredLocations,
     level,
-    properties: geometries.boundary?.properties,
     pinRootGeography,
-    explorePageSlug,
+    properties: geometries.boundary?.properties,
+    slug: "hero",
   };
 }

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

@@ -12,14 +12,13 @@ const propsifyBlockBySlug = {
   tutorial,
 };
 
-export const blockify = async (blocks, api, context, settings) => {
-  const { hurumap, hurumapProfile } = settings;
+export const blockify = async ({ blocks }, api, context, settings) => {
   const promises = blocks?.map(async (block) => {
     const slug = block.blockType;
     const propsifyBlock = propsifyBlockBySlug[slug];
 
     if (propsifyBlock) {
-      return propsifyBlock({ block, api, context, hurumap, hurumapProfile });
+      return propsifyBlock(block, api, context, settings);
     }
     return {
       ...block,

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) {

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;

apps/climatemappedafrica/src/lib/data/blockify/tutorial.js

@@ -1,18 +1,19 @@
-async function tutorial({ hurumap }) {
-  const {
-    panel: { steps },
-    enabled,
-  } = hurumap;
+/**
+ * This function will be called only when HURUmap tutorial is enabled.
+ * @see @/climatemappedafrica/lib/data/common/index.js
+ */
+async function tutorial(block, _api, _context, { hurumap }) {
+  const { steps, enabled } = hurumap.tutorial;
 
   const items = steps.map((step) => ({
     ...step,
     selector: `#${step.selector}`,
   }));
   return {
-    blockType: "tutorial",
-    id: "tutorial",
+    ...block,
     enabled,
     items,
+    slug: block.blockType,
   };
 }
 

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

@@ -10,7 +10,7 @@ export function imageFromMedia(alt, url) {
   return { alt, src: url };
 }
 
-function getFooter(siteSettings, variant) {
+function getFooter(variant, settings) {
   const {
     connect,
     footerNavigation,
@@ -19,10 +19,8 @@ function getFooter(siteSettings, variant) {
     secondaryLogo,
     description,
     title,
-  } = siteSettings;
-
+  } = settings.site;
   const { menus: footerMenus, ...footerProps } = footerNavigation;
-
   const media = secondaryLogo || primaryLogo;
   const footerLogoUrl = typeof media === "string" ? null : media.url;
 
@@ -40,37 +38,46 @@ function getFooter(siteSettings, variant) {
   };
 }
 
-async function getNavBar(siteSettings, variant, { slug }, hurumapProfile) {
-  const { locations } = hurumapProfile;
+async function getNavBar(variant, settings) {
+  const { hurumap, site } = settings;
   const {
     connect: { links = [] },
-    primaryNavigation: { menus = [], connect = [] },
-    primaryLogo,
     drawerLogo,
+    primaryLogo,
+    primaryNavigation: { menus = [], connect = [] },
     title,
-  } = siteSettings;
+  } = site;
   const socialLinks = links?.filter((link) => connect.includes(link.platform));
+  let explorePagePath = null;
+  let locations = null;
+  if (hurumap?.enabled) {
+    explorePagePath = hurumap.profilePage.slug;
+    if (hurumap.profile) {
+      locations = hurumap.profile.locations;
+    }
+  }
 
   return {
-    logo: imageFromMedia(title, primaryLogo.url),
     drawerLogo: imageFromMedia(title, drawerLogo.url),
-    explorePagePath: slug,
+    explorePagePath,
+    locations,
+    logo: imageFromMedia(title, primaryLogo.url),
     menus,
     socialLinks,
     variant,
-    locations,
   };
 }
 
 export async function getPagePaths(api) {
   const hurumapSettings = await api.findGlobal("settings-hurumap");
+  let profilePage;
+  if (hurumapSettings?.enabled) {
+    profilePage = hurumapSettings.page.value;
+  }
   const { docs: pages } = await api.getCollection("pages");
-  const {
-    page: { value: explorePage },
-  } = hurumapSettings;
   const paths = pages.flatMap(({ slug }) => {
     // TODO(kilemensi): Handle parent > child page relation e.g. /insights/news
-    if (slug !== explorePage?.slug) {
+    if (slug !== profilePage?.slug) {
       return {
         params: {
           slugs: [slug === "index" ? "" : slug],
@@ -80,7 +87,7 @@ export async function getPagePaths(api) {
     // HURUmap profile page
     return GEOGRAPHIES.map((code) => ({
       params: {
-        slugs: [explorePage.slug, code],
+        slugs: [profilePage.slug, code],
       },
     }));
   });
@@ -98,53 +105,45 @@ export async function getPageProps(api, context) {
   const { draftMode = false } = context;
   const options = { draft: draftMode };
 
-  const hurumapProfile = await fetchProfile();
-
   const {
     docs: [page],
   } = await api.findPage(slug, options);
-
   if (!page) {
     return null;
   }
 
-  const hurumap = await api.findGlobal("settings-hurumap");
-  const {
-    page: { value: explorePage },
-  } = hurumap;
-  const siteSettings = await api.findGlobal("settings-site");
-
-  const settings = {
-    hurumap,
-    hurumapProfile,
-    siteSettings,
-  };
-
-  let blocks = await blockify(page.blocks, api, context, settings);
-  const variant = page.slug === explorePage.slug ? "explore" : "default";
-
-  const footer = getFooter(siteSettings, variant);
-  const menus = await getNavBar(
-    siteSettings,
-    variant,
-    explorePage,
-    hurumapProfile,
-  );
-
-  if (slug === explorePage.slug) {
-    // The explore page is a special case. The only block we need to render is map and tutorial.
-    const explorePageBlocks = [
-      {
+  let variant = "default";
+  const settings = {};
+  settings.site = (await api.findGlobal("settings-site")) || null;
+  const hurumapSettings = await api.findGlobal("settings-hurumap");
+  if (hurumapSettings?.enabled) {
+    // TODO(koech): Handle cases when fetching profile fails?
+    const profile = await fetchProfile();
+    const { page: hurumapPage, ...otherHurumapSettings } = hurumapSettings;
+    const { value: profilePage } = hurumapPage;
+    if (slug === profilePage.slug) {
+      variant = "explore";
+      const explorePageBlock = {
         blockType: "explore-page",
         slugs: slugs.slice(1),
-      },
-      {
-        blockType: "tutorial",
-      },
-    ];
-    blocks = await blockify(explorePageBlocks, api, context, settings);
+      };
+      page.blocks.push(explorePageBlock);
+      if (hurumapSettings.tutorial?.enabled) {
+        const tutorialBlock = { blockType: "tutorial" };
+        page.blocks.push(tutorialBlock);
+      }
+    }
+    settings.hurumap = {
+      ...otherHurumapSettings,
+      profile,
+      profilePage,
+    };
   }
 
+  const blocks = await blockify(page, api, context, settings);
+  const footer = getFooter(variant, settings);
+  const menus = await getNavBar(variant, settings);
+
   return {
     blocks,
     footer,

apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js → apps/climatemappedafrica/src/payload/globals/HURUMap/DataPanels.js

@@ -1,12 +1,13 @@
 import image from "../../fields/image";
 
-const PanelOptions = {
-  label: "Panel Options",
+const DataPanels = {
+  label: "Data Panels",
   fields: [
     {
       name: "items",
       type: "array",
       label: "Panel Items",
+      required: true,
       fields: [
         {
           type: "select",
@@ -61,4 +62,4 @@ const PanelOptions = {
   ],
 };
 
-export default PanelOptions;
+export default DataPanels;

apps/climatemappedafrica/src/payload/globals/HURUMap/Profile.js

@@ -12,7 +12,7 @@ const Profile = {
       maxDepth: 1,
       required: true,
       admin: {
-        description: "The page to show the interactive map on.",
+        description: "The page to show the HURUmap profile on.",
       },
     },
   ],

apps/climatemappedafrica/src/payload/globals/HURUMap/RootGeography.js

@@ -9,15 +9,13 @@ const RootGeography = {
         en: "Root Geography",
       },
       type: "group",
-      localized: true,
       fields: [
         {
           name: "code",
           type: "text",
           label: {
             en: "Location Code",
           },
-          localized: true,
           required: true,
           hasMany: false,
           defaultValue: "af",
@@ -35,9 +33,8 @@ const RootGeography = {
           defaultValue: [20.0, 4.25],
         },
         {
-          name: "rootGeographyHasData",
+          name: "hasData",
           type: "checkbox",
-          localized: true,
           label: {
             en: "Root geography has data",
           },