diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js deleted file mode 100644 index dd0a5d4..0000000 --- a/src/actions/tutorialActions.js +++ /dev/null @@ -1,24 +0,0 @@ -import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE } from './types'; - -import { tutorials } from '../components/Tutorial/tutorials'; - -export const tutorialChange = () => (dispatch) => { - dispatch({ - type: TUTORIAL_CHANGE - }); -}; - -export const tutorialCheck = (id, status) => (dispatch, getState) => { - var tutorialsStatus = getState().tutorial.status ? - getState().tutorial.status - : new Array(tutorials.length).fill({}); - tutorialsStatus[id].status = status; - console.log(tutorials); - dispatch({ - type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, - payload: tutorialsStatus - }); - dispatch(tutorialChange()); - // update locale storage - sync with redux store - window.localStorage.setItem('tutorial', JSON.stringify(tutorialsStatus)); -}; diff --git a/src/actions/types.js b/src/actions/types.js index 28e5e33..c0be6c2 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -5,8 +5,3 @@ export const MOVE_BLOCK = 'MOVE_BLOCK'; export const CHANGE_BLOCK = 'CHANGE_BLOCK'; export const DELETE_BLOCK = 'DELETE_BLOCK'; export const CLEAR_STATS = 'CLEAR_STATS'; - - -export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS'; -export const TUTORIAL_ERROR = 'TUTORIAL_ERROR'; -export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE'; diff --git a/src/components/Compile.js b/src/components/Compile.js index a6c86c2..1d0f15c 100644 --- a/src/components/Compile.js +++ b/src/components/Compile.js @@ -62,7 +62,7 @@ class Compile extends Component { return (
@@ -70,7 +70,7 @@ class Compile extends Component { Fehler - Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal. + Etwas ist beim Compilieren schief gelaufen. Versuche es nochmal. -
- : null} - - - - - - - : null - ); - }; -} - -SolutionCheck.propTypes = { - tutorialCheck: PropTypes.func.isRequired -}; - -export default connect(null, { tutorialCheck })(withRouter(withStyles(styles, {withTheme: true})(SolutionCheck))); diff --git a/src/components/Tutorial/StepperHorizontal.js b/src/components/Tutorial/StepperHorizontal.js index 7197103..510d326 100644 --- a/src/components/Tutorial/StepperHorizontal.js +++ b/src/components/Tutorial/StepperHorizontal.js @@ -1,12 +1,8 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; -import clsx from 'clsx'; - -import { tutorials } from './tutorials'; +import tutorials from './tutorials.json'; import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; @@ -15,11 +11,9 @@ import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; -import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - const styles = (theme) => ({ stepper: { + backgroundColor: fade(theme.palette.primary.main, 0.6), width: 'calc(100% - 40px)', borderRadius: '25px', padding: '0 20px', @@ -27,23 +21,8 @@ const styles = (theme) => ({ display: 'flex', justifyContent: 'space-between' }, - stepperSuccess: { - backgroundColor: fade(theme.palette.primary.main, 0.6), - }, - stepperError: { - backgroundColor: fade(theme.palette.error.dark, 0.6), - }, - stepperOther: { - backgroundColor: fade(theme.palette.secondary.main, 0.6), - }, color: { backgroundColor: 'transparent ' - }, - iconDivSuccess: { - color: theme.palette.primary.main - }, - iconDivError: { - color: theme.palette.error.dark } }); @@ -61,10 +40,8 @@ class StepperHorizontal extends Component { 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'; return ( -
+
: ''}> +

{tutorials[tutorialId-1].title}

@@ -90,14 +67,4 @@ class StepperHorizontal extends Component { }; } -StepperHorizontal.propTypes = { - status: PropTypes.array.isRequired, - change: PropTypes.number.isRequired, -}; - -const mapStateToProps = state => ({ - change: state.tutorial.change, - status: state.tutorial.status -}); - -export default connect(mapStateToProps, null)(withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal))); +export default withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal)); diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js index 48ea972..7d89bb8 100644 --- a/src/components/Tutorial/StepperVertical.js +++ b/src/components/Tutorial/StepperVertical.js @@ -1,12 +1,10 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; import { withRouter, Link } from 'react-router-dom'; import clsx from 'clsx'; -import { tutorials } from './tutorials'; +import tutorials from './tutorials.json'; import { fade } from '@material-ui/core/styles/colorManipulator'; import { withStyles } from '@material-ui/core/styles'; @@ -22,44 +20,33 @@ const styles = (theme) => ({ padding: 0, width: '30px', }, - stepIcon: { - borderStyle: `solid`, - borderWith: '2px', + stepIconSmall: { + border: `2px solid ${theme.palette.primary.main}`, borderRadius: '50%', width: '12px', height: '12px', margin: '0 auto' }, stepIconMedium: { + border: `2px solid ${theme.palette.primary.main}`, + borderRadius: '50%', width: '18px', height: '18px', + margin: '0 auto' }, stepIconLarge: { + border: `2px solid ${theme.palette.primary.main}`, + borderRadius: '50%', width: '24px', height: '24px' }, stepIconTransparent: { - borderColor: `transparent`, + border: `2px solid transparent`, cursor: 'default' }, - stepIconSuccess: { - borderColor: theme.palette.primary.main, - }, - stepIconError: { - borderColor: theme.palette.error.dark, - }, - stepIconOther: { - borderColor: theme.palette.secondary.main, - }, - stepIconActiveSuccess: { + stepIconActive: { backgroundColor: fade(theme.palette.primary.main, 0.6) }, - stepIconActiveError: { - backgroundColor: fade(theme.palette.error.dark, 0.6) - }, - stepIconActiveOther: { - backgroundColor: fade(theme.palette.secondary.main, 0.6) - }, progress: { position: 'absolute', top: 0, @@ -89,7 +76,7 @@ class StepperVertical extends Component { 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) + verticalTutorialId: Number(this.props.match.params.tutorialId) } componentDidUpdate(props, state){ @@ -105,13 +92,13 @@ class StepperVertical extends Component { 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) + verticalTutorialId: Number(this.props.match.params.tutorialId) }) } } verticalStepper = (step) => { - var newTutorialId = this.state.selectedVerticalTutorialId + step; + var newTutorialId = this.state.verticalTutorialId + step; var tutorialArray = Number(newTutorialId) === 1 ? tutorials.slice(newTutorialId-1, newTutorialId+4) : newTutorialId === 2 ? @@ -121,31 +108,31 @@ class StepperVertical extends Component { : newTutorialId === tutorials.length-1 ? tutorials.slice(newTutorialId-3-1, newTutorialId+3) : tutorials.slice(newTutorialId-2-1, newTutorialId+2); - this.setState({ tutorialArray: tutorialArray, selectedVerticalTutorialId: newTutorialId }); + this.setState({ tutorialArray: tutorialArray, verticalTutorialId: newTutorialId }); } render() { var tutorialId = this.state.tutorialId; - var selectedVerticalTutorialId = this.state.selectedVerticalTutorialId; + var verticalTutorialId = this.state.verticalTutorialId; return ( isWidthUp('sm', this.props.width) ?
-
+
+ style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
+ style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
{this.state.tutorialArray.map((tutorial, i) => { - var index = this.state.tutorialArray.indexOf(tutorials[selectedVerticalTutorialId-1]); - var verticalTutorialId = i === index ? selectedVerticalTutorialId : selectedVerticalTutorialId - index + i; - var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' : - this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other'; + var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]); return ( 0 ? tutorial.title : ''} placement='right' arrow > - + @@ -188,7 +172,7 @@ class StepperVertical extends Component {