ClimateMapped Fixes

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

@@ -16,7 +16,7 @@ import Link from "@/climatemappedafrica/components/Link";
 
 function DropdownSearch({
   href: hrefProp = "/explore",
-  label = "Search for a location",
+  label,
   locations,
   onClick,
   icon: IconProp = SearchIcon,
@@ -87,8 +87,8 @@ function DropdownSearch({
         component={iconComponent}
         viewBox="0 0 48 48"
         sx={{
-          width: 48,
-          height: 48,
+          width: 40,
+          height: 40,
           ...iconBorder,
         }}
       />
@@ -97,15 +97,17 @@ function DropdownSearch({
 
   return (
     <Box id="location-search">
-      <Typography
-        variant="body1"
-        sx={({ palette, typography }) => ({
-          color: palette.text.primary,
-          marginBottom: typography.pxToRem(10),
-        })}
-      >
-        {label}
-      </Typography>
+      {label && (
+        <Typography
+          variant="body1"
+          sx={({ palette, typography }) => ({
+            color: palette.text.primary,
+            marginBottom: typography.pxToRem(10),
+          })}
+        >
+          {label}
+        </Typography>
+      )}
       <InputBase
         inputProps={{ "aria-label": "search" }}
         onChange={handleChange}
@@ -118,12 +120,12 @@ function DropdownSearch({
           width: typography.pxToRem(278),
           backgroundColor: "inherit",
           height: typography.pxToRem(48),
-          padding: `0 ${typography.pxToRem(20)}`,
+          padding: 0,
           "&.MuiInputBase-input": {
             backgroundColor: "inherit",
             height: typography.pxToRem(48),
             borderRadius: typography.pxToRem(10),
-            padding: `0 ${typography.pxToRem(20)}`,
+            padding: 0,
             textTransform: "capitalize",
           },
           "&.Mui-focused": {

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-78q71b-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
     >
       <input
         aria-label="search"
@@ -29,7 +29,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kzlhbf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />

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

@@ -80,7 +80,10 @@ function ExplorePage({
   ]);
   useEffect(() => {
     if (geoCode) {
-      dispatch({ type: "fetch", payload: { code: geoCode } });
+      dispatch({
+        type: "fetch",
+        payload: { code: geoCode, onClick: handleClickTag },
+      });
     }
   }, [dispatch, geoCode]);
 
@@ -94,7 +97,7 @@ function ExplorePage({
     if (data) {
       dispatch({
         type: "show",
-        payload: { profile: data, options: { onClick: handleClickTag } },
+        payload: { profile: data, onClick: handleClickTag },
       });
     }
   }, [dispatch, data]);

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-78q71b-MuiInputBase-root"
+              class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
             >
               <input
                 aria-label="search"
@@ -75,7 +75,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-kzlhbf-MuiSvgIcon-root"
+                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
                   focusable="false"
                   viewBox="0 0 48 48"
                 />

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

@@ -56,7 +56,15 @@ function HowItWorks({
         })}
       />
       <Section classes={{ root: classes.section }}>
-        <Grid container direction={{ xs: "column-reverse", lg: "row" }}>
+        <Grid
+          container
+          direction={{
+            xs: "column-reverse",
+            md: "row",
+          }}
+          wrap="nowrap"
+          alignItems="center"
+        >
           <Grid
             item
             xs={12}
@@ -148,15 +156,14 @@ function HowItWorks({
           </Grid>
           <Grid item lg={1} />
           <Grid
+            container
             item
             xs={12}
             md={5}
-            sx={{
-              alignItems: "center",
-              justifyContent: {
-                xs: "center",
-                md: "flex-end",
-              },
+            alignItems="center"
+            justifyContent={{
+              xs: "center",
+              md: "flex-end",
             }}
           >
             <Box

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

@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ explorePagePath, logo, variant }) {
+function ExploreNavigation({ explorePagePath, locations, logo, variant }) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -72,8 +72,9 @@ function ExploreNavigation({ explorePagePath, logo, variant }) {
             <DropdownSearch
               icon={SearchIcon}
               href={explorePagePath}
-              placeholder="Search for a Location" // TODO: Read from cms
+              placeholder="Search for a Location"
               variant={variant}
+              locations={locations}
               classes={{
                 inputRoot: classes.searchInputRoot,
                 input: classes.searchInput,

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

@@ -1,9 +1,6 @@
-import {
-  fetchProfile,
-  fetchProfileGeography,
-} from "@/climatemappedafrica/lib/hurumap";
+import { fetchProfileGeography } from "@/climatemappedafrica/lib/hurumap";
 
-async function explorePage({ block: { slugs }, hurumap }) {
+async function explorePage({ block: { slugs }, hurumap, hurumapProfile }) {
   const {
     rootGeography,
     labels: { dataNotAvailable, scrollToTop: scrollToTopLabel },
@@ -12,7 +9,6 @@ async function explorePage({ block: { slugs }, hurumap }) {
   } = hurumap;
   const { code: name } = rootGeography;
   const code = slugs.length ? slugs[0] : name;
-  const hurumapProfile = await fetchProfile();
 
   const { locations, preferredChildren, mapType, choropleth } = hurumapProfile;
 

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

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

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

@@ -1,4 +1,5 @@
 import { blockify } from "@/climatemappedafrica/lib/data/blockify";
+import { fetchProfile } from "@/climatemappedafrica/lib/hurumap";
 
 export function imageFromMedia(alt, url) {
   return { alt, src: url };
@@ -34,7 +35,8 @@ function getFooter(siteSettings, variant) {
   };
 }
 
-function getNavBar(siteSettings, variant, { slug }) {
+async function getNavBar(siteSettings, variant, { slug }, hurumapProfile) {
+  const { locations } = hurumapProfile;
   const {
     connect: { links = [] },
     primaryNavigation: { menus = [], connect = [] },
@@ -51,6 +53,7 @@ function getNavBar(siteSettings, variant, { slug }) {
     menus,
     socialLinks,
     variant,
+    locations,
   };
 }
 
@@ -62,6 +65,8 @@ 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);
@@ -74,13 +79,24 @@ export async function getPageProps(api, context) {
   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, hurumap);
+  let blocks = await blockify(page.blocks, api, context, settings);
   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, explorePage);
+  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.
@@ -93,7 +109,7 @@ export async function getPageProps(api, context) {
         blockType: "tutorial",
       },
     ];
-    blocks = await blockify(explorePageBlocks, api, context, hurumap);
+    blocks = await blockify(explorePageBlocks, api, context, settings);
   }
 
   return {