update variable names

src/components/Blockly/BlocklyWindow.js

@@ -1,20 +1,18 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
+import { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
 
-import BlocklyComponent from './BlocklyComponent';
+import BlocklyComponent from "./BlocklyComponent";
-import BlocklySvg from './BlocklySvg';
+import BlocklySvg from "./BlocklySvg";
 
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
-import './blocks/index';
+import "./blocks/index";
-import './generator/index';
+import "./generator/index";
-
-import { initialXml } from './initialXml.js';
 
+import { initialXml } from "./initialXml.js";
 
 class BlocklyWindow extends Component {
-
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
@@ -41,6 +39,7 @@ class BlocklyWindow extends Component {
         Blockly.Events.disableOrphans(event);
       }
     });
+
     Blockly.svgResize(workspace);
   }
 
@@ -64,46 +63,65 @@ class BlocklyWindow extends Component {
       // workspace.updateToolbox(toolbox.toolboxDef_);
     }
     Blockly.svgResize(workspace);
-
   }
 
   render() {
     return (
       <div>
-        <BlocklyComponent ref={this.simpleWorkspace}
+        <BlocklyComponent
+          ref={this.simpleWorkspace}
           style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
-          readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
+          readOnly={
-          trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
+            this.props.readOnly !== undefined ? this.props.readOnly : false
+          }
+          trashcan={
+            this.props.trashcan !== undefined ? this.props.trashcan : true
+          }
           renderer={this.props.renderer}
-          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
+          zoom={{
-            controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
+            // https://developers.google.com/blockly/guides/configure/web/zoom
+            controls:
+              this.props.zoomControls !== undefined
+                ? this.props.zoomControls
+                : true,
             wheel: false,
             startScale: 1,
             maxScale: 3,
             minScale: 0.3,
-            scaleSpeed: 1.2
+            scaleSpeed: 1.2,
           }}
-          grid={this.props.grid !== undefined && !this.props.grid ? {} :
+          grid={
-            { // https://developers.google.com/blockly/guides/configure/web/grid
+            this.props.grid !== undefined && !this.props.grid
+              ? {}
+              : {
+                  // https://developers.google.com/blockly/guides/configure/web/grid
                   spacing: 20,
                   length: 1,
-              colour: '#4EAF47', // senseBox-green
+                  colour: "#4EAF47", // senseBox-green
-              snap: false
+                  snap: false,
-            }}
+                }
-          media={'/media/blockly/'}
+          }
-          move={this.props.move !== undefined && !this.props.move ? {} :
+          media={"/media/blockly/"}
-            { // https://developers.google.com/blockly/guides/configure/web/move
+          move={
+            this.props.move !== undefined && !this.props.move
+              ? {}
+              : {
+                  // https://developers.google.com/blockly/guides/configure/web/move
                   scrollbars: true,
                   drag: true,
-              wheel: false
+                  wheel: false,
-            }}
+                }
-          initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
+          }
-        >
+          initialXml={
-        </BlocklyComponent >
+            this.props.initialXml ? this.props.initialXml : initialXml
-        {this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
+          }
+        ></BlocklyComponent>
+        {this.props.svg && this.props.initialXml ? (
+          <BlocklySvg initialXml={this.props.initialXml} />
+        ) : null}
       </div>
     );
-  };
+  }
 }
 
 BlocklyWindow.propTypes = {
@@ -114,10 +132,12 @@ BlocklyWindow.propTypes = {
   workspaceXML: PropTypes.string.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   renderer: state.general.renderer,
   language: state.general.language.Blockly,
   workspaceXML: state.workspace.code.xml,
 });
 
-export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(
+  BlocklyWindow
+);

src/components/Blockly/blocks/variables.js

@@ -1,43 +1,46 @@
-import Blockly from 'blockly/core';
+import Blockly from "blockly/core";
-import { getColour } from '../helpers/colour';
+import { getColour } from "../helpers/colour";
-import { getCompatibleTypes } from '../helpers/types'
+import { getCompatibleTypes } from "../helpers/types";
 
