set show map for mobile dashboards fixed

Author: edbrett

layouts/dashboards/actions.js

@@ -5,7 +5,6 @@ import useRouter from 'utils/router';
 import { track } from 'analytics';
 
 import { setDashboardPromptsSettings } from 'components/prompts/dashboard-prompts/actions';
-import { setShowMap } from 'components/widgets/actions';
 
 export const handleCategoryChange = createThunkAction(
   'handleCategoryChange',
@@ -118,10 +117,6 @@ export const handleLocationChange = createThunkAction(
   }
 );
 
-export const closeMobileMap = createThunkAction('closeMobileMap', () => () => {
-  setShowMap(false);
-});
-
 export const clearScrollTo = createThunkAction('clearScrollTo', () => () => {
   const { query, pathname, pushQuery } = useRouter();
   pushQuery({

layouts/dashboards/component.jsx

@@ -39,7 +39,7 @@ const isServer = typeof window === 'undefined';
 class DashboardsPage extends PureComponent {
   static propTypes = {
     showMapMobile: PropTypes.bool,
-    closeMobileMap: PropTypes.func.isRequired,
+    setShowMap: PropTypes.func.isRequired,
     links: PropTypes.array,
     widgetAnchor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     setWidgetsCategory: PropTypes.func,
@@ -108,15 +108,15 @@ class DashboardsPage extends PureComponent {
   };
 
   renderMap = () => {
-    const { showMapMobile, closeMobileMap } = this.props;
+    const { showMapMobile, setShowMap } = this.props;
 
     return (
       <div className="map-container">
         {showMapMobile && (
           <Button
             theme="square theme-button-light"
             className="close-map-button"
-            onClick={closeMobileMap}
+            onClick={() => setShowMap(false)}
           >
             <Icon icon={closeIcon} />
           </Button>
@@ -196,7 +196,9 @@ class DashboardsPage extends PureComponent {
                   {this.renderMap()}
                 </Sticky>
               </Media>
-              <Media lessThan="md">{this.renderMap()}</Media>
+              <Media lessThan="md" className="mobile-map">
+                {this.renderMap()}
+              </Media>
             </div>
             <MapControls className="map-controls" />
             <Share />

layouts/dashboards/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { setMapSettings } from 'components/map/actions';
-import { setWidgetsCategory } from 'components/widgets/actions';
+import { setWidgetsCategory, setShowMap } from 'components/widgets/actions';
 import { setDashboardPromptsSettings } from 'components/prompts/dashboard-prompts/actions';
 import * as ownActions from './actions';
 import { getDashboardsProps } from './selectors';
@@ -10,6 +10,7 @@ import Component from './component';
 export default connect(getDashboardsProps, {
   ...ownActions,
   setMapSettings,
+  setShowMap,
   setDashboardPromptsSettings,
   setWidgetsCategory,
 })(Component);

layouts/dashboards/selectors.js

@@ -14,8 +14,7 @@ import {
 import CATEGORIES from 'data/categories.json';
 
 // get list data
-const selectShowMap = (state) =>
-  state.location && state.location.query && !!state.location.query.showMap;
+const selectShowMap = (state) => state.widgets?.showMap;
 const selectLocation = (state) => state.location;
 const selectAreaError = (state) => state.areas && state.areas.error;
 const selectLocationType = (state) =>

layouts/dashboards/styles.scss

@@ -30,6 +30,10 @@ $right-panel-width: calc((#{$max-width} * 0.3) + ((100vw - #{$max-width}) / 2));
     }
   }
 
+  .mobile-map {
+    height: 100%;
+  }
+
   .map-panel {
     height: calc(100% - 56px);
     position: fixed;

pages/dashboards/[...location].js

@@ -10,6 +10,7 @@ import { setDashboardPrompts } from 'components/prompts/dashboard-prompts/action
 import {
   setWidgetsSettings,
   setWidgetsCategory,
+  setShowMap,
 } from 'components/widgets/actions';
 import { setAreaOfInterestModalSettings } from 'components/modals/area-of-interest/actions';
 
@@ -66,6 +67,7 @@ const DashboardsPage = (props) => {
       dashboardPrompts,
       category,
       areaOfInterestModal,
+      showMap,
       ...widgets
     } = decodeParamsForState(query) || {};
 
@@ -92,6 +94,10 @@ const DashboardsPage = (props) => {
     if (areaOfInterestModal) {
       dispatch(setAreaOfInterestModalSettings(areaOfInterestModal));
     }
+
+    if (showMap) {
+      dispatch(setShowMap(showMap));
+    }
   }, [fullPathname]);
 
   // when setting the query params from the URL we need to make sure we don't render the map

providers/dashboards-url-provider/selectors.js

@@ -7,6 +7,7 @@ export const selectDashboardPrompts = (state) =>
 export const selectWidgetSettings = (state) => state.widgets?.settings;
 export const selectWidgetsCategory = (state) => state.widgets?.category;
 export const selectAOIModalSettings = (state) => state.areaOfInterestModal;
+export const selectShowMap = (state) => state.widgets?.showMap;
 
 export const getUrlParams = createSelector(
   [
@@ -16,14 +17,16 @@ export const getUrlParams = createSelector(
     selectWidgetSettings,
     selectWidgetsCategory,
     selectAOIModalSettings,
+    selectShowMap,
   ],
   (
     map,
     modalMeta,
     dashboardPrompts,
     widgetsSettings,
     category,
-    areaOfInterestModal
+    areaOfInterestModal,
+    showMap
   ) => {
     return {
       map,
@@ -32,6 +35,7 @@ export const getUrlParams = createSelector(
       ...widgetsSettings,
       category,
       areaOfInterestModal,
+      showMap,
     };
   }
 );