From eea893a071a3bfe716f83a5460032fb2d9ba2811 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Tue, 8 Sep 2020 14:43:30 +0200 Subject: [PATCH] stored xml in tutorial redux store --- src/actions/tutorialActions.js | 18 +++++++++++------- src/actions/workspaceActions.js | 6 +++++- src/components/Blockly/BlocklyWindow.js | 2 +- src/components/CodeViewer.js | 1 - src/components/Tutorial/SolutionCheck.js | 2 +- src/components/Tutorial/StepperVertical.js | 20 ++++++++++---------- src/components/Tutorial/Tutorial.js | 12 ++++++++++-- 7 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 5db9da3..08cf8d7 100644 --- a/src/actions/tutorialActions.js +++ b/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) => { diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js index be36338..a9700c8 100644 --- a/src/actions/workspaceActions.js +++ b/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; diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index e2b21f0..f07d8f0 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/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} > diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js index ac540f5..bdf9677 100644 --- a/src/components/CodeViewer.js +++ b/src/components/CodeViewer.js @@ -83,7 +83,6 @@ class CodeViewer extends Component { render() { var curlyBrackets = '{ }'; var unequal = '<>'; - console.log('render', this.myDiv); return ( { 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 }); } diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index 333cd0b..44187c3 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/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 }); } } diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index cae2bc7..a3383c6 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/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 { - + @@ -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 });