-
+Blockly.Blocks["variables_set_dynamic"] = {
-Blockly.Blocks['variables_set_dynamic'] = {
   init: function () {
-
     // const type = myVar.type;
     this.setColour(getColour().variables);
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
-        this.appendValueInput('VALUE')
+    this.appendValueInput("VALUE")
-            .appendField('set', 'set')
+      .appendField("set", "set")
-            .appendField('', 'type')
+      .appendField("", "type")
-            .appendField(new Blockly.FieldVariable('VAR'), 'VAR')
+      .appendField(new Blockly.FieldVariable("VAR"), "VAR")
-            .appendField('to');
+      .appendField("to");
   },
   onchange: function (e) {
-        let variableID = this.getFieldValue('VAR');
+    let variableID = this.getFieldValue("VAR");
-        let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
+    let variable = Blockly.getMainWorkspace()
-        this.getField('type').setValue(variable.type);
+      .getVariableMap()
-        this.getInput('VALUE').setCheck(getCompatibleTypes(variable.type));
+      .getVariableById(variableID);
-
+    if (variable !== null) {
-    }
+      this.getField("type").setValue(variable.type);
+      this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
     }
+  },
+};
 
-Blockly.Blocks['variables_get_dynamic'] = {
+Blockly.Blocks["variables_get_dynamic"] = {
   init: function () {
     this.setColour(getColour().variables);
     this.appendDummyInput()
-            .appendField('', 'type')
+      .appendField("", "type")
-            .appendField(new Blockly.FieldVariable('VAR'), 'VAR');
+      .appendField(new Blockly.FieldVariable("VAR"), "VAR");
     this.setOutput(true);
   },
   onchange: function (e) {
-        let variableID = this.getFieldValue('VAR');
+    let variableID = this.getFieldValue("VAR");
-        let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
+    let variable = Blockly.getMainWorkspace()
-        this.getField('type').setValue(variable.type);
+      .getVariableMap()
-
+      .getVariableById(variableID);
+    if (variable !== null) {
+      this.getField("type").setValue(variable.type);
     }
-}
+  },
-
+};

src/components/Blockly/msg/de/ui.js

