diff --git a/common/app/redux/actions.js b/common/app/redux/actions.js index 8fa279ad53..47569c12ef 100644 --- a/common/app/redux/actions.js +++ b/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, diff --git a/common/app/redux/reducer.js b/common/app/redux/reducer.js index 3458f747d3..b73b20cccf 100644 --- a/common/app/redux/reducer.js +++ b/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 diff --git a/common/app/redux/types.js b/common/app/redux/types.js index db5891992f..503130b93c 100644 --- a/common/app/redux/types.js +++ b/common/app/redux/types.js @@ -32,6 +32,7 @@ export default createTypes([ // drawers 'toggleMapDrawer', + 'closeMapDrawer', 'toggleWikiDrawer', // chat diff --git a/common/app/routes/challenges/components/map/Challenge.jsx b/common/app/routes/challenges/components/map/Challenge.jsx index 1051ae8962..202bb70e69 100644 --- a/common/app/routes/challenges/components/map/Challenge.jsx +++ b/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, - challenge, - updateCurrentChallenge + isHidden } = this.props; if (isHidden) { return null; @@ -131,7 +137,7 @@ export class Challenge extends PureComponent { key={ title } > - updateCurrentChallenge(challenge) }> + { title } { this.renderCompleted(isCompleted, isLocked) } { this.renderRequired(isRequired) }