add snackbar to tutorial builder

src/actions/tutorialBuilderActions.js

@@ -220,6 +220,7 @@ export const progress = (inProgress) => (dispatch) => {
 };
 
 export const resetTutorial = () => (dispatch, getState) => {
+  dispatch(jsonString(''));
   dispatch(tutorialTitle(''));
   dispatch(tutorialId(''));
   var steps = [

src/components/Tutorial/Builder/Builder.js

@@ -12,6 +12,7 @@ import Id from './Id';
 import Textfield from './Textfield';
 import Step from './Step';
 import Dialog from '../../Dialog';
+import Snackbar from '../../Snackbar';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -34,14 +35,21 @@ class Builder extends Component {
       open: false,
       title: '',
       content: '',
-      string: false
+      string: false,
+      snackbar: false,
+      message: ''
     };
     this.inputRef = React.createRef();
   }
 
+  componentWillUnmount(){
+    this.reset();
+  }
+
   submit = () => {
     var isError = this.props.checkError();
     if(isError){
+      this.setState({ snackbar: true, message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error'});
       window.scrollTo(0, 0);
     }
     else{
@@ -57,6 +65,7 @@ class Builder extends Component {
 
   reset = () => {
     this.props.resetTutorial();
+    this.setState({ snackbar: true, message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success'});
     window.scrollTo(0, 0);
   }
 
@@ -86,6 +95,7 @@ class Builder extends Component {
         result.steps = [{}];
       }
       this.props.readJSON(result);
+      this.setState({ snackbar: true, message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success'});
     } catch(err){
       console.log(err);
       this.props.progress(false);
@@ -105,6 +115,10 @@ class Builder extends Component {
     this.setState({ open: !this.state });
   }
 
+  toggleSnackbar = () => {
+    this.setState({ snackbar: !this.state, message: '', type: null });
+  }
+
 
   render() {
     return (
@@ -169,6 +183,13 @@ class Builder extends Component {
           : null}
         </Dialog>
 
+        <Snackbar
+          open={this.state.snackbar}
+          onClose={this.toggleSnackbar}
+          message={this.state.message}
+          type={this.state.type}
+        />
+
       </div>
     );
   };

src/components/Tutorial/Builder/Step.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { addStep, removeStep, changeStepIndex } from '../../../actions/tutorialBuilderActions';
 
+import clsx from 'clsx';
+
 import Textfield from './Textfield';
 import StepType from './StepType';
 import BlocklyExample from './BlocklyExample';
@@ -27,6 +29,14 @@ const styles = (theme) => ({
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
     }
+  },
+  delete: {
+    backgroundColor: theme.palette.error.dark,
+    color: theme.palette.error.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.error.dark,
+      color: theme.palette.error.contrastText,
+    }
   }
 });
 
@@ -74,7 +84,7 @@ class Step extends Component {
                 <Tooltip title={`Schritt ${index+1} löschen`} arrow>
                   <IconButton
                     disabled={index === 0}
-                    className={this.props.classes.button}
+                    className={clsx(this.props.classes.button, this.props.classes.delete)}
                     onClick={() => this.props.removeStep(index)}
                   >
                     <FontAwesomeIcon icon={faTrash} size="xs"/>