@@ -10,6 +10,16 @@ export const UI = {
   toolbox_time: "Zeit",
   toolbox_functions: "Funktionen",
   toolbox_variables: "Variablen",
+  variable_NUMBER: "Zahl (int)",
+  variable_SHORT_NUMBER: "char",
+  variable_LONG: "große Zahl (long)",
+  variable_DECIMAL: "Kommazahl (float)",
+  variables_TEXT: "Text (string)",
+  variables_ARRAY: "Array (array)",
+  variables_CHARACTER: "char (char)",
+  variables_BOOLEAN: "Boolean (boolean)",
+  variables_NULL: "void (void)",
+  variables_UNDEF: "undefined",
 
   /**
    * Tooltips

src/components/Blockly/msg/en/ui.js

@@ -10,6 +10,16 @@ export const UI = {
   toolbox_time: "Time",
   toolbox_functions: "Functions",
   toolbox_variables: "Variables",
+  variable_NUMBER: "Number (int)",
+  variable_SHORT_NUMBER: "char",
+  variable_LONG: " Zahl (long)",
+  variable_DECIMAL: "Decimal (float)",
+  variables_TEXT: "Text (string)",
+  variables_ARRAY: "Array (array)",
+  variables_CHARACTER: "char (char)",
+  variables_BOOLEAN: "Boolean (boolean)",
+  variables_NULL: "void (void)",
+  variables_UNDEF: "undefined",
 
   /**
    * Tooltips

src/components/Blockly/toolbox/Toolbox.js

@@ -1,30 +1,43 @@
-import React from 'react';
+import React from "react";
-import { Block, Value, Field, Shadow, Category } from '../';
+import { Block, Value, Field, Shadow, Category } from "../";
-import { getColour } from '../helpers/colour'
+import { getColour } from "../helpers/colour";
-import '@blockly/block-plus-minus';
+import "@blockly/block-plus-minus";
-import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal';
+import { TypedVariableModal } from "@blockly/plugin-typed-variable-modal";
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
-
-
-
 
 class Toolbox extends React.Component {
-
   componentDidUpdate() {
-        this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
+    this.props.workspace.registerToolboxCategoryCallback(
+      "CREATE_TYPED_VARIABLE",
+      this.createFlyout
+    );
 
-        const typedVarModal = new TypedVariableModal(this.props.workspace, 'callbackName', [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'float'], ['TEXT', 'String'], ['ARRAY', 'Array'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']]);
+    const typedVarModal = new TypedVariableModal(
+      this.props.workspace,
+      "callbackName",
+      [
+        [`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
+        [`${Blockly.Msg.variable_NUMBER}`, "int"],
+        [`${Blockly.Msg.variable_LONG}`, "long"],
+        [`${Blockly.Msg.variable_DECIMAL}`, "float"],
+        [`${Blockly.Msg.variables_TEXT}`, "String"],
+        [`${Blockly.Msg.variables_ARRAY}`, "Array"],
+        [`${Blockly.Msg.variables_CHARACTER}`, "char"],
+        [`${Blockly.Msg.variables_BOOLEAN}`, "boolean"],
+        [`${Blockly.Msg.variables_NULL}`, "void"],
+        [`${Blockly.Msg.variables_UNDEF}`, "undefined"],
+      ]
+    );
     typedVarModal.init();
   }
 
   createFlyout(workspace) {
-
     let xmlList = [];
 
     // Add your button and give it a callback name.
-        const button = document.createElement('button');
+    const button = document.createElement("button");
-        button.setAttribute('text', 'Create Typed Variable');
+    button.setAttribute("text", "Create Typed Variable");
-        button.setAttribute('callbackKey', 'callbackName');
+    button.setAttribute("callbackKey", "callbackName");
 
     xmlList.push(button);
 
@@ -33,12 +46,20 @@ class Toolbox extends React.Component {
     const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
     xmlList = xmlList.concat(blockList);
     return xmlList;
-    };
+  }
 
   render() {
     return (
-            <xml xmlns="https://developers.google.com/blockly/xml" id="blockly" style={{ display: 'none' }} ref={this.props.toolbox}>
+      <xml
-                <Category name={Blockly.Msg.toolbox_sensors} colour={getColour().sensebox}>
+        xmlns="https://developers.google.com/blockly/xml"
+        id="blockly"
+        style={{ display: "none" }}
+        ref={this.props.toolbox}
+      >
+        <Category
+          name={Blockly.Msg.toolbox_sensors}
+          colour={getColour().sensebox}
+        >
           <Block type="sensebox_sensor_temp_hum" />
           <Block type="sensebox_sensor_uv_light" />
           <Block type="sensebox_sensor_bmx055_accelerometer" />
@@ -160,16 +181,13 @@ class Toolbox extends React.Component {
           </Block>
           <Block type="sensebox_display_plotDisplay">
             <Value name="Title">
-                            <Block type="text">
+              <Block type="text"></Block>
-                            </Block>
             </Value>
             <Value name="YLabel">
-                            <Block type="text">
+              <Block type="text"></Block>
-                            </Block>
             </Value>
             <Value name="XLabel">
-                            <Block type="text">
+              <Block type="text"></Block>
-                            </Block>
             </Value>
             <Value name="XRange1">
               <Block type="math_number">
@@ -261,16 +279,32 @@ class Toolbox extends React.Component {
           </Block>
           <Block type="sensebox_send_to_osem" />
         </Category>
-                <Category id="catSenseBoxOutput_LoRa" name="  LoRa" colour={getColour().sensebox}>
+        <Category
-                    <Category id="catSenseBoxOutput_LoRa_activation" name="    Aktivierung" colour={getColour().sensebox}>
+          id="catSenseBoxOutput_LoRa"
+          name="  LoRa"
+          colour={getColour().sensebox}
+        >
+          <Category
+            id="catSenseBoxOutput_LoRa_activation"
+            name="    Aktivierung"
+            colour={getColour().sensebox}
+          >
             <Block type="sensebox_lora_initialize_otaa" />
             <Block type="sensebox_lora_initialize_abp" />
           </Category>
-                    <Category id="catSenseBoxOutput_LoRa_loramessage" name="    Lora Message" colour={getColour().sensebox}>
+          <Category
+            id="catSenseBoxOutput_LoRa_loramessage"
+            name="    Lora Message"
+            colour={getColour().sensebox}
+          >
             <Block type="sensebox_lora_message_send" />
             <Block type="sensebox_send_lora_sensor_value" />
           </Category>
-                    <Category id="catSenseBoxOutput_Map" name="    TTN Mapper" colour={getColour().sensebox}>
+          <Category
+            id="catSenseBoxOutput_Map"
+            name="    TTN Mapper"
+            colour={getColour().sensebox}
+          >
             <Block type="sensebox_lora_ttn_mapper">
               <Value name="Latitude">
                 <Block type="sensebox_gps">
@@ -299,7 +333,11 @@ class Toolbox extends React.Component {
               </Value>
             </Block>
           </Category>
-                    <Category id="catSenseBoxOutput_LoRa_cayenne" name="    Cayenne LPP" colour={getColour().sensebox}>
+          <Category
+            id="catSenseBoxOutput_LoRa_cayenne"
+            name="    Cayenne LPP"
+            colour={getColour().sensebox}
+          >
             <Block type="sensebox_lora_cayenne_send" />
             <Block type="sensebox_lora_cayenne_temperature" />
             <Block type="sensebox_lora_cayenne_humidity" />
@@ -310,7 +348,11 @@ class Toolbox extends React.Component {
             <Block type="sensebox_lora_cayenne_gps" />
           </Category>
         </Category>
-                <Category id="webserver" name="Webserver" colour={getColour().webserver}>
+        <Category
+          id="webserver"
+          name="Webserver"
+          colour={getColour().webserver}
+        >
           <Block type="sensebox_initialize_http_server"></Block>
           <Block type="sensebox_http_on_client_connect"></Block>
           <Block type="sensebox_ip_address"></Block>
@@ -338,7 +380,11 @@ class Toolbox extends React.Component {
           <Block type="logic_boolean" />
           <Block type="switch_case" />
         </Category>
-                <Category id="loops" name={Blockly.Msg.toolbox_loops} colour={getColour().loops}>
+        <Category
+          id="loops"
+          name={Blockly.Msg.toolbox_loops}
+          colour={getColour().loops}
+        >
           <Block type="controls_repeat_ext">
             <Value name="TIMES">
               <Block type="math_number">
@@ -377,7 +423,11 @@ class Toolbox extends React.Component {
           <Block type="text_length" />
           <Block type="text_isEmpty" />
         </Category>
-                <Category id="time" name={Blockly.Msg.toolbox_time} colour={getColour().time}>
+        <Category
+          id="time"
+          name={Blockly.Msg.toolbox_time}
+          colour={getColour().time}
+        >
           <Block type="time_delay">
             <Value name="DELAY_TIME_MILI">
               <Block type="math_number">
@@ -397,7 +447,11 @@ class Toolbox extends React.Component {
           <Block type="infinite_loop"></Block>
           <Block type="sensebox_interval_timer"></Block>
         </Category>
-                <Category id="math" name={Blockly.Msg.toolbox_math} colour={getColour().math}>
+        <Category
+          id="math"
+          name={Blockly.Msg.toolbox_math}
+          colour={getColour().math}
+        >
           <Block type="math_number"></Block>
           <Block type="math_arithmetic"></Block>
           <Block type="math_single"></Block>
@@ -450,13 +504,21 @@ class Toolbox extends React.Component {
           </Block>
           <Block type="io_notone"></Block>
         </Category>
-                <Category name={Blockly.Msg.toolbox_variables} colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
+        <Category
+          name={Blockly.Msg.toolbox_variables}
+          colour={getColour().variables}
+          custom="CREATE_TYPED_VARIABLE"
+        ></Category>
         <Category name="Arrays" colour={getColour().arrays}>
           <Block type="lists_create_empty" />
           <Block type="array_getIndex" />
           <Block type="lists_length" />
         </Category>
-                <Category name={Blockly.Msg.toolbox_functions} colour={getColour().procedures} custom="PROCEDURE"></Category>
+        <Category
+          name={Blockly.Msg.toolbox_functions}
+          colour={getColour().procedures}
+          custom="PROCEDURE"
+        ></Category>
         <sep></sep>
         <Category name={Blockly.Msg.toolbox_io} colour={getColour().io}>
           <Block type="io_digitalwrite"></Block>
@@ -489,7 +551,7 @@ class Toolbox extends React.Component {
                 */}
       </xml>
     );
