Ft/climatemapped-improvements

apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js

@@ -115,12 +115,12 @@ function DropdownSearch({
         value={query}
         sx={({ typography, palette }) => ({
           borderRadius: typography.pxToRem(10),
-          color: palette.primary.main,
+          color: palette.text.primary,
           border: `2px solid ${palette.text.hint}`,
           width: typography.pxToRem(278),
           backgroundColor: "inherit",
           height: typography.pxToRem(48),
-          padding: 0,
+          padding: `0 0 0 ${typography.pxToRem(20)}`,
           "&.MuiInputBase-input": {
             backgroundColor: "inherit",
             height: typography.pxToRem(48),

apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js

@@ -12,7 +12,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-49e042-MuiInputBase-root"
     >
       <input
         aria-label="search"

apps/climatemappedafrica/src/components/ExplorePage/index.js

@@ -33,6 +33,7 @@ function initialState(
 function ExplorePage({
   rootGeography,
   explorePagePath,
+  hurumapConfig,
   panel: PanelProps = {},
   profile: profileProp,
   ...props
@@ -92,7 +93,7 @@ function ExplorePage({
     (state.primary.shouldFetch && state.primary.code) ||
     (state.secondary?.shouldFetch && state.secondary?.code);
 
-  const { data, error } = useProfileGeography(shouldFetch);
+  const { data, error } = useProfileGeography(shouldFetch, hurumapConfig);
   useEffect(() => {
     if (data) {
       dispatch({
@@ -235,6 +236,10 @@ ExplorePage.propTypes = {
       }),
     ),
   ]),
+  hurumapConfig: PropTypes.shape({
+    hurumapAPIURL: PropTypes.string,
+    profileId: PropTypes.number,
+  }),
 };
 
 export default ExplorePage;

apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js

@@ -2,9 +2,12 @@ import useSWR from "swr";
 
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 
-function useProfileGeography(shouldFetch) {
+function useProfileGeography(shouldFetch, hurumapConfig) {
+  const { BASE_URL, profileId } = hurumapConfig;
   const fetcher = (code) => {
-    return fetchJson(`/api/hurumap/geographies/${code}`);
+    return fetchJson(
+      `/api/hurumap/geographies/${code}?profileId=${profileId}&BASE_URL=${BASE_URL}`,
+    );
   };
   const { data, error } = useSWR(shouldFetch, fetcher);
 

apps/climatemappedafrica/src/components/Hero/Hero.snap.js

@@ -58,7 +58,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               Search for a location
             </p>
             <div
-              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
+              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-49e042-MuiInputBase-root"
             >
               <input
                 aria-label="search"

apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js

@@ -41,7 +41,13 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ explorePagePath, locations, logo, variant }) {
+function ExploreNavigation({
+  explorePagePath,
+  locations,
+  logo,
+  tutorialEnabled,
+  variant,
+}) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -83,24 +89,26 @@ function ExploreNavigation({ explorePagePath, locations, logo, variant }) {
                 menuItem: classes.searchMenuItem,
               }}
             />
-            <Typography
-              component="div"
-              id="nav-help"
-              onClick={openTooltip}
-              variant="h3"
-              sx={(theme) => ({
-                color: "#666666",
-                textAlign: "center",
-                backgroundColor: "#EBEBEB",
-                borderRadius: theme.typography.pxToRem(60),
-                marginLeft: theme.typography.pxToRem(20),
-                width: theme.typography.pxToRem(48),
-                height: theme.typography.pxToRem(48),
-                cursor: "pointer",
-              })}
-            >
-              ?
-            </Typography>
+            {tutorialEnabled && (
+              <Typography
+                component="div"
+                id="nav-help"
+                onClick={openTooltip}
+                variant="h3"
+                sx={(theme) => ({
+                  color: "#666666",
+                  textAlign: "center",
+                  backgroundColor: "#EBEBEB",
+                  borderRadius: theme.typography.pxToRem(60),
+                  marginLeft: theme.typography.pxToRem(20),
+                  width: theme.typography.pxToRem(48),
+                  height: theme.typography.pxToRem(48),
+                  cursor: "pointer",
+                })}
+              >
+                ?
+              </Typography>
+            )}
           </Grid>
           <Grid />
         </Grid>

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

@@ -6,9 +6,11 @@ import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
  */
 async function explorePage(block, _api, _context, { hurumap }) {
   const {
+    hurumapAPIURL,
     items: panelItems,
     labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
     profile: hurumapProfile,
+    profileId,
     profilePage,
     rootGeography,
   } = hurumap;
@@ -30,10 +32,16 @@ async function explorePage(block, _api, _context, { hurumap }) {
   }
 
   const [primaryCode, secondaryCode] = geoCodes;
-  const primaryProfile = await fetchProfileGeography(primaryCode);
+  const primaryProfile = await fetchProfileGeography(primaryCode, {
+    BASE_URL: hurumapAPIURL,
+    profileId,
+  });
   const profile = [primaryProfile];
   if (secondaryCode) {
-    const secondaryProfile = await fetchProfileGeography(secondaryCode);
+    const secondaryProfile = await fetchProfileGeography(secondaryCode, {
+      BASE_URL: hurumapAPIURL,
+      profileId,
+    });
     profile.push(secondaryProfile);
   }
 
@@ -46,6 +54,10 @@ async function explorePage(block, _api, _context, { hurumap }) {
     id: "explore-page",
     blockType: "explore-page",
     choropleth,
+    hurumapConfig: {
+      hurumapAPIURL,
+      profileId,
+    },
     rootGeography,
     explorePagePath: profilePage.slug,
     locations,

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

@@ -10,17 +10,25 @@ import {
  */
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
+    hurumapAPIURL,
+    profileId,
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
   } = hurumap ?? { rootGeography: {} };
-  const { geometries } = await fetchProfileGeography(code.toLowerCase());
+  const { geometries } = await fetchProfileGeography(code.toLowerCase(), {
+    BASE_URL: hurumapAPIURL,
+    profileId,
+  });
   const { level } = geometries.boundary?.properties ?? {};
   const childLevelMaps = {
     continent: "country",
     country: "region",
   };
   const childLevel = childLevelMaps[level];
-  const { locations, preferredChildren } = await fetchProfile();
+  const { locations, preferredChildren } = await fetchProfile({
+    BASE_URL: hurumapAPIURL,
+    profileId,
+  });
   const preferredChildrenPerLevel = preferredChildren[level];
   const { children } = geometries;
   const preferredLevel =

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

@@ -50,11 +50,13 @@ async function getNavBar(variant, settings) {
   const socialLinks = links?.filter((link) => connect.includes(link.platform));
   let explorePagePath = null;
   let locations = null;
+  let tutorialEnabled;
   if (hurumap?.enabled) {
     explorePagePath = hurumap.profilePage.slug;
     if (hurumap.profile) {
       locations = hurumap.profile.locations;
     }
+    tutorialEnabled = hurumap.tutorial?.enabled;
   }
 
   return {
@@ -64,6 +66,7 @@ async function getNavBar(variant, settings) {
     logo: imageFromMedia(title, primaryLogo.url),
     menus,
     socialLinks,
+    tutorialEnabled,
     variant,
   };
 }
@@ -118,8 +121,13 @@ export async function getPageProps(api, context) {
   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 {
+      hurumapAPIURL,
+      page: hurumapPage,
+      profile: profileId,
+      ...otherHurumapSettings
+    } = hurumapSettings;
+    const profile = await fetchProfile({ BASE_URL: hurumapAPIURL, profileId });
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
@@ -135,7 +143,9 @@ export async function getPageProps(api, context) {
     }
     settings.hurumap = {
       ...otherHurumapSettings,
+      hurumapAPIURL,
       profile,
+      profileId,
       profilePage,
     };
   }

apps/climatemappedafrica/src/lib/hurumap/index.js

@@ -1,13 +1,10 @@
 import defaultIcon from "@/climatemappedafrica/assets/icons/eye-white.svg";
-import { hurumap } from "@/climatemappedafrica/config";
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 import formatNumericalValue from "@/climatemappedafrica/utils/formatNumericalValue";
 
-const apiUrl = process.env.HURUMAP_API_URL || hurumap?.api?.url;
-
-export async function fetchProfile() {
+export async function fetchProfile({ BASE_URL, profileId }) {
   const { configuration } = await fetchJson(
-    new URL("/api/v1/profiles/1/?format=json", apiUrl),
+    new URL(`/api/v1/profiles/${profileId}/?format=json`, BASE_URL),
   );
 
   const locations = configuration?.featured_locations?.map(
@@ -24,6 +21,12 @@ export async function fetchProfile() {
   };
 }
 
+export async function fetchProfiles(BASE_URL) {
+  const { results } = await fetchJson(new URL("/api/v1/profiles", BASE_URL));
+  const profiles = results.map(({ name, id }) => ({ name, id }));
+  return profiles;
+}
+
 function formatProfileGeographyData(data, parent) {
   if (!data) {
     return null;
@@ -85,12 +88,15 @@ function formatProfileGeographyData(data, parent) {
     .filter((category) => category.children.length);
 }
 
-export async function fetchProfileGeography(geoCode) {
+export async function fetchProfileGeography(
+  geoCode,
+  { BASE_URL, profileId, version = "Climate" },
+) {
   // HURUmap codes are uppercased in the API
   const json = await fetchJson(
     new URL(
-      `/api/v1/all_details/profile/1/geography/${geoCode.toUpperCase()}/?version=Climate`,
-      apiUrl,
+      `/api/v1/all_details/profile/${profileId}/geography/${geoCode.toUpperCase()}/?version=${version}`,
+      BASE_URL,
     ),
   );
   const { boundary, children, parent_layers: parents } = json;
@@ -135,8 +141,8 @@ export async function fetchProfileGeography(geoCode) {
   if (parentCode) {
     const parentJson = await fetchJson(
       new URL(
-        `/api/v1/all_details/profile/1/geography/${parentCode.toUpperCase()}/?version=Climate`,
-        apiUrl,
+        `/api/v1/all_details/profile/${profileId}/geography/${parentCode.toUpperCase()}/?version=${version}`,
+        BASE_URL,
       ),
     );
     parent.data = parentJson.profile.profile_data;

apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js

@@ -1,10 +1,14 @@
 import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
 
 export default async function index(req, res) {
+  const { profileId, BASE_URL } = req.query;
   if (req.method === "GET") {
     try {
       const { geoCode } = req.query;
-      const result = await fetchProfileGeography(geoCode);
+      const result = await fetchProfileGeography(geoCode, {
+        BASE_URL,
+        profileId,
+      });
       return res.status(200).json(result);
     } catch (err) {
       return res.status(500).json(err.message);

apps/climatemappedafrica/src/pages/api/hurumap/profiles.js → apps/climatemappedafrica/src/pages/api/hurumap/profiles/[id].js

@@ -4,6 +4,7 @@ let cache = null;
 let cacheExpiry = 0;
 
 export default async function handler(req, res) {
+  const { id, BASE_URL } = req.query;
   if (req.method === "GET") {
     const now = Date.now();
 
@@ -12,7 +13,7 @@ export default async function handler(req, res) {
     }
 
     try {
-      const result = await fetchProfile();
+      const result = await fetchProfile({ BASE_URL, profileId: id });
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);

apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js

@@ -0,0 +1,26 @@
+import { fetchProfiles } from "@/climatemappedafrica/lib/hurumap";
+
+let cache = null;
+let cacheExpiry = 0;
+
+export default async function handler(req, res) {
+  const { BASE_URL } = req.query;
+  if (req.method === "GET") {
+    const now = Date.now();
+
+    if (cache && now < cacheExpiry) {
+      return res.status(200).json(cache);
+    }
+
+    try {
+      const result = await fetchProfiles(BASE_URL);
+      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();
+}