Merge pull request #963 from CodeForAfrica/ft/climatemapped-explore-page

ClimateMapped: Explore Page
CodeForAfrica · Oct 25, 2024 · a1e011c · a1e011c
2 parents ee13cbf + 8a6a313
commit a1e011c
Show file tree

Hide file tree

Showing 17 changed files with 417 additions and 98 deletions.
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -11,17 +11,37 @@ import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
-function initialState(profiles, onClick) {
+function initialState(
+  profiles,
+  onClick,
+  explorePagePath,
+  initialLocationCode,
+  pinInitialLocation,
+) {
   return {
     profiles: Array.isArray(profiles) ? profiles : [profiles],
     options: [
       { color: "primary", onClick },
       { color: "secondary", onClick },
     ],
+    explorePagePath,
+    initialLocationCode,
+    pinInitialLocation,
   };
 }
 
-function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
+function ExplorePage({
+  initialLocation,
+  explorePagePath,
+  panel: PanelProps = {},
+  profile: profileProp,
+  ...props
+}) {
+  const {
+    center,
+    name: initialLocationCode,
+    pinInitialLocation,
+  } = initialLocation;
   const theme = useTheme();
   const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
@@ -32,23 +52,43 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
     setGeoCode(code);
   };
   const [state, dispatch] = useExplore(
-    initialState(profileProp, handleClickTag),
+    initialState(
+      profileProp,
+      handleClickTag,
+      explorePagePath,
+      initialLocationCode,
+      pinInitialLocation,
+    ),
   );
   useEffect(() => {
     dispatch({
       type: "reset",
-      payload: initialState(profileProp, handleClickTag),
+      payload: initialState(
+        profileProp,
+        handleClickTag,
+        explorePagePath,
+        initialLocationCode,
+        pinInitialLocation,
+      ),
     });
-  }, [dispatch, profileProp]);
+  }, [
+    dispatch,
+    profileProp,
+    explorePagePath,
+    initialLocationCode,
+    pinInitialLocation,
+  ]);
   useEffect(() => {
     if (geoCode) {
       dispatch({ type: "fetch", payload: { code: geoCode } });
     }
   }, [dispatch, geoCode]);
+
   const router = useRouter();
   const shouldFetch = () =>
     (state.primary.shouldFetch && state.primary.code) ||
     (state.secondary?.shouldFetch && state.secondary?.code);
+
   const { data, error } = useProfileGeography(shouldFetch);
   useEffect(() => {
     if (data) {
@@ -59,13 +99,23 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
     }
   }, [dispatch, data]);
 
+  // Update URL when state.slug changes
+  useEffect(() => {
+    if (state.slug) {
+      const href = `/${explorePagePath}/${state.slug}`;
+      router.push(href, href, { shallow: true });
+    }
+    // router shouldn't part of useEffect dependencies: https://nextjs.org/docs/api-reference/next/router#userouter
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.slug]);
+
   const handleSelectLocation = (payload) => {
     const { code } = payload;
     const newPath =
       state.isPinning || state.isCompare
         ? `${state.primary.geography.code}-vs-${code}`
         : `${code}`;
-    const href = `/explore/${newPath.toLowerCase()}`;
+    const href = `/${explorePagePath}/${newPath.toLowerCase()}`;
     router.push(href, href, { shallow: true });
     const type = state.isPinning && state.isCompare ? "compare" : "fetch";
     dispatch({ type, payload });
@@ -86,14 +136,6 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
     }
     dispatch({ type: "unpin", payload });
   };