-    };
+  }
 }
 
 export default Toolbox;

src/components/Tutorial/Assessment.js

@@ -1,20 +1,20 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { workspaceName } from '../../actions/workspaceActions';
+import { workspaceName } from "../../actions/workspaceActions";
 
-import BlocklyWindow from '../Blockly/BlocklyWindow';
+import BlocklyWindow from "../Blockly/BlocklyWindow";
-import CodeViewer from '../CodeViewer';
+import CodeViewer from "../CodeViewer";
-import WorkspaceFunc from '../Workspace/WorkspaceFunc';
+import WorkspaceFunc from "../Workspace/WorkspaceFunc";
 
-import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
+import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
-import Grid from '@material-ui/core/Grid';
+import Grid from "@material-ui/core/Grid";
-import Card from '@material-ui/core/Card';
+import Card from "@material-ui/core/Card";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
-import * as Blockly from 'blockly'
+import * as Blockly from "blockly";
+import { initialXml } from "../Blockly/initialXml";
 
 class Assessment extends Component {
-
   componentDidMount() {
     this.props.workspaceName(this.props.name);
   }
@@ -28,48 +28,90 @@ class Assessment extends Component {
   render() {
     var tutorialId = this.props.tutorial._id;
     var currentTask = this.props.step;
-    var status = this.props.status.filter(status => status._id === tutorialId)[0];
+    var status = this.props.status.filter(
-    var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
+      (status) => status._id === tutorialId
+    )[0];
+    var taskIndex = status.tasks.findIndex(
+      (task) => task._id === currentTask._id
+    );
     var statusTask = status.tasks[taskIndex];
 
     return (
-      <div className="assessmentDiv" style={{ width: '100%' }}>
+      <div className="assessmentDiv" style={{ width: "100%" }}>
-        <Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
+        <Typography
-        <div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
+          variant="h4"
-        <Grid container spacing={2} style={{ marginBottom: '5px' }}>
+          style={{
+            float: "left",
+            marginBottom: "5px",
+            height: "40px",
+            display: "table",
+          }}
+        >
+          {currentTask.headline}
+        </Typography>
+        <div style={{ float: "right", height: "40px" }}>
+          <WorkspaceFunc assessment />
+        </div>
+        <Grid container spacing={2} style={{ marginBottom: "5px" }}>
           <Grid item xs={12} md={6} lg={8}>
             <BlocklyWindow
-              initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
+              initialXml={initialXml}
               blockDisabled
-              blocklyCSS={{ height: '65vH' }}
+              blocklyCSS={{ height: "65vH" }}
             />
           </Grid>
-          <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
+          <Grid
-            <Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
+            item
-              <Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
+            xs={12}
+            md={6}
+            lg={4}
+            style={
+              isWidthDown("sm", this.props.width)
+                ? { height: "max-content" }
+                : {}
+            }
+          >
+            <Card
+              style={{
+                height: "calc(50% - 30px)",
+                padding: "10px",
+                marginBottom: "10px",
+              }}
+            >
+              <Typography variant="h5">
+                {Blockly.Msg.tutorials_assessment_task}
+              </Typography>
               <Typography>{currentTask.text}</Typography>
             </Card>
-            <div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
+            <div
+              style={
+                isWidthDown("sm", this.props.width)
+                  ? { height: "500px" }
+                  : { height: "50%" }
+              }
+            >
               <CodeViewer />
             </div>
           </Grid>
         </Grid>
       </div>
     );
-  };
+  }
 }
 
 Assessment.propTypes = {
   status: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
   workspaceName: PropTypes.func.isRequired,
-  tutorial: PropTypes.object.isRequired
+  tutorial: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   change: state.tutorial.change,
   status: state.tutorial.status,
-  tutorial: state.tutorial.tutorials[0]
+  tutorial: state.tutorial.tutorials[0],
 });
 
