Update store on new challenge

packages/learn/src/templates/Challenges/views/classic/Show.js

@@ -61,6 +61,24 @@ class ShowClassic extends PureComponent {
     updateChallengeMeta(challengeMeta);
   }
 
+  componentDidUpdate(prevProps) {
+    const { data: { challengeNode: { title: prevTitle } } } = prevProps;
+    const {
+      createFiles,
+      initTests,
+      updateChallengeMeta,
+      data: {
+        challengeNode: { files, title: currentTitle, fields: { tests } }
+      },
+      pathContext: { challengeMeta }
+    } = this.props;
+    if (prevTitle !== currentTitle) {
+      createFiles(files);
+      initTests(tests);
+      updateChallengeMeta(challengeMeta);
+    }
+  }
+
   render() {
     const {
       data: {

packages/learn/src/templates/Challenges/views/components/Side-Panel.js

@@ -16,7 +16,8 @@ import Spacer from '../../../../components/util/Spacer';
 import {
   consoleOutputSelector,
   challengeTestsSelector,
-  executeChallenge
+  executeChallenge,
+  initConsole
 } from '../../redux';
 import { descriptionRegex } from '../../../../../utils';
 
@@ -27,12 +28,13 @@ const mapStateToProps = createSelector(
 );
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({ executeChallenge }, dispatch);
+  bindActionCreators({ executeChallenge, initConsole }, dispatch);
 
 const propTypes = {
   description: PropTypes.arrayOf(PropTypes.string),
   executeChallenge: PropTypes.func.isRequired,
   guideUrl: PropTypes.string,
+  initConsole: PropTypes.func.isRequired,
   output: PropTypes.string,
   tests: PropTypes.arrayOf(
     PropTypes.shape({
@@ -49,9 +51,14 @@ export class SidePanel extends PureComponent {
     this.bindTopDiv = this.bindTopDiv.bind(this);
   }
 
-  componentWillUpdate(nextProps) {
-    const { title } = this.props;
-    if (title !== nextProps.title) {
+  componentDidMount() {
+    this.props.initConsole('');
+  }
+
+  componentDidUpdate(prevProps) {
+    const { title, initConsole } = this.props;
+    if (title !== prevProps.title) {
+      initConsole('');
       const node = ReactDom.findDOMNode(this.descriptionTop);
       setTimeout(() => {
         node.scrollIntoView({ behavior: 'smooth' });