Merge pull request #43 from Bouncey/feat/introOnBlockClick

Feat: Navigate to intro page on block click

packages/learn/src/__mocks__/gatsby-link.js

@@ -3,4 +3,6 @@ import React from 'react';
 
 const mockComponent = name => props =>
   React.createElement(name, props, props.children);
+
+export const navigateTo = () => {};
 export default mockComponent('MockedLink');

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import Link from 'gatsby-link';
+import Link, { navigateTo } from 'gatsby-link';
 
 import { makeExpandedBlockSelector, toggleBlock } from '../redux';
 import Caret from '../../icons/Caret';
@@ -27,6 +27,23 @@ const propTypes = {
 };
 
 export class Block extends PureComponent {
+  constructor(...props) {
+    super(...props);
+
+    this.handleBlockClick = this.handleBlockClick.bind(this);
+    this.renderChallenges = this.renderChallenges.bind(this);
+  }
+
+  handleBlockClick() {
+    const { blockDashedName, challenges, toggleBlock } = this.props;
+    const blockPath = challenges[0].fields.slug
+      .split('/')
+      .slice(0, -1)
+      .join('/');
+    toggleBlock(blockDashedName);
+    return navigateTo(blockPath);
+  }
+
   renderChallenges(challenges) {
     // TODO: Split this into a Challenge Component and add tests
     return challenges.map(challenge => (
@@ -37,11 +54,11 @@ export class Block extends PureComponent {
   }
 
   render() {
-    const { blockDashedName, challenges, isExpanded, toggleBlock } = this.props;
+    const { challenges, isExpanded } = this.props;
     const { blockName } = challenges[0].fields;
     return (
       <li className={`block ${isExpanded ? 'open' : ''}`}>
-        <div className='map-title' onClick={() => toggleBlock(blockDashedName)}>
+        <div className='map-title' onClick={this.handleBlockClick}>
           <Caret />
           <h5>{blockName}</h5>
         </div>

packages/learn/src/introductions/coding-interview-prep/algorithms/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to the Coding Interview Algorithms
+block: Algorithms
+superBlock: Coding Interview Prep
+---
+## Introduction to the Coding Interview Algorithms
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/coding-interview-prep/data-structures/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to the Coding Interview Data Structure Questions
+block: Data Structures
+superBlock: Coding Interview Prep
+---
+## Introduction to the Coding Interview Data Structure Questions
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/coding-interview-prep/project-euler/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to the Project Euler Problems
+block: Project Euler
+superBlock: Coding Interview Prep
+---
+## Introduction to the Project Euler Problems
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/coding-interview-prep/rosetta-code/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to the Rosetta Code Problems
+block: Rosetta Code
+superBlock: Coding Interview Prep
+---
+## Introduction to the Rosetta Code Problems
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/coding-interview-prep/take-home-projects/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to the Coding Interview Take Home Projects
+block: Take Home Projects
+superBlock: Coding Interview Prep
+---
+## Introduction to the Coding Interview Take Home Projects
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/front-end-libraries/react-and-redux/index.md

@@ -5,4 +5,6 @@ superBlock: Front End Libraries
 ---
 ## Introduction to the React and Redux Challenges
 
-This is a stub introduction.
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/front-end-libraries/react/index.md

@@ -5,4 +5,6 @@ superBlock: Front End Libraries
 ---
 ## Introduction to the React Challenges
 
-This is a stub introduction.
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/front-end-libraries/redux/index.md

@@ -5,4 +5,6 @@ superBlock: Front End Libraries
 ---
 ## Introduction to the Redux Challenges
 
-This is a stub introduction.
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/javascript-algorithms-and-data-structures/basic-algorithm-scripting/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to Basic Algorithm Scripting
+block: Basic Algorithm Scripting
+superBlock: JavaScript Algorithms and Data Structures
+---
+## Introduction to Basic Algorithm Scripting
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/javascript-algorithms-and-data-structures/basic-data-structures/index.md

@@ -5,4 +5,6 @@ superBlock: JavaScript Algorithms and Data Structures
 ---
 ## Introduction to the Basic Data Structure Challenges
 
-This is a stub introduction
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/introductions/responsive-web-design/basic-html-and-html5/index.md

@@ -0,0 +1,10 @@
+---
+title: Introduction to Basic HTML and HTML5
+block: Basic HTML and HTML5
+superBlock: Responsive Web Design
+---
+## Introduction to Basic HTML & HTML5
+
+This introduction is a stub
+
+Help us make it real on [GitHub](https://github.com/freeCodeCamp/learn/tree/master/src/introductions).

packages/learn/src/templates/Challenges/project/Show.js

@@ -26,7 +26,9 @@ const mapDispatchToProps = dispatch =>
       updateChallengeMeta,
       createFiles,
       updateSuccessMessage
-    }, dispatch);
+    },
+    dispatch
+  );
 
 const propTypes = {
   createFiles: PropTypes.func.isRequired,

packages/learn/src/templates/Challenges/redux/code-storage-epic.js

@@ -74,7 +74,6 @@ function clearCodeEpic(action$, { getState }) {
 
 function saveCodeEpic(action$, { getState }) {
   return action$.pipe(
-    tap(console.info),
     ofType(types.executeChallenge),
     // do not save challenge if code is locked
     filter(() => !isCodeLockedSelector(getState())),

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

@@ -20,7 +20,7 @@ const propTypes = {
 
 function renderMenuItems({ edges }) {
   return edges.map(({ node }) => node).map(({ title, fields: { slug } }) => (
-    <Link to={slug}>
+    <Link key={'intro-' + slug} to={slug}>
       <ListGroupItem>{title}</ListGroupItem>
     </Link>
   ));