-export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
+export default connect(mapStateToProps, { workspaceName })(
+  withWidth()(Assessment)
+);

src/components/Tutorial/Instruction.js

@@ -1,57 +1,95 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import Hardware from './Hardware';
+import Hardware from "./Hardware";
-import Requirement from './Requirement';
+import Requirement from "./Requirement";
-import BlocklyWindow from '../Blockly/BlocklyWindow';
+import BlocklyWindow from "../Blockly/BlocklyWindow";
-
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import ReactMarkdown from 'react-markdown'
 
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import ReactMarkdown from "react-markdown";
 
 class Instruction extends Component {
-
   render() {
     var step = this.props.step;
     var isHardware = step.hardware && step.hardware.length > 0;
     var areRequirements = step.requirements && step.requirements.length > 0;
     return (
       <div>
-        <Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
+        <Typography variant="h4" style={{ marginBottom: "5px" }}>
-        <Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
+          {step.headline}
-        {isHardware ?
+        </Typography>
-          <Hardware picture={step.hardware} /> : null}
+        <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
-        {areRequirements > 0 ?
+          <ReactMarkdown
-          <Requirement requirements={step.requirements} /> : null}
+            className={"tutorial"}
-        {step.media ?
+            linkTarget={"_blank"}
-          step.media.picture ?
+            skipHtml={false}
-            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
+          >
-              <img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
+            {step.text}
-            </div>
+          </ReactMarkdown>
-            : step.media.youtube ?
+        </Typography>
-              /*16:9; width: 800px; height: width/16*9=450px*/
+        {isHardware ? <Hardware picture={step.hardware} /> : null}
-              <div style={{ maxWidth: '800px', margin: 'auto' }}>
+        {areRequirements > 0 ? (
-                <div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
+          <Requirement requirements={step.requirements} />
-                  <iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
+        ) : null}
-                </div>
+        {step.media ? (
-              </div>
+          step.media.picture ? (
-              : null
+            <div
-          : null}
+              style={{
-        {step.xml ?
+                display: "flex",
-          <Grid container spacing={2} style={{ marginBottom: '5px' }}>
+                justifyContent: "center",
-            <Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
+                marginBottom: "5px",
-              <BlocklyWindow
+              }}
-                svg
+            >
-                blockDisabled
+              <img
-                initialXml={step.xml}
+                src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
+                alt=""
+                style={{ maxHeight: "40vH", maxWidth: "100%" }}
               />
+            </div>
+          ) : step.media.youtube ? (
+            /*16:9; width: 800px; height: width/16*9=450px*/
+            <div style={{ maxWidth: "800px", margin: "auto" }}>
+              <div
+                style={{
+                  position: "relative",
+                  height: 0,
+                  paddingBottom: "calc(100% / 16 * 9)",
+                }}
+              >
+                <iframe
+                  title={step.media.youtube}
+                  style={{
+                    position: "absolute",
+                    top: "0",
+                    left: "0",
+                    width: "100%",
+                    maxWidth: "800px",
+                    height: "100%",
+                    maxHeight: "450px",
+                  }}
+                  src={`https://www.youtube.com/embed/${step.media.youtube}`}
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                />
+              </div>
+            </div>
+          ) : null
+        ) : null}
+        {step.xml ? (
+          <Grid container spacing={2} style={{ marginBottom: "5px" }}>
+            <Grid
+              item
+              xs={12}
+              style={{ display: "flex", justifyContent: "center" }}
+            >
+              <BlocklyWindow svg blockDisabled initialXml={step.xml} />
             </Grid>
           </Grid>
-          : null}
+        ) : null}
       </div>
     );
-  };
+  }
 }
 
