Improve explore page

Signed-off-by: Kipruto <[email protected]>

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

@@ -11,26 +11,26 @@ 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: [
       { color: "primary", onClick },
       { 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([

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 };

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;

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 {

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,
+        },
       ],
     },
   ],