diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js index d4c131754..9d6ae08b9 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/index.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js @@ -11,7 +11,7 @@ import useStyles from "./useStyles"; import Panel from "@/climatemappedafrica/components/HURUmap/Panel"; -function initialState(profiles, onClick, explorePagePath, initialLocation) { +function initialState(profiles, onClick, explorePagePath, initialLocationCode) { return { profiles: Array.isArray(profiles) ? profiles : [profiles], options: [ @@ -19,18 +19,18 @@ function initialState(profiles, onClick, explorePagePath, initialLocation) { { color: "secondary", onClick }, ], explorePagePath, - initialLocation, + initialLocationCode, }; } function ExplorePage({ - center, initialLocation, explorePagePath, panel: PanelProps = {}, profile: profileProp, ...props }) { + const { center, name: initialLocationCode } = initialLocation; const theme = useTheme(); const classes = useStyles(props); // NOTE: This setState and the corresponding useEffect are "hacks" since at @@ -41,7 +41,12 @@ function ExplorePage({ setGeoCode(code); }; const [state, dispatch] = useExplore( - initialState(profileProp, handleClickTag, explorePagePath, initialLocation), + initialState( + profileProp, + handleClickTag, + explorePagePath, + initialLocationCode, + ), ); useEffect(() => { dispatch({ @@ -176,7 +181,10 @@ function ExplorePage({ ExplorePage.propTypes = { center: PropTypes.arrayOf(PropTypes.number), - initialLocation: PropTypes.string, + initialLocation: PropTypes.shape({ + center: PropTypes.arrayOf(PropTypes.number), + name: PropTypes.string, + }), explorePagePath: PropTypes.string, panel: PropTypes.shape({}), profile: PropTypes.oneOfType([ diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js index 308740a17..0d0ecd9d1 100644 --- a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js +++ b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js @@ -20,7 +20,12 @@ function extendProfileTags(profile, options, explorePagePath) { return { ...other, tags }; } -function initializer({ explorePagePath, initialLocation, profiles, options }) { +function initializer({ + explorePagePath, + initialLocationCode, + profiles, + options, +}) { const [primary, secondary] = profiles; const [primaryOptions, secondaryOptions] = options; @@ -30,12 +35,12 @@ function initializer({ explorePagePath, initialLocation, profiles, options }) { primary: extendProfileTags(primary, primaryOptions, explorePagePath), secondary: extendProfileTags(secondary, secondaryOptions, explorePagePath), explorePagePath, - initialLocation, + initialLocationCode, }; } function reducer(state, action) { - const { explorePagePath, initialLocation } = state; + const { explorePagePath, initialLocationCode } = state; switch (action.type) { case "fetch": { const code = action.payload?.code; @@ -85,7 +90,7 @@ function reducer(state, action) { return state; } case "pin": - if (state.primary.geography.code.toLowerCase() !== initialLocation) { + if (state.primary.geography.code.toLowerCase() !== initialLocationCode) { return { ...state, isPinning: true }; } return { ...state, isPinning: false }; diff --git a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js index 28c213b4b..02097d0bb 100644 --- a/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js +++ b/apps/climatemappedafrica/src/lib/data/blockify/explore-page.js @@ -11,12 +11,13 @@ const fetchProfileGeography = async (geoCode) => { return data; }; -async function explorePage({ - slug: code, - center, - initialLocation, - explorePagePath, -}) { +async function explorePage({ slugs }, _, __, hurumap) { + const { + initialLocation, + page: { value }, + } = hurumap; + const { name } = initialLocation; + const code = slugs.length ? slugs[0] : name; const hurumapProfile = await fetchProfile(); const { locations, preferredChildren, mapType, choropleth } = hurumapProfile; @@ -86,10 +87,9 @@ async function explorePage({ const res = { id: "explore-page", blockType: "explore-page", - center, choropleth, initialLocation, - explorePagePath, + explorePagePath: value.slug, locations, mapType, panel, @@ -99,6 +99,7 @@ async function explorePage({ }; return res; + // return {} } export default explorePage; diff --git a/apps/climatemappedafrica/src/lib/data/common/index.js b/apps/climatemappedafrica/src/lib/data/common/index.js index de19e45a3..5df1234a0 100644 --- a/apps/climatemappedafrica/src/lib/data/common/index.js +++ b/apps/climatemappedafrica/src/lib/data/common/index.js @@ -54,27 +54,6 @@ function getNavBar(siteSettings, variant, { slug }) { }; } -async function processExplorePage(slugs, hurumap, explorePage) { - const { - initialLocation: { name, center }, - } = hurumap; - const slug = slugs.length ? slugs[0] : name; - const blocks = await blockify([ - { - blockType: "explore-page", - center, - initialLocation: name, - slug: slug.trim().toLowerCase(), - explorePagePath: explorePage.slug, - }, - { - blockType: "tutorial", - }, - ]); - - return blocks; -} - export async function getPageProps(api, context) { // For now, ClimatemappedAfrica only supports single paths i.e. /, /about, etc., // so params.slugs[0] is good enough @@ -104,7 +83,17 @@ export async function getPageProps(api, context) { const menus = getNavBar(siteSettings, variant, explorePage); if (slug === explorePage.slug) { - blocks = await processExplorePage(slugs.slice(1), hurumap, explorePage); + // The explore page is a special case. The only block we need to render is map and tutorial. + const explorePageBlocks = [ + { + blockType: "explore-page", + slugs: slugs.slice(1), + }, + { + blockType: "tutorial", + }, + ]; + blocks = await blockify(explorePageBlocks, api, context, hurumap); } return { diff --git a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js index 5e4059533..095a5b69a 100644 --- a/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js +++ b/apps/climatemappedafrica/src/payload/globals/HURUMap/index.js @@ -55,6 +55,15 @@ const HURUMap = { type: "point", defaultValue: [20.0, 4.25], }, + { + name: "pinInitialLocation", + type: "checkbox", + localized: true, + label: { + en: "Allow pinning of initial location", + }, + defaultValue: false, + }, ], }, ],