diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js b/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js index dc9f31362..b1f4b04ff 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js +++ b/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,21 +97,22 @@ function DropdownSearch({ return ( - ({ - color: palette.text.primary, - marginBottom: typography.pxToRem(10), - })} - > - {label} - + {label && ( + ({ + color: palette.text.primary, + marginBottom: typography.pxToRem(10), + })} + > + {label} + + )} ({ borderRadius: typography.pxToRem(10), color: palette.primary.main, @@ -119,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": { diff --git a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js index d8dd3412a..06576c3fb 100644 --- a/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js +++ b/apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js @@ -12,7 +12,7 @@ exports[` renders unchanged 1`] = ` Search for a location

renders unchanged 1`] = ` > diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index f7652dd65..35cc52c07 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/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]); diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js index 8b761f8dc..6085bc944 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.js @@ -22,18 +22,19 @@ function Hero({ searchPlaceholder, properties, level, + explorePageSlug, ...props }) { const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg")); const [hoverGeo, setHoverGeo] = useState(null); - const continentLevelZoom = isUpLg ? 2.4 : 2.1; + const continentLevelZoom = isUpLg ? 3 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs const countryLevelZoom = isUpLg ? 6 : 5.25; const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom; - return ( - + {center ? ( ) : null} diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js index e94a3de38..6b4302a5f 100644 --- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js +++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js @@ -3,7 +3,7 @@ exports[` renders unchanged 1`] = `
renders unchanged 1`] = ` class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root" >
renders unchanged 1`] = ` Search for a location

renders unchanged 1`] = ` > diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js index 8b34ab9f2..bd8f60512 100644 --- a/apps/climatemappedafrica/src/components/Hero/Map.js +++ b/apps/climatemappedafrica/src/components/Hero/Map.js @@ -1,11 +1,10 @@ -import { Box } from "@mui/material"; +import { Box, useTheme } from "@mui/material"; import { useRouter } from "next/router"; import PropTypes from "prop-types"; import React from "react"; import { MapContainer, GeoJSON } from "react-leaflet"; import "leaflet/dist/leaflet.css"; -import theme from "@/climatemappedafrica/theme"; function Map({ center, @@ -19,16 +18,17 @@ function Map({ color: "#2A2A2C", weight: 1, opacity: 1, - fillColor: "#fff", dashArray: "2", }, onLayerMouseOver, featuredLocations, + explorePageSlug, }) { const router = useRouter(); const countyCodes = featuredLocations?.map(({ code }) => code); + const theme = useTheme(); const onEachFeature = (feature, layer) => { layer.setStyle({ fillColor: theme.palette.background.default, @@ -55,22 +55,24 @@ function Map({ }); }); layer.on("click", () => { - router.push(`/explore/${feature.properties.code.toLowerCase()}`); + router.push( + `/${explorePageSlug}/${feature.properties.code.toLowerCase()}`, + ); }); } }; return ( ({ + sx={{ position: "relative", - height: { sm: "299px", lg: "471px" }, - width: { sm: "236px", lg: "371px" }, + height: { sm: "350px", lg: "471px" }, + width: { sm: "300px", lg: "500px" }, marginTop: { sm: "55px", lg: "42px" }, "& .leaflet-container": { background: "transparent", }, - })} + }} >
- + ({ }, })); -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 }) { { +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, diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index fbf681288..33104d6b4 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/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"; // TODO(kilemensi): Use HURUmap APIs (or CMS) to pick geographies we'd like to // build pages for at build time (It can't be all geographies @@ -39,7 +40,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 = [] }, @@ -56,6 +58,7 @@ function getNavBar(siteSettings, variant, { slug }) { menus, socialLinks, variant, + locations, }; } @@ -95,6 +98,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); @@ -107,13 +112,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. @@ -126,7 +142,7 @@ export async function getPageProps(api, context) { blockType: "tutorial", }, ]; - blocks = await blockify(explorePageBlocks, api, context, hurumap); + blocks = await blockify(explorePageBlocks, api, context, settings); } return { diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js new file mode 100644 index 000000000..f47e0e99f --- /dev/null +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/PanelOptions.js @@ -0,0 +1,64 @@ +import image from "../../fields/image"; + +const PanelOptions = { + label: "Panel Options", + fields: [ + { + name: "items", + type: "array", + label: "Panel Items", + fields: [ + { + type: "select", + name: "value", + label: "Value", + options: [ + { value: "rich-data", label: "Rich Data" }, + { value: "pin", label: "Pin" }, + ], + localized: true, + }, + image({ + overrides: { + name: "icon", + required: true, + }, + }), + ], + }, + { + type: "group", + label: "Labels", + name: "labels", + fields: [ + { + type: "row", + fields: [ + { + name: "scrollToTop", + type: "text", + label: "Scroll To Top", + defaultValue: "Scroll To Top", + admin: { + width: "50%", + }, + localized: true, + }, + { + name: "dataNotAvailable", + type: "text", + label: "Data Not Available", + defaultValue: "DATA NOT AVAILABLE", + admin: { + width: "50%", + }, + localized: true, + }, + ], + }, + ], + }, + ], +}; + +export default PanelOptions; diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js index 280186b19..047dd2ce7 100644 --- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js @@ -1,3 +1,4 @@ +import PanelOptions from "./PanelOptions"; import Profile from "./Profile"; import RootGeography from "./RootGeography"; import Tutorial from "./Tutorial"; @@ -22,7 +23,7 @@ const HURUMap = { }, { type: "tabs", - tabs: [Profile, RootGeography, Tutorial], + tabs: [Profile, RootGeography, Tutorial, PanelOptions], admin: { condition: (_, siblingData) => !!siblingData?.enableHURUMap, },