stored xml in tutorial redux store

src/components/Blockly/BlocklyWindow.js

@@ -54,7 +54,7 @@ class BlocklyWindow extends Component {
           drag: true,
           wheel: false
         }}
-        initialXml={initialXml}
+        initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
       >
 
       </BlocklyComponent >

src/components/CodeViewer.js

@@ -83,7 +83,6 @@ class CodeViewer extends Component {
   render() {
     var curlyBrackets = '{ }';
     var unequal = '<>';
-    console.log('render', this.myDiv);
     return (
       <Card style={{height: '100%', maxHeight: '500px'}} ref={this.myDiv}>
         <Accordion

src/components/Tutorial/SolutionCheck.js

@@ -50,7 +50,7 @@ class SolutionCheck extends Component {
   check = () => {
     const workspace = Blockly.getMainWorkspace();
     var msg = tutorials[this.props.currentTutorialId].test(workspace);
-    this.props.tutorialCheck(this.props.currentTutorialId, msg.type);
+    this.props.tutorialCheck(msg.type);
     this.setState({ msg, open: true });
   }
 

src/components/Tutorial/StepperVertical.js

@@ -98,16 +98,16 @@ class StepperVertical extends Component {
   componentDidUpdate(props){
     if(props.currentTutorialId !== this.props.currentTutorialId){
       this.setState({
-        tutorialArray: props.currentTutorialId === 0 ?
-                        tutorials.slice(props.currentTutorialId, props.currentTutorialId+5)
-                        : props.currentTutorialId === 1 ?
-                            tutorials.slice(props.currentTutorialId-1, props.currentTutorialId+4)
-                            : props.currentTutorialId === tutorials.length-1 ?
-                                  tutorials.slice(props.currentTutorialId-4, props.currentTutorialId+5)
-                                : props.currentTutorialId === tutorials.length-2 ?
-                                      tutorials.slice(props.currentTutorialId-3, props.currentTutorialId+4)
-                                    : tutorials.slice(props.currentTutorialId-2, props.currentTutorialId+3),
-        selectedVerticalTutorialId: props.currentTutorialId
+        tutorialArray: this.props.currentTutorialId === 0 ?
+                        tutorials.slice(this.props.currentTutorialId, this.props.currentTutorialId+5)
+                        : this.props.currentTutorialId === 1 ?
+                            tutorials.slice(this.props.currentTutorialId-1, this.props.currentTutorialId+4)
+                            : this.props.currentTutorialId === tutorials.length-1 ?
+                                  tutorials.slice(this.props.currentTutorialId-4, this.props.currentTutorialId+5)
+                                : this.props.currentTutorialId === tutorials.length-2 ?
+                                      tutorials.slice(this.props.currentTutorialId-3, this.props.currentTutorialId+4)
+                                    : tutorials.slice(this.props.currentTutorialId-2, this.props.currentTutorialId+3),
+        selectedVerticalTutorialId: this.props.currentTutorialId
       });
     }
   }

src/components/Tutorial/Tutorial.js

@@ -36,6 +36,10 @@ class Tutorial extends Component {
     }
   }
 
+  componentWillUnmount(){
+    this.props.tutorialId(null);
+  }
+
   onChange = (e, value) => {
     this.setState({ value: value });
   }
@@ -74,7 +78,7 @@ class Tutorial extends Component {
                   <Grid container spacing={2}>
                     <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
                       <SolutionCheck />
-                      <BlocklyWindow />
+                      <BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/>
                     </Grid>
                     <Grid item xs={12} md={6} lg={4}>
                       <Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
@@ -96,10 +100,14 @@ class Tutorial extends Component {
 
 Tutorial.propTypes = {
   tutorialId: PropTypes.func.isRequired,
-  currentTutorialId: PropTypes.number.isRequired
+  currentTutorialId: PropTypes.number.isRequired,
+  status: PropTypes.array.isRequired,
+  change: PropTypes.number.isRequired
 };
 
 const mapStateToProps = state => ({
+  change: state.tutorial.change,
+  status: state.tutorial.status,
   currentTutorialId: state.tutorial.currentId
 });