-
 export default Instruction;

src/components/User/Login.js

@@ -1,76 +1,88 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { login } from '../../actions/authActions'
+import { login } from "../../actions/authActions";
-import { clearMessages } from '../../actions/messageActions'
+import { clearMessages } from "../../actions/messageActions";
 
-import { withRouter } from 'react-router-dom';
+import { withRouter } from "react-router-dom";
 
-import Snackbar from '../Snackbar';
+import Snackbar from "../Snackbar";
-import Alert from '../Alert';
+import Alert from "../Alert";
-import Breadcrumbs from '../Breadcrumbs';
+import Breadcrumbs from "../Breadcrumbs";
 
-import Button from '@material-ui/core/Button';
+import Button from "@material-ui/core/Button";
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from "@material-ui/core/IconButton";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from '@material-ui/core/TextField';
+import TextField from "@material-ui/core/TextField";
-import Divider from '@material-ui/core/Divider';
+import Divider from "@material-ui/core/Divider";
-import InputAdornment from '@material-ui/core/InputAdornment';
+import InputAdornment from "@material-ui/core/InputAdornment";
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from "@material-ui/core/CircularProgress";
-import Link from '@material-ui/core/Link';
+import Link from "@material-ui/core/Link";
-import * as Blockly from 'blockly'
+import * as Blockly from "blockly";
 
 export class Login extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
