Feature(challenges): Update title on challenge change

common/app/routes/challenges/components/Show.jsx

@@ -17,6 +17,7 @@ import {
   resetUi
 } from '../redux/actions';
 import { challengeSelector } from '../redux/selectors';
+import { updateTitle } from '../../../redux/actions';
 
 const views = {
   step: Step,
@@ -30,7 +31,8 @@ const bindableActions = {
   fetchChallenge,
   fetchChallenges,
   replaceChallenge,
-  resetUi
+  resetUi,
+  updateTitle
 };
 
 const mapStateToProps = createSelector(
@@ -59,29 +61,35 @@ export class Challenges extends PureComponent {
 
   static propTypes = {
     isStep: PropTypes.bool,
-    fetchChallenges: PropTypes.func,
-    replaceChallenge: PropTypes.func,
-    params: PropTypes.object,
+    fetchChallenges: PropTypes.func.isRequired,
+    replaceChallenge: PropTypes.func.isRequired,
+    params: PropTypes.object.isRequired,
     areChallengesLoaded: PropTypes.bool,
-    resetUi: PropTypes.func
+    resetUi: PropTypes.func.isRequired,
+    updateTitle: PropTypes.func.isRequired
   };
 
-  componentWillUnmount() {
-    this.props.resetUi();
+  componentWillMount() {
+    this.props.updateTitle(this.props.params.dashedName);
   }
+
   componentDidMount() {
     if (!this.props.areChallengesLoaded) {
       this.props.fetchChallenges();
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.params.dashedName !== nextProps.params.dashedName) {
+  componentWillUnmount() {
     this.props.resetUi();
-      this.props.replaceChallenge({
-        dashedName: nextProps.params.dashedName,
-        block: nextProps.params.block
-      });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { block, dashedName } = nextProps.params;
+    const { resetUi, updateTitle, replaceChallenge } = this.props;
+    if (this.props.params.dashedName !== dashedName) {
+      updateTitle(dashedName);
+      resetUi();
+      replaceChallenge({ dashedName, block });
     }
   }
 

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

@@ -9,8 +9,9 @@ import { Col } from 'react-bootstrap';
 import MapHeader from './Header.jsx';
 import SuperBlock from './Super-Block.jsx';
 import { fetchChallenges } from '../../redux/actions';
+import { updateTitle } from '../../../../redux/actions';
 
-const bindableActions = { fetchChallenges };
+const bindableActions = { fetchChallenges, updateTitle };
 const mapStateToProps = createSelector(
   state => state.app.windowHeight,
   state => state.app.navHeight,
@@ -30,9 +31,17 @@ export class ShowMap extends PureComponent {
   static displayName = 'Map';
   static propTypes = {
     superBlocks: PropTypes.array,
-    height: PropTypes.number
+    height: PropTypes.number,
+    updateTitle: PropTypes.func.isRequired,
+    fetchChallenges: PropTypes.func.isRequired
   };
 
+  componentWillMount() {
+    this.props.updateTitle(
+      'A Map to Learn to Code and Become a Software Engineer'
+    );
+  }
+
   renderSuperBlocks(superBlocks) {
     if (!Array.isArray(superBlocks) || !superBlocks.length) {
       return <div>No Super Blocks</div>;