From 7e0fbf1f75fa0790076156eb241c389baff7a0a4 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Tue, 8 Sep 2020 13:42:55 +0200 Subject: [PATCH] current tutorial id stored in redux store --- .idea/workspace.xml | 49 +++++++++ src/actions/tutorialActions.js | 18 ++- src/actions/types.js | 2 + src/components/Tutorial/SolutionCheck.js | 85 ++++++++------- src/components/Tutorial/StepperHorizontal.js | 32 ++---- src/components/Tutorial/StepperVertical.js | 109 ++++++++++--------- src/components/Tutorial/Tutorial.js | 35 ++++-- src/reducers/tutorialReducer.js | 9 +- src/store.js | 2 +- 9 files changed, 214 insertions(+), 127 deletions(-) create mode 100644 .idea/workspace.xml diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..fe7d374 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + 1599559503505 + + + + + + + \ No newline at end of file diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 1628154..5db9da3 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -1,4 +1,4 @@ -import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE } from './types'; +import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID } from './types'; export const tutorialChange = () => (dispatch) => { dispatch({ @@ -15,3 +15,19 @@ export const tutorialCheck = (id, status) => (dispatch, getState) => { }); dispatch(tutorialChange()); }; + +export const storeTutorialXml = (id) => (dispatch, getState) => { + var tutorialsStatus = getState().tutorial.status; + tutorialsStatus[id] = {...tutorialsStatus[id]}; + dispatch({ + type: TUTORIAL_XML, + payload: tutorialsStatus + }); +}; + +export const tutorialId = (id) => (dispatch) => { + dispatch({ + type: TUTORIAL_ID, + payload: id + }); +}; diff --git a/src/actions/types.js b/src/actions/types.js index 28e5e33..11d24ac 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -10,3 +10,5 @@ export const CLEAR_STATS = 'CLEAR_STATS'; export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS'; export const TUTORIAL_ERROR = 'TUTORIAL_ERROR'; export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE'; +export const TUTORIAL_XML = 'TUTORIAL_XML'; +export const TUTORIAL_ID = 'TUTORIAL_ID'; diff --git a/src/components/Tutorial/SolutionCheck.js b/src/components/Tutorial/SolutionCheck.js index 01a9380..9ab5808 100644 --- a/src/components/Tutorial/SolutionCheck.js +++ b/src/components/Tutorial/SolutionCheck.js @@ -9,8 +9,6 @@ import Compile from '../Compile'; import { tutorials } from './tutorials'; -import { withRouter } from 'react-router-dom'; - import { withStyles } from '@material-ui/core/styles'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; @@ -51,56 +49,61 @@ class SolutionCheck extends Component { check = () => { const workspace = Blockly.getMainWorkspace(); - var msg = tutorials[this.props.tutorial].test(workspace); - this.props.tutorialCheck(this.props.tutorial, msg.type); + var msg = tutorials[this.props.currentTutorialId].test(workspace); + this.props.tutorialCheck(this.props.currentTutorialId, msg.type); this.setState({ msg, open: true }); } render() { return ( - tutorials[this.props.tutorial].test ? -
- - this.check()} - > - - - - - {this.state.msg.type === 'error' ? 'Fehler' : 'Erfolg'} - - {this.state.msg.text} - {this.state.msg.type === 'success' ? -
- - +
+ : null} + + + -
- : null} - - - - - - + + + : null ); }; } SolutionCheck.propTypes = { - tutorialCheck: PropTypes.func.isRequired + tutorialCheck: PropTypes.func.isRequired, + currentTutorialId: PropTypes.number }; -export default connect(null, { tutorialCheck })(withRouter(withStyles(styles, {withTheme: true})(SolutionCheck))); +const mapStateToProps = state => ({ + currentTutorialId: state.tutorial.currentId +}); + +export default connect(mapStateToProps, { tutorialCheck })(withStyles(styles, {withTheme: true})(SolutionCheck)); diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index 7197103..a914956 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -49,39 +49,29 @@ const styles = (theme) => ({ class StepperHorizontal extends Component { - state={ - tutorialId: Number(this.props.match.params.tutorialId), - } - - componentDidUpdate(props, state){ - if(state.tutorialId !== Number(this.props.match.params.tutorialId)){ - this.setState({tutorialId: Number(this.props.match.params.tutorialId)}) - } - } - render() { - var tutorialId = this.state.tutorialId; - var tutorialStatus = this.props.status[tutorialId-1].status === 'success' ? 'Success' : - this.props.status[tutorialId-1].status === 'error' ? 'Error' : 'Other'; + var tutorialId = this.props.currentTutorialId; + var tutorialStatus = this.props.status[tutorialId].status === 'success' ? 'Success' : + this.props.status[tutorialId].status === 'error' ? 'Error' : 'Other'; return (
-
: ''}> -

{tutorials[tutorialId-1].title}

+

{tutorials[tutorialId].title}

@@ -93,11 +83,13 @@ class StepperHorizontal extends Component { StepperHorizontal.propTypes = { status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, + currentTutorialId: PropTypes.number.isRequired }; const mapStateToProps = state => ({ change: state.tutorial.change, - status: state.tutorial.status + status: state.tutorial.status, + currentTutorialId: state.tutorial.currentId }); export default connect(mapStateToProps, null)(withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal))); diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index 48ea972..333cd0b 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/src/components/Tutorial/StepperVertical.js @@ -24,7 +24,7 @@ const styles = (theme) => ({ }, stepIcon: { borderStyle: `solid`, - borderWith: '2px', + // borderWidth: '2px', borderRadius: '50%', width: '12px', height: '12px', @@ -72,67 +72,69 @@ const styles = (theme) => ({ }, progressBackground: { backgroundColor: fade(theme.palette.primary.main, 0.2), - height: '100%' + height: '100%', + borderRadius: '2px' } }); class StepperVertical extends Component { - state={ - tutorialArray: Number(this.props.match.params.tutorialId) === 1 ? - tutorials.slice(Number(this.props.match.params.tutorialId)-1, Number(this.props.match.params.tutorialId)+4) - : Number(this.props.match.params.tutorialId) === 2 ? - tutorials.slice(Number(this.props.match.params.tutorialId)-1-1, Number(this.props.match.params.tutorialId)+3) - : Number(this.props.match.params.tutorialId) === tutorials.length ? - tutorials.slice(Number(this.props.match.params.tutorialId)-4-1, Number(this.props.match.params.tutorialId)+4) - : Number(this.props.match.params.tutorialId) === tutorials.length-1 ? - tutorials.slice(Number(this.props.match.params.tutorialId)-3-1, Number(this.props.match.params.tutorialId)+3) - : tutorials.slice(Number(this.props.match.params.tutorialId)-2-1,Number(this.props.match.params.tutorialId)+2), - tutorialId: Number(this.props.match.params.tutorialId), - selectedVerticalTutorialId: Number(this.props.match.params.tutorialId) + constructor(props){ + super(props); + this.state = { + 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 + }; } - componentDidUpdate(props, state){ - if(state.tutorialId !== Number(this.props.match.params.tutorialId)){ + componentDidUpdate(props){ + if(props.currentTutorialId !== this.props.currentTutorialId){ this.setState({ - tutorialArray: Number(this.props.match.params.tutorialId) === 1 ? - tutorials.slice(Number(this.props.match.params.tutorialId)-1, Number(this.props.match.params.tutorialId)+4) - : Number(this.props.match.params.tutorialId) === 2 ? - tutorials.slice(Number(this.props.match.params.tutorialId)-1-1, Number(this.props.match.params.tutorialId)+3) - : Number(this.props.match.params.tutorialId) === tutorials.length ? - tutorials.slice(Number(this.props.match.params.tutorialId)-4-1, Number(this.props.match.params.tutorialId)+4) - : Number(this.props.match.params.tutorialId) === tutorials.length-1 ? - tutorials.slice(Number(this.props.match.params.tutorialId)-3-1, Number(this.props.match.params.tutorialId)+3) - : tutorials.slice(Number(this.props.match.params.tutorialId)-2-1,Number(this.props.match.params.tutorialId)+2), - tutorialId: Number(this.props.match.params.tutorialId), - selectedVerticalTutorialId: Number(this.props.match.params.tutorialId) - }) + 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 + }); } } verticalStepper = (step) => { var newTutorialId = this.state.selectedVerticalTutorialId + step; - var tutorialArray = Number(newTutorialId) === 1 ? - tutorials.slice(newTutorialId-1, newTutorialId+4) - : newTutorialId === 2 ? - tutorials.slice(newTutorialId-1-1, newTutorialId+3) - : newTutorialId === tutorials.length ? - tutorials.slice(newTutorialId-4-1, newTutorialId+4) - : newTutorialId === tutorials.length-1 ? - tutorials.slice(newTutorialId-3-1, newTutorialId+3) - : tutorials.slice(newTutorialId-2-1, newTutorialId+2); + var tutorialArray = newTutorialId === 0 ? + tutorials.slice(newTutorialId, newTutorialId+5) + : newTutorialId === 1 ? + tutorials.slice(newTutorialId-1, newTutorialId+4) + : newTutorialId === tutorials.length-1 ? + tutorials.slice(newTutorialId-4, newTutorialId+5) + : newTutorialId === tutorials.length-2 ? + tutorials.slice(newTutorialId-3, newTutorialId+4) + : tutorials.slice(newTutorialId-2, newTutorialId+3); this.setState({ tutorialArray: tutorialArray, selectedVerticalTutorialId: newTutorialId }); } render() { - var tutorialId = this.state.tutorialId; + var tutorialId = this.props.currentTutorialId; var selectedVerticalTutorialId = this.state.selectedVerticalTutorialId; return ( isWidthUp('sm', this.props.width) ?