diff --git a/client/src/components/Map/Map.js b/client/src/components/Map/Map.js
index e67608db5d..fda9140dd6 100644
--- a/client/src/components/Map/Map.js
+++ b/client/src/components/Map/Map.js
@@ -1,14 +1,20 @@
import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import uniq from 'lodash/uniq';
+import { createSelector } from 'reselect';
import SuperBlock from './components/SuperBlock';
import Spacer from '../helpers/Spacer';
import './map.css';
import { ChallengeNode } from '../../redux/propTypes';
+import { toggleSuperBlock, toggleBlock, resetExpansion } from './redux';
+import { currentChallengeIdSelector } from '../../redux';
const propTypes = {
+ currentChallengeId: PropTypes.string,
introNodes: PropTypes.arrayOf(
PropTypes.shape({
fields: PropTypes.shape({ slug: PropTypes.string.isRequired }),
@@ -18,10 +24,46 @@ const propTypes = {
})
})
),
- nodes: PropTypes.arrayOf(ChallengeNode)
+ nodes: PropTypes.arrayOf(ChallengeNode),
+ resetExpansion: PropTypes.func,
+ toggleBlock: PropTypes.func.isRequired,
+ toggleSuperBlock: PropTypes.func.isRequired
};
-class ShowMap extends Component {
+const mapStateToProps = state => {
+ return createSelector(
+ currentChallengeIdSelector,
+ currentChallengeId => ({
+ currentChallengeId
+ })
+ )(state);
+};
+
+function mapDispatchToProps(dispatch) {
+ return bindActionCreators(
+ {
+ resetExpansion,
+ toggleSuperBlock,
+ toggleBlock
+ },
+ dispatch
+ );
+}
+
+export class Map extends Component {
+ componentDidMount() {
+ this.initializeExpandedState(this.props.currentChallengeId);
+ }
+
+ initializeExpandedState(currentChallengeId) {
+ this.props.resetExpansion();
+ const { superBlock, block } = currentChallengeId
+ ? this.props.nodes.find(node => node.id === currentChallengeId)
+ : this.props.nodes[0];
+ this.props.toggleBlock(block);
+ this.props.toggleSuperBlock(superBlock);
+ }
+
renderSuperBlocks(superBlocks) {
const { nodes, introNodes } = this.props;
return superBlocks.map(superBlock => (
@@ -48,7 +90,10 @@ class ShowMap extends Component {
}
}
-ShowMap.displayName = 'Map';
-ShowMap.propTypes = propTypes;
+Map.displayName = 'Map';
+Map.propTypes = propTypes;
-export default ShowMap;
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Map);
diff --git a/client/src/components/Map/Map.test.js b/client/src/components/Map/Map.test.js
index 69714a9c80..3b3479f8be 100644
--- a/client/src/components/Map/Map.test.js
+++ b/client/src/components/Map/Map.test.js
@@ -1,20 +1,105 @@
-/* global expect */
+/* global expect jest */
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
-import Enzyme from 'enzyme';
+import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
+import store from 'store';
-import Map from './Map';
+import { Map } from './Map';
import mockNodes from '../../__mocks__/map-nodes';
import mockIntroNodes from '../../__mocks__/intro-nodes';
Enzyme.configure({ adapter: new Adapter() });
const renderer = new ShallowRenderer();
+const baseProps = {
+ introNodes: mockIntroNodes,
+ nodes: mockNodes,
+ toggleBlock: () => {},
+ toggleSuperBlock: () => {},
+ resetExpansion: () => {}
+};
+
test(' snapshot', () => {
- const component = renderer.render(
-
+ const componentToRender = (
+