-      redirect: props.location.state ? props.location.state.from.pathname : null,
+      redirect: props.location.state
-      email: '',
+        ? props.location.state.from.pathname
-      password: '',
+        : null,
+      email: "",
+      password: "",
       snackbar: false,
-      type: '',
+      type: "",
-      key: '',
+      key: "",
-      message: '',
+      message: "",
-      showPassword: false
+      showPassword: false,
     };
   }
 
   componentDidUpdate(props) {
     const { message } = this.props;
     if (message !== props.message) {
-      if (message.id === 'LOGIN_SUCCESS') {
+      if (message.id === "LOGIN_SUCCESS") {
         if (this.state.redirect) {
           this.props.history.push(this.state.redirect);
-        }
+        } else {
-        else {
           this.props.history.goBack();
         }
       }
       // Check for login error
-      else if (message.id === 'LOGIN_FAIL') {
+      else if (message.id === "LOGIN_FAIL") {
-        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
+        this.setState({
+          email: "",
+          password: "",
+          snackbar: true,
+          key: Date.now(),
+          message: Blockly.Msg.messages_LOGIN_FAIL,
+          type: "error",
+        });
       }
     }
   }
 
-  onChange = e => {
+  onChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  onSubmit = e => {
+  onSubmit = (e) => {
     e.preventDefault();
     const { email, password } = this.state;
-    if (email !== '' && password !== '') {
+    if (email !== "" && password !== "") {
       // create user object
       const user = {
         email,
-        password
+        password,
       };
       this.props.login(user);
     } else {
-      this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
+      this.setState({
+        snackbar: true,
+        key: Date.now(),
+        message: Blockly.Msg.messages_login_error,
+        type: "error",
+      });
     }
   };
 
@@ -85,12 +97,25 @@ export class Login extends Component {
   render() {
     return (
       <div>
-        <Breadcrumbs content={[{ link: '/user/login', title: Blockly.Msg.button_login }]} />
+        <Breadcrumbs
+          content={[{ link: "/user/login", title: Blockly.Msg.button_login }]}
+        />
 
-        <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
+        <div
+          style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
+        >
           <h1>{Blockly.Msg.login_head}</h1>
           <Alert>
-            {Blockly.Msg.login_osem_account_01} <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> {Blockly.Msg.login_osem_account_02}.
+            {Blockly.Msg.login_osem_account_01}{" "}
+            <Link
+              color="primary"
+              rel="noreferrer"
+              target="_blank"
+              href={"https://opensensemap.org/"}
+            >
+              openSenseMap
+            </Link>{" "}
+            {Blockly.Msg.login_osem_account_02}.
           </Alert>
           <Snackbar
             open={this.state.snackbar}
@@ -99,51 +124,83 @@ export class Login extends Component {
             key={this.state.key}
           />
           <TextField
-            style={{ marginBottom: '10px' }}
+            style={{ marginBottom: "10px" }}
             // variant='outlined'
-            type='text'
+            type="text"
             label={Blockly.Msg.labels_username}
-            name='email'
+            name="email"
             value={this.state.email}
             onChange={this.onChange}
             fullWidth={true}
           />
           <TextField
             // variant='outlined'
-            type={this.state.showPassword ? 'text' : 'password'}
+            type={this.state.showPassword ? "text" : "password"}
             label={Blockly.Msg.labels_password}
-            name='password'
+            name="password"
             value={this.state.password}
             InputProps={{
-              endAdornment:
+              endAdornment: (
-                <InputAdornment
+                <InputAdornment position="end">
-                  position="end"
-                >
                   <IconButton
                     onClick={this.handleClickShowPassword}
                     onMouseDown={this.handleMouseDownPassword}
                     edge="end"
                   >
-                    <FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
+                    <FontAwesomeIcon
+                      size="xs"
+                      icon={this.state.showPassword ? faEyeSlash : faEye}
+                    />
                   </IconButton>
                 </InputAdornment>
+              ),
             }}
             onChange={this.onChange}
             fullWidth={true}
           />
           <p>
-            <Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
+            <Button
-              {this.props.progress ?
+              color="primary"
-                <div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
+              variant="contained"
-                : Blockly.Msg.button_login}
+              onClick={this.onSubmit}
+              style={{ width: "100%" }}
+            >
+              {this.props.progress ? (
+                <div style={{ height: "24.5px" }}>
+                  <CircularProgress color="inherit" size={20} />
+                </div>
+              ) : (
+                Blockly.Msg.button_login
+              )}
             </Button>
           </p>
-          <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
+          <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
-            <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
+            <Link
+              rel="noreferrer"
+              target="_blank"
+              href={"https://opensensemap.org/"}
+              color="primary"
+            >
+              {Blockly.Msg.login_lostpassword}
+            </Link>
           </p>
-          <Divider variant='fullWidth' />
+          <Divider variant="fullWidth" />
-          <p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
+          <p
-            {Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
+            style={{
+              textAlign: "center",
+              paddingRight: "34px",
+              paddingLeft: "34px",
+            }}
+          >
+            {Blockly.Msg.login_createaccount}
+            <Link
+              rel="noreferrer"
+              target="_blank"
+              href={"https://opensensemap.org/"}
+            >
+              openSenseMap
+            </Link>
+            .
           </p>
         </div>
       </div>
@@ -155,12 +212,14 @@ Login.propTypes = {
   message: PropTypes.object.isRequired,
   login: PropTypes.func.isRequired,
   clearMessages: PropTypes.func.isRequired,
-  progress: PropTypes.bool.isRequired
+  progress: PropTypes.bool.isRequired,
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   message: state.message,
-  progress: state.auth.progress
+  progress: state.auth.progress,
 });
 
-export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
+export default connect(mapStateToProps, { login, clearMessages })(
+  withRouter(Login)
+);