Merge pull request #991 from CodeForAfrica/ft/climatemapped-improvements

Ft/climatemapped-improvements
CodeForAfrica · Nov 13, 2024 · 8d5860e · 8d5860e
2 parents 0f5386a + f43a69a
commit 8d5860e
Show file tree

Hide file tree

Showing 20 changed files with 360 additions and 149 deletions.
diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
@@ -116,12 +116,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),

diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/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"

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -33,8 +33,10 @@ function initialState(
 function ExplorePage({
   rootGeography,
   explorePagePath,
+  hurumapUrl,
   panel: PanelProps = {},
   profile: profileProp,
+  profileId,
   ...props
 }) {
   const {
@@ -92,7 +94,11 @@ function ExplorePage({
     (state.primary.shouldFetch && state.primary.code) ||
     (state.secondary?.shouldFetch && state.secondary?.code);
 
-  const { data, error } = useProfileGeography(shouldFetch);
+  const { data, error } = useProfileGeography(
+    shouldFetch,
+    hurumapUrl,
+    profileId,
+  );
   useEffect(() => {
     if (data) {
       dispatch({
@@ -235,6 +241,8 @@ ExplorePage.propTypes = {
       }),
     ),
   ]),
+  hurumapUrl: PropTypes.string,
+  profileId: PropTypes.number,
 };
 
 export default ExplorePage;
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js b/apps/climatemappedafrica/src/components/ExplorePage/useProfileGeography.js
@@ -2,9 +2,11 @@ import useSWR from "swr";
 
 import fetchJson from "@/climatemappedafrica/utils/fetchJson";
 
-function useProfileGeography(shouldFetch) {
+function useProfileGeography(shouldFetch, hurumapUrl, profileId) {
   const fetcher = (code) => {
-    return fetchJson(`/api/hurumap/geographies/${code}`);
+    return fetchJson(
+      `/api/hurumap/geographies/${code}?profileId=${profileId}&baseUrl=${hurumapUrl}`,
+    );
   };
   const { data, error } = useSWR(shouldFetch, fetcher);
 

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -61,7 +61,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"

diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid, Button } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
@@ -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,25 @@ 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 && (
+              <Button
+                component="button"
+                id="nav-help"
+                onClick={openTooltip}
+                sx={(theme) => ({
+                  color: "#666666",
+                  backgroundColor: "#EBEBEB",
+                  borderRadius: "50%",
+                  marginLeft: theme.typography.pxToRem(20),
+                  width: theme.typography.pxToRem(48),
+                  height: theme.typography.pxToRem(48),
+                  minWidth: theme.typography.pxToRem(48),
+                  cursor: "pointer",
+                })}
+              >
+                ?
+              </Button>
+            )}
           </Grid>
           <Grid />
         </Grid>

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/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 {
+    hurumapUrl,
     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, {
+    baseUrl: hurumapUrl,
+    profileId,
+  });
   const profile = [primaryProfile];
   if (secondaryCode) {
-    const secondaryProfile = await fetchProfileGeography(secondaryCode);
+    const secondaryProfile = await fetchProfileGeography(secondaryCode, {
+      baseUrl: hurumapUrl,
+      profileId,
+    });
     profile.push(secondaryProfile);
   }
 
@@ -46,6 +54,8 @@ async function explorePage(block, _api, _context, { hurumap }) {
     id: "explore-page",
     blockType: "explore-page",
     choropleth,
+    hurumapUrl,
+    profileId,
     rootGeography,
     explorePagePath: profilePage.slug,
     locations,

diff --git a/apps/climatemappedafrica/src/lib/data/blockify/hero.js b/apps/climatemappedafrica/src/lib/data/blockify/hero.js
@@ -12,18 +12,26 @@ import {
  */
 export default async function hero(block, _api, _context, { hurumap }) {
   const {
+    hurumapUrl,
+    profileId,
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography, zoom },
     profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
-  const { geometries } = await fetchProfileGeography(code.toLowerCase());
+  const { geometries } = await fetchProfileGeography(code.toLowerCase(), {
+    baseUrl: hurumapUrl,
+    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({
+    baseUrl: hurumapUrl,
+    profileId,
+  });
   const chloropleth = hurumapProfile?.choropleth ?? null;
   const { choropleth, legend } = generateChoropleth(
     chloropleth,

diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/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 {
+      url: hurumapUrl,
+      page: hurumapPage,
+      profile: profileId,
+      ...otherHurumapSettings
+    } = hurumapSettings;
+    const profile = await fetchProfile({ baseUrl: hurumapUrl, profileId });
     const { value: profilePage } = hurumapPage;
     if (slug === profilePage.slug) {
       variant = "explore";
@@ -135,7 +143,9 @@ export async function getPageProps(api, context) {
     }
     settings.hurumap = {
       ...otherHurumapSettings,
+      hurumapUrl,
       profile,
+      profileId,
       profilePage,
     };
   }

diff --git a/apps/climatemappedafrica/src/lib/hurumap/index.js b/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({ baseUrl, profileId }) {
   const { configuration } = await fetchJson(
-    new URL("/api/v1/profiles/1/?format=json", apiUrl),
+    new URL(`/api/v1/profiles/${profileId}/?format=json`, baseUrl),
   );
 
   const locations = configuration?.featured_locations?.map(
@@ -24,6 +21,12 @@ export async function fetchProfile() {
   };
 }
 
+export async function fetchProfiles(baseUrl) {
+  const { results } = await fetchJson(new URL("/api/v1/profiles", baseUrl));
+  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,
+  { baseUrl, 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}`,
+      baseUrl,
     ),
   );
   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}`,
+        baseUrl,
       ),
     );
     parent.data = parentJson.profile.profile_data;

diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/geographies/[geoCode].js b/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, baseUrl } = req.query;
   if (req.method === "GET") {
     try {
       const { geoCode } = req.query;
-      const result = await fetchProfileGeography(geoCode);
+      const result = await fetchProfileGeography(geoCode, {
+        baseUrl,
+        profileId,
+      });
       return res.status(200).json(result);
     } catch (err) {
       return res.status(500).json(err.message);

diff --git a/...dafrica/src/pages/api/hurumap/profiles.js → ...ca/src/pages/api/hurumap/profiles/[id].js b/...dafrica/src/pages/api/hurumap/profiles.js → ...ca/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, baseUrl } = 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({ baseUrl, profileId: id });
       cache = result;
       cacheExpiry = now + 5 * 60 * 1000;
       return res.status(200).json(result);

diff --git a/apps/climatemappedafrica/src/pages/api/hurumap/profiles/index.js b/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 { baseUrl } = 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(baseUrl);
+      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();
+}