cleanup code and update some packages

src/components/Tutorial/SolutionCheck.js

@@ -1,51 +1,49 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { tutorialCheck, tutorialStep } from '../../actions/tutorialActions';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { tutorialCheck, tutorialStep } from "../../actions/tutorialActions";
 
-import { withRouter } from 'react-router-dom';
+import { withRouter } from "react-router-dom";
 
-import Compile from '../Workspace/Compile';
-import Dialog from '../Dialog';
+import Compile from "../Workspace/Compile";
+import Dialog from "../Dialog";
 
-import { checkXml } from '../../helpers/compareXml';
+import { checkXml } from "../../helpers/compareXml";
 
-import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import Button from '@material-ui/core/Button';
+import { withStyles } from "@material-ui/core/styles";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import Button from "@material-ui/core/Button";
 
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import * as Blockly from 'blockly'
+import * as Blockly from "blockly";
 
 const styles = (theme) => ({
   compile: {
     backgroundColor: theme.palette.button.compile,
     color: theme.palette.primary.contrastText,
-    '&:hover': {
+    "&:hover": {
       backgroundColor: theme.palette.button.compile,
       color: theme.palette.primary.contrastText,
-    }
-  }
+    },
+  },
 });
 
 class SolutionCheck extends Component {
-
   state = {
     open: false,
-    msg: ''
-  }
+    msg: "",
+  };
 
   toggleDialog = () => {
     if (this.state.open) {
-      this.setState({ open: false, msg: '' });
-    }
-    else {
+      this.setState({ open: false, msg: "" });
+    } else {
       this.setState({ open: !this.state });
     }
-  }
+  };
 
   check = () => {
     const tutorial = this.props.tutorial;
@@ -53,7 +51,7 @@ class SolutionCheck extends Component {
     var msg = checkXml(step.xml, this.props.xml);
     this.props.tutorialCheck(msg.type, step);
     this.setState({ msg, open: true });
-  }
+  };
 
   render() {
     const steps = this.props.tutorial.steps;
@@ -62,68 +60,74 @@ class SolutionCheck extends Component {
         <Tooltip title={Blockly.Msg.tooltip_check_solution} arrow>
           <IconButton
             className={`solutionCheck ${this.props.classes.compile}`}
-            style={{ width: '40px', height: '40px', marginRight: '5px' }}
+            style={{ width: "40px", height: "40px", marginRight: "5px" }}
             onClick={() => this.check()}
           >
-            <FontAwesomeIcon icon={faClipboardCheck} size="l" />
+            <FontAwesomeIcon icon={faClipboardCheck} size="m" />
           </IconButton>
         </Tooltip>
 
         <Dialog
           style={{ zIndex: 9999999 }}
           fullWidth
-          maxWidth={'sm'}
+          maxWidth={"sm"}
           open={this.state.open}
-          title={this.state.msg.type === 'error' ? 'Fehler' : 'Erfolg'}
+          title={this.state.msg.type === "error" ? "Fehler" : "Erfolg"}
           content={this.state.msg.text}
           onClose={this.toggleDialog}
           onClick={this.toggleDialog}
           button={Blockly.Msg.button_close}
         >
-          {this.state.msg.type === 'success' ?
-            <div style={{ marginTop: '20px', display: 'flex' }}>
+          {this.state.msg.type === "success" ? (
+            <div style={{ marginTop: "20px", display: "flex" }}>
               <Compile />
-              {this.props.activeStep === steps.length - 1 ?
+              {this.props.activeStep === steps.length - 1 ? (
                 <Button
-                  style={{ marginLeft: '10px' }}
+                  style={{ marginLeft: "10px" }}
                   variant="contained"
                   color="primary"
-                  onClick={() => { this.toggleDialog(); this.props.history.push(`/tutorial/`) }}
+                  onClick={() => {
+                    this.toggleDialog();
+                    this.props.history.push(`/tutorial/`);
+                  }}
                 >
                   {Blockly.Msg.button_tutorial_overview}
                 </Button>
-                :
+              ) : (
                 <Button
-                  style={{ marginLeft: '10px' }}
+                  style={{ marginLeft: "10px" }}
                   variant="contained"
                   color="primary"
-                  onClick={() => { this.toggleDialog(); this.props.tutorialStep(this.props.activeStep + 1) }}
+                  onClick={() => {
+                    this.toggleDialog();
+                    this.props.tutorialStep(this.props.activeStep + 1);
+                  }}
                 >
                   {Blockly.Msg.button_next}
                 </Button>
-              }
+              )}
             </div>
-            : null}
+          ) : null}
         </Dialog>
-
       </div>
     );
-  };
+  }
 }
 
-
 SolutionCheck.propTypes = {
   tutorialCheck: PropTypes.func.isRequired,
   tutorialStep: PropTypes.func.isRequired,
   activeStep: PropTypes.number.isRequired,
   xml: PropTypes.string.isRequired,
-  tutorial: PropTypes.object.isRequired
+  tutorial: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   activeStep: state.tutorial.activeStep,
   xml: state.workspace.code.xml,
-  tutorial: state.tutorial.tutorials[0]
+  tutorial: state.tutorial.tutorials[0],
 });
 
-export default connect(mapStateToProps, { tutorialCheck, tutorialStep })(withStyles(styles, { withTheme: true })(withRouter(SolutionCheck)));
+export default connect(mapStateToProps, { tutorialCheck, tutorialStep })(
+  withStyles(styles, { withTheme: true })(withRouter(SolutionCheck))
+);