Merge pull request #9991 from BerkeleyTrue/feature/close-map-drawer

Feaure(map): close map drawer on challenge transition

common/app/redux/actions.js

@@ -129,6 +129,15 @@ export const toggleMapDrawer = createAction(
     label: 'Map drawer toggled'
   })
 );
+export const closeMapDrawer = createAction(
+  types.closeMapDrawer,
+  null,
+  () => createEventMeta({
+    category: 'Nav',
+    action: 'clicked',
+    label: 'Map drawer closed'
+  })
+);
 export const toggleMainChat = createAction(
   types.toggleMainChat,
   null,

common/app/redux/reducer.js

@@ -51,6 +51,10 @@ export default handleActions(
       isMapAlreadyLoaded: true,
       isMapDrawerOpen: !state.isMapDrawerOpen
     }),
+    [types.closeMapDrawer]: state => ({
+      ...state,
+      isMapDrawerOpen: false
+    }),
     [types.toggleMainChat]: state => ({
       ...state,
       isMainChatOpen: !state.isMainChatOpen

common/app/redux/types.js

@@ -32,6 +32,7 @@ export default createTypes([
 
   // drawers
   'toggleMapDrawer',
+  'closeMapDrawer',
   'toggleWikiDrawer',
 
   // chat

common/app/routes/challenges/components/map/Challenge.jsx

@@ -8,8 +8,9 @@ import debug from 'debug';
 
 import { updateCurrentChallenge } from '../../redux/actions';
 import { makePanelHiddenSelector } from '../../redux/selectors';
+import { closeMapDrawer } from '../../../../redux/actions';
 
-const bindableActions = { updateCurrentChallenge };
+const bindableActions = { closeMapDrawer, updateCurrentChallenge };
 const makeMapStateToProps = () => createSelector(
   (_, props) => props.dashedName,
   state => state.entities.challenge,
@@ -34,6 +35,7 @@ const makeMapStateToProps = () => createSelector(
 export class Challenge extends PureComponent {
   constructor(...args) {
     super(...args);
+    this.handleChallengeClick = this.handleChallengeClick.bind(this);
   }
   static displayName = 'Challenge';
   static propTypes = {
@@ -45,9 +47,15 @@ export class Challenge extends PureComponent {
     isCompleted: PropTypes.bool,
     isHidden: PropTypes.bool,
     challenge: PropTypes.object,
-    updateCurrentChallenge: PropTypes.func
+    updateCurrentChallenge: PropTypes.func.isRequired,
+    closeMapDrawer: PropTypes.func.isRequired
   };
 
+  handleChallengeClick() {
+    this.props.closeMapDrawer();
+    this.props.updateCurrentChallenge(this.props.challenge);
+  }
+
   renderCompleted(isCompleted, isLocked) {
     if (isLocked || !isCompleted) {
       return null;
@@ -100,9 +108,7 @@ export class Challenge extends PureComponent {
       isCompleted,
       isComingSoon,
       isDev,
-      isHidden,
+      isHidden
-      challenge,
-      updateCurrentChallenge
     } = this.props;
     if (isHidden) {
       return null;
@@ -131,7 +137,7 @@ export class Challenge extends PureComponent {
         key={ title }
         >
         <Link to={ `/challenges/${block}/${dashedName}` }>
-          <span onClick={ () => updateCurrentChallenge(challenge) }>
+          <span onClick={ this.handleChallengeClick }>
             { title }
             { this.renderCompleted(isCompleted, isLocked) }
             { this.renderRequired(isRequired) }