Merge pull request #50 from Bouncey/fix/mapModal

Fix: map modal

packages/learn/src/components/Map/components/Block.js

@@ -6,6 +6,7 @@ import { createSelector } from 'reselect';
 import Link, { navigateTo } from 'gatsby-link';
 
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
+import { toggleMapModal } from '../../../redux/app';
 import Caret from '../../icons/Caret';
 
 const mapStateToProps = (state, ownProps) => {
@@ -17,13 +18,14 @@ const mapStateToProps = (state, ownProps) => {
 };
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({ toggleBlock }, dispatch);
+  bindActionCreators({ toggleBlock, toggleMapModal }, dispatch);
 
 const propTypes = {
   blockDashedName: PropTypes.string,
   challenges: PropTypes.array,
   isExpanded: PropTypes.bool,
-  toggleBlock: PropTypes.func.isRequired
+  toggleBlock: PropTypes.func.isRequired,
+  toggleMapModal: PropTypes.func.isRequired
 };
 
 export class Block extends PureComponent {
@@ -31,6 +33,7 @@ export class Block extends PureComponent {
     super(...props);
 
     this.handleBlockClick = this.handleBlockClick.bind(this);
+    this.handleChallengeClick = this.handleChallengeClick.bind(this);
     this.renderChallenges = this.renderChallenges.bind(this);
   }
 
@@ -44,11 +47,17 @@ export class Block extends PureComponent {
     return navigateTo(blockPath);
   }
 
+  handleChallengeClick() {
+    this.props.toggleMapModal();
+  }
+
   renderChallenges(challenges) {
     // TODO: Split this into a Challenge Component and add tests
     return challenges.map(challenge => (
       <li className='map-challenge-title' key={challenge.dashedName}>
-        <Link to={challenge.fields.slug}>{challenge.title}</Link>
+        <Link onClick={this.handleChallengeClick} to={challenge.fields.slug}>
+          {challenge.title}
+        </Link>
       </li>
     ));
   }

packages/learn/src/components/Map/components/Block.test.js

@@ -14,12 +14,14 @@ const renderer = new ShallowRenderer();
 
 test('<Block /> not expanded snapshot', () => {
   const toggleSpy = sinon.spy();
+  const toggleMapSpy = sinon.spy();
   const componentToRender = (
     <Block
       blockDashedName='block-a'
       challenges={mockNodes.filter(node => node.block === 'block-a')}
       isExpanded={false}
       toggleBlock={toggleSpy}
+      toggleMapModal={toggleMapSpy}
     />
   );
   const component = renderer.render(componentToRender);
@@ -29,12 +31,14 @@ test('<Block /> not expanded snapshot', () => {
 
 test('<Block expanded snapshot', () => {
   const toggleSpy = sinon.spy();
+  const toggleMapSpy = sinon.spy();
   const componentToRender = (
     <Block
       blockDashedName='block-a'
       challenges={mockNodes.filter(node => node.block === 'block-a')}
       isExpanded={true}
       toggleBlock={toggleSpy}
+      toggleMapModal={toggleMapSpy}
     />
   );
 
@@ -45,11 +49,13 @@ test('<Block expanded snapshot', () => {
 
 test('<Block />  should handle toggle clicks correctly', () => {
   const toggleSpy = sinon.spy();
+  const toggleMapSpy = sinon.spy();
   const props = {
     blockDashedName: 'block-a',
     challenges: mockNodes.filter(node => node.block === 'block-a'),
     isExpanded: false,
-    toggleBlock: toggleSpy
+    toggleBlock: toggleSpy,
+    toggleMapModal: toggleMapSpy
   };
 
   const componentToRender = <Block {...props} />;

packages/learn/src/components/Map/components/__snapshots__/Block.test.js.snap

@@ -35,6 +35,7 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
       className="map-challenge-title"
     >
       <Unknown
+        onClick={[Function]}
         to="/super-block-one/block-a/challenge-one"
       >
         Challenge One
@@ -44,6 +45,7 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
       className="map-challenge-title"
     >
       <Unknown
+        onClick={[Function]}
         to="/super-block-one/block-a/challenge-two"
       >
         Challenge Two
@@ -53,6 +55,7 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
       className="map-challenge-title"
     >
       <Unknown
+        onClick={[Function]}
         to="/super-block-one/block-a/challenge-one"
       >
         Challenge One
@@ -62,6 +65,7 @@ exports[`<Block expanded snapshot: block-expanded 1`] = `
       className="map-challenge-title"
     >
       <Unknown
+        onClick={[Function]}
         to="/super-block-one/block-a/challenge-two"
       >
         Challenge Two

packages/learn/src/components/MapModal/index.js

@@ -11,6 +11,8 @@ import { toggleMapModal, isMapModalOpenSelector } from '../../redux/app';
 
 import Spacer from '../util/Spacer';
 
+import './map-modal.css';
+
 const mapStateToProps = createSelector(isMapModalOpenSelector, show => ({
   show
 }));

packages/learn/src/templates/Introduction/SuperBlockIntro.js

@@ -12,9 +12,7 @@ const propTypes = {
   })
 };
 
-function SuperBlockIntroductionPage(
-  { data: { markdownRemark } }
-) {
+function SuperBlockIntroductionPage({ data: { markdownRemark } }) {
   const { html, frontmatter: { superBlock } } = markdownRemark;
   return (
     <Fragment>