-  useEffect(() => {
-    if (state.slug) {
-      const href = `/explore/${state.slug}`;
-      router.push(href, href, { shallow: true });
-    }
-    // router shouldn't part of useEffect dependencies: https://nextjs.org/docs/api-reference/next/router#userouter
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.slug]);
 
   const isLoading = shouldFetch() && !(data || error);
   const {
@@ -119,7 +161,7 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
       >
         <div className={classes.root}>
           <Map
-            center={[0.3051933453207569, 37.908818734483155]}
+            center={center}
             geography={geography}
             secondaryGeography={state.secondary?.geography}
             geometries={geometries}
@@ -159,15 +201,21 @@ function ExplorePage({ panelProps, profile: profileProp, apiUri, ...props }) {
         onSelectLocation={handleSelectLocation}
         primaryProfile={state.primary}
         secondaryProfile={state.secondary}
-        {...panelProps}
+        {...PanelProps}
       />
     </>
   );
 }
 
 ExplorePage.propTypes = {
-  apiUri: PropTypes.string,
-  panelProps: PropTypes.shape({}),
+  center: PropTypes.arrayOf(PropTypes.number),
+  initialLocation: PropTypes.shape({
+    center: PropTypes.arrayOf(PropTypes.number),
+    name: PropTypes.string,
+    pinInitialLocation: PropTypes.bool,
+  }),
+  explorePagePath: PropTypes.string,
+  panel: PropTypes.shape({}),
   profile: PropTypes.oneOfType([
     PropTypes.shape({
       geography: PropTypes.shape({}),

diff --git a/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js b/apps/climatemappedafrica/src/components/ExplorePage/useExplore.js
@@ -2,7 +2,7 @@ import { useReducer } from "react";
 
 import Link from "@/climatemappedafrica/components/Link";
 
-function extendProfileTags(profile, options) {
+function extendProfileTags(profile, options, explorePagePath) {
   const { tags: originalTags, ...other } = profile || {};
   if (!originalTags) {
     return profile;
@@ -12,27 +12,37 @@ function extendProfileTags(profile, options) {
     ...otherTags,
     code,
     component: Link,
-    href: `/explore/${code.toLowerCase()}`,
+    href: `/${explorePagePath}/${code.toLowerCase()}`,
     shallow: true,
     underline: "none",
     ...options,
   }));
   return { ...other, tags };
 }
 
-function initializer({ profiles, options }) {
+function initializer({
+  explorePagePath,
+  initialLocationCode,
+  profiles,
+  pinInitialLocation,
+  options,
+}) {
   const [primary, secondary] = profiles;
   const [primaryOptions, secondaryOptions] = options;
 
   return {
     isPinning: false,
     isCompare: !!(primary && secondary),
-    primary: extendProfileTags(primary, primaryOptions),
-    secondary: extendProfileTags(secondary, secondaryOptions),
+    primary: extendProfileTags(primary, primaryOptions, explorePagePath),
+    secondary: extendProfileTags(secondary, secondaryOptions, explorePagePath),
+    explorePagePath,
+    initialLocationCode,
+    pinInitialLocation,
   };
 }
 
 function reducer(state, action) {
+  const { explorePagePath, initialLocationCode, pinInitialLocation } = state;
   switch (action.type) {
     case "fetch": {
       const code = action.payload?.code;
@@ -67,21 +77,25 @@ function reducer(state, action) {
         );
         if (profileType) {
           const newState = { ...state };
-          newState[profileType] = extendProfileTags(profile, {
-            ...others,
-            color: profileType,
-          });
+          newState[profileType] = extendProfileTags(
+            profile,
+            {
+              ...others,
+              color: profileType,
+            },
+            explorePagePath,
+          );
           return newState;
         }
       }
 
       return state;
     }
     case "pin":
-      if (state.primary.geography.code.toLowerCase() !== "af") {
+      if (state.primary.geography.code.toLowerCase() !== initialLocationCode) {
         return { ...state, isPinning: true };
       }
-      return { ...state, isPinning: false };
+      return { ...state, isPinning: pinInitialLocation };
     case "compare": {
       const code = action.payload?.code;
       if (code) {
@@ -101,9 +115,13 @@ function reducer(state, action) {
         newState.secondary = undefined;
       } else if (state.primary?.geography?.code === code && state.secondary) {
         // NOTE: need to reset color from secondary back to primary as well
-        newState.primary = extendProfileTags(state.secondary, {
-          color: "primary",
-        });
+        newState.primary = extendProfileTags(
+          state.secondary,
+          {
+            color: "primary",
+          },
+          explorePagePath,
+        );
         newState.secondary = undefined;
       }
       newState.secondary = undefined;

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -13,14 +13,14 @@ import Section from "@/climatemappedafrica/components/Section";
 const Map = dynamic(() => import("./Map"), { ssr: false });
 
 function Hero({
+  center,
   comment,
   title,
   subtitle,
   searchLabel,
   featuredLocations,
   searchPlaceholder,
   properties,
-  location: { center },
   level,
   ...props
 }) {
@@ -151,6 +151,7 @@ function Hero({
 }
 
 Hero.propTypes = {
+  center: PropTypes.arrayOf(PropTypes.number),
   comment: PropTypes.string,
   subtitle: PropTypes.arrayOf(PropTypes.shape({})),
   searchLabel: PropTypes.string,

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -64,6 +64,7 @@ exports[`<Hero /> renders unchanged 1`] = `
               blocktype="hero"
               boundary="[object Object]"
               class="MuiInputBase-root makeStyles-inputRoot-8 MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1illudf-MuiInputBase-root"
+              location="[object Object]"
               slug="hero"
             >
               <input

diff --git a/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/ExploreNavigation/index.js
@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
   },
 }));
 
-function ExploreNavigation({ logo, variant }) {
+function ExploreNavigation({ explorePagePath, logo, variant }) {
   const classes = useStyles();
   const { setIsOpen } = useTour();
 
@@ -71,6 +71,7 @@ function ExploreNavigation({ logo, variant }) {
           >
             <DropdownSearch
               icon={SearchIcon}
+              href={explorePagePath}
               placeholder="Search for a Location" // TODO: Read from cms
               variant={variant}
               classes={{

diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
@@ -151,7 +151,14 @@ const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="left" timeout={1000} ref={ref} {...props} />;
 });
 
-function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) {
+function MobileNavigation({
+  drawerLogo,
+  explorePagePath,
+  logo,
+  menus,
+  socialLinks,
+  ...props
+}) {
   const classes = useStyles(props);
   const [open, setOpen] = useState(false);
   const router = useRouter();
@@ -277,6 +284,7 @@ function MobileNavigation({ drawerLogo, logo, menus, socialLinks, ...props }) {
                   }}
                 >
                   <DropdownSearch
+                    href={explorePagePath}
                     classes={{
                       root: classes.search,
                       inputRoot: classes.searchInput,