stored xml in tutorial redux store

src/actions/tutorialActions.js

@@ -6,8 +6,9 @@ export const tutorialChange = () => (dispatch) => {
   });
 };
 
-export const tutorialCheck = (id, status) => (dispatch, getState) => {
+export const tutorialCheck = (status) => (dispatch, getState) => {
   var tutorialsStatus = getState().tutorial.status;
+  var id = getState().tutorial.currentId;
   tutorialsStatus[id] = {...tutorialsStatus[id], status: status};
   dispatch({
     type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
@@ -16,13 +17,16 @@ export const tutorialCheck = (id, status) => (dispatch, getState) => {
   dispatch(tutorialChange());
 };
 
-export const storeTutorialXml = (id) => (dispatch, getState) => {
+export const storeTutorialXml = (code) => (dispatch, getState) => {
   var tutorialsStatus = getState().tutorial.status;
-  tutorialsStatus[id] = {...tutorialsStatus[id]};
-  dispatch({
-    type: TUTORIAL_XML,
-    payload: tutorialsStatus
-  });
+  var id = getState().tutorial.currentId;
+  if(id){
+    tutorialsStatus[id] = {...tutorialsStatus[id], xml: code};
+    dispatch({
+      type: TUTORIAL_XML,
+      payload: tutorialsStatus
+    });
+  }
 };
 
 export const tutorialId = (id) => (dispatch) => {

src/actions/workspaceActions.js

@@ -2,6 +2,8 @@ import { NEW_CODE, CHANGE_WORKSPACE, CREATE_BLOCK, MOVE_BLOCK, CHANGE_BLOCK, DEL
 
 import * as Blockly from 'blockly/core';
 
+import { storeTutorialXml } from './tutorialActions';
+
 export const workspaceChange = () => (dispatch) => {
   dispatch({
     type: CHANGE_WORKSPACE
@@ -18,11 +20,13 @@ export const onChangeCode = () => (dispatch, getState) => {
     type: NEW_CODE,
     payload: code
   });
+  return code;
 };
 
 export const onChangeWorkspace = (event) => (dispatch, getState) => {
   dispatch(workspaceChange());
-  dispatch(onChangeCode());
+  var code = dispatch(onChangeCode());
+  dispatch(storeTutorialXml(code.xml));
   var stats = getState().workspace.stats;
   if (event.type === Blockly.Events.BLOCK_CREATE) {
     stats.create += event.ids.length;

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
 });