Merge pull request #187 from sensebox/add-device-selection

dialog for device selection

package.json

@@ -15,8 +15,6 @@
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@material-ui/core": "^4.11.0",
     "@monaco-editor/react": "^4.3.1",
-    "@sentry/react": "^6.0.0",
-    "@sentry/tracing": "^6.0.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",

src/actions/boardAction.js

@@ -0,0 +1,10 @@
+import {
+    BOARD,
+  } from "./types";
+
+export const setBoard = (board) => (dispatch) => {
+    dispatch({
+      type: BOARD,
+      payload: board,
+    });
+  };

src/actions/types.js

@@ -63,3 +63,6 @@ export const GET_PROJECT = "GET_PROJECT";
 export const GET_PROJECTS = "GET_PROJECTS";
 export const PROJECT_TYPE = "PROJECT_TYPE";
 export const PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION";
+
+//board
+export const BOARD = "BOARD";

src/components/Blockly/BlocklyWindow.js

@@ -43,8 +43,16 @@ class BlocklyWindow extends Component {
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-
     var xml = this.props.initialXml;
+    if (props.selectedBoard !== this.props.selectedBoard) {
+      // change board
+      if(!xml) xml = initialXml;
+      var xmlDom = Blockly.Xml.textToDom(xml);
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+      // var toolbox = workspace.getToolbox();
+      // workspace.updateToolbox(toolbox.toolboxDef_);
+    }
+ 
     // if svg is true, then the update process is done in the BlocklySvg component
     if (props.initialXml !== xml && !this.props.svg) {
       // guarantees that the current xml-code (this.props.initialXml) is rendered
@@ -55,7 +63,7 @@ class BlocklyWindow extends Component {
     if (props.language !== this.props.language) {
       // change language
       if (!xml) xml = initialXml;
-      var xmlDom = Blockly.Xml.textToDom(xml);
+       xmlDom = Blockly.Xml.textToDom(xml);
       Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
       // var toolbox = workspace.getToolbox();
       // workspace.updateToolbox(toolbox.toolboxDef_);
@@ -130,12 +138,14 @@ BlocklyWindow.propTypes = {
   renderer: PropTypes.string.isRequired,
   sounds: PropTypes.bool.isRequired,
   language: PropTypes.string.isRequired,
+  selectedBoard: PropTypes.string.isRequired,
 };
 
 const mapStateToProps = (state) => ({
   renderer: state.general.renderer,
   sounds: state.general.sounds,
   language: state.general.language,
+  selectedBoard: state.board.board,
 });
 
 export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(

src/components/Blockly/blocks/sensebox-led.js

@@ -45,15 +45,11 @@ Blockly.Blocks['sensebox_rgb_led'] = {
 
 Blockly.Blocks['sensebox_ws2818_led_init'] = {
     init: function () {
-
-        var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, '1'],
-        [Blockly.Msg.senseBox_ultrasonic_port_B, '3'], [Blockly.Msg.senseBox_ultrasonic_port_C, '5']];
-
         this.setColour(getColour().sensebox);
         this.appendDummyInput()
             .appendField(Blockly.Msg.senseBox_ws2818_rgb_led_init)
             .appendField("Port:")
-            .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
         this.appendValueInput("BRIGHTNESS", "brightness")
             .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_brightness));
         this.appendValueInput("NUMBER", "number")
@@ -66,15 +62,11 @@ Blockly.Blocks['sensebox_ws2818_led_init'] = {
 
 Blockly.Blocks['sensebox_ws2818_led'] = {
     init: function () {
-
-        var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, '1'],
-        [Blockly.Msg.senseBox_ultrasonic_port_B, '3'], [Blockly.Msg.senseBox_ultrasonic_port_C, '5']];
-
         this.setColour(getColour().sensebox);
         this.appendDummyInput()
             .appendField(Blockly.Msg.senseBox_ws2818_rgb_led)
             .appendField("Port:")
-            .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
         this.appendValueInput("POSITION", "position")
             .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_position));
         this.appendValueInput("COLOR", 'Number')

src/components/Blockly/blocks/sensebox-sensors.js

@@ -114,10 +114,8 @@ Blockly.Blocks["sensebox_sensor_sds011"] = {
       )
       .appendField(Blockly.Msg.senseBox_sds011_dimension)
       .appendField(
-        new Blockly.FieldDropdown([
+        new Blockly.FieldDropdown(
-          [Blockly.Msg.senseBox_sds011_serial1, "Serial1"],
+          selectedBoard().serial),
-          [Blockly.Msg.senseBox_sds011_serial2, "Serial2"],
-        ]),
         "SERIAL"
       );
     this.setOutput(true, Types.DECIMAL.typeName);

src/components/Blockly/generator/sensebox-ble.js

@@ -101,7 +101,6 @@ Blockly.Arduino.sensebox_phyphox_graph = function () {
 Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
   var branch = Blockly.Arduino.statementToCode(this, "sendValues");
   var blocks = this.getDescendants();
-  console.log(blocks);
   var count = 0;
   if (blocks !== undefined) {
     for (var i = 0; i < blocks.length; i++) {
@@ -115,7 +114,6 @@ Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
   var string = "";
 
   for (var j = 1; j <= count; j++) {
-    console.log("append");
     if (string === "") {
       string += `channel${j}`;
     } else if (string !== "") {

src/components/Blockly/generator/sensebox-sd.js

@@ -203,6 +203,5 @@ Blockly.Arduino.sensebox_sd_save_for_osem = function (block) {
   Blockly.Arduino.definitions_["SENSOR_ID" + id + ""] =
     "const char SENSOR_ID" + id + '[] PROGMEM = "' + sensor_id + '";';
   code += "addMeasurement(SENSOR_ID" + id + "," + sensor_value + ");\n";
-  console.log(code);
   return code;
 };

src/components/Blockly/generator/sensebox-web.js

@@ -1,4 +1,12 @@
 import Blockly from "blockly";
+//import store from "../../../store";
+
+// preperations for the esp board
+// var selectedBoard = store.getState().board.board;
+// store.subscribe(() => {
+//   selectedBoard = store.getState().board.board;
+// });
+
 
 /* Wifi connection and openSenseMap Blocks*/
 Blockly.Arduino.sensebox_wifi = function (block) {
@@ -110,3 +118,5 @@ Blockly.Arduino.sensebox_ethernetIp = function () {
   var code = "Ethernet.localIP()";
   return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
+
+

src/components/Blockly/generator/variables.js

@@ -23,7 +23,6 @@ const setVariableFunction = function (defaultValue) {
       .getVariableMap()
       .getAllVariables();
     const myVar = allVars.filter((v) => v.name === variableName)[0];
-    console.log(myVar);
     var code = "";
     if (myVar !== undefined) {
       Blockly.Arduino.variables_[variableName + myVar.type] =

src/components/Blockly/helpers/board.js

@@ -23,6 +23,11 @@ const sensebox_mcu = {
     ["C5", "5"],
     ["C6", "6"],
   ],
+  digitalPinsRGB: [
+    ["A", "1"],
+    ["B", "3"],
+    ["C", "5"],
+  ],
   digitalPinsButton: [
     ["on Board", "0"],
     ["A1", "1"],
@@ -126,6 +131,124 @@ const sensebox_mcu = {
   parseKey: "_*_",
 };
 
-export const selectedBoard = () => {
+//senseBox MCU mini
-  return sensebox_mcu;
+const sensebox_mini = {
+  description: "senseBox Mini",
+  compilerFlag: "arduino:samd",
+  digitalPins: [
+    ["IO1", "1"],
+    ["IO2", "2"],
+  ],
+  digitalPinsLED: [
+    ["BUILTIN_1", "7"],
+    ["BUILTIN_2", "8"],
+    ["IO1", "1"],
+    ["IO2", "2"],
+  ],
+  digitalPinsRGB: [
+    ["on Board", "6"],
+    ["IO1", "1"],
+    ["IO2", "2"],
+  ],
+  digitalPinsButton: [
+    ["on Board", "0"],
+    ["IO1", "1"],
+    ["IO2", "2"],
+
+  ],
+  pwmPins: [
+    ["IO1", "1"],
+    ["IO2", "2"],
+  ],
+  serial: [
+    ["serial", "SerialUSB"],
+    ["serial_1", "Serial1"],
+  ],
+  serialPins: {
+    SerialUSB: [
+      ["RX", ""],
+      ["TX", ""],
+    ],
+    Serial1: [
+      ["RX", "11"],
+      ["TX", "10"],
+    ],
+    Serial2: [
+      ["RX", "13"],
+      ["TX", "12"],
+    ],
+  },
+  serialSpeed: [
+    ["300", "300"],
+    ["600", "600"],
+    ["1200", "1200"],
+    ["2400", "2400"],
+    ["4800", "4800"],
+    ["9600", "9600"],
+    ["14400", "14400"],
+    ["19200", "19200"],
+    ["28800", "28800"],
+    ["31250", "31250"],
+    ["38400", "38400"],
+    ["57600", "57600"],
+    ["115200", "115200"],
+  ],
+  spi: [["SPI", "SPI"]],
+  spiPins: {
+    SPI: [
+      ["MOSI", "19"],
+      ["MISO", "21"],
+      ["SCK", "20"],
+    ],
+  },
+  spiClockDivide: [
+    ["2 (8MHz)", "SPI_CLOCK_DIV2"],
+    ["4 (4MHz)", "SPI_CLOCK_DIV4"],
+    ["8 (2MHz)", "SPI_CLOCK_DIV8"],
+    ["16 (1MHz)", "SPI_CLOCK_DIV16"],
+    ["32 (500KHz)", "SPI_CLOCK_DIV32"],
+    ["64 (250KHz)", "SPI_CLOCK_DIV64"],
+    ["128 (125KHz)", "SPI_CLOCK_DIV128"],
+  ],
+  i2c: [["I2C", "Wire"]],
+  i2cPins: {
+    Wire: [
+      ["SDA", "17"],
+      ["SCL", "16"],
+    ],
+  },
+  i2cSpeed: [
+    ["100kHz", "100000L"],
+    ["400kHz", "400000L"],
+  ],
+  builtinLed: [
+    ["BUILTIN_1", "7"],
+    ["BUILTIN_2", "8"],
+  ],
+  interrupt: [
+    ["interrupt1", "1"],
+    ["interrupt2", "2"],
+  ],
+  analogPins: [
+    ["A1", "A1"],
+    ["A2", "A2"],
+  ],
+  serial_baud_rate: 9600,
+  parseKey: "_*_",
+};
+
+var board = sensebox_mcu
+
+export const setBoard = (selectedBoard) => {
+  if (selectedBoard === "mini"){
+    board = sensebox_mini
+  }
+  else {
+    board = sensebox_mcu
+  }
+}
+
+
+export const selectedBoard = () => {
+  return board;
 };

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

@@ -141,6 +141,7 @@ export const UI = {
 
   button_cancel: "Abbrechen",
   button_close: "Schließen",
+  button_save: "Speichern",
   button_accept: "Bestätigen",
   button_compile: "Kompilieren",
   button_create_variableCreate: "Erstelle Variable",
@@ -181,7 +182,8 @@ export const UI = {
   settings_sounds: "Töne",
   settings_sounds_text:
     "Aktiviere oder Deaktiviere Töne beim hinzufügen und löschen von Blöcken. Standardmäßig deaktiviert",
-
+  settings_board: "Board",
+  settings_board_text: "Wähle dein verwendetes Board aus",
   /**
    * 404
    */
@@ -301,4 +303,12 @@ export const UI = {
   codeeditor_blockly_code: "Lade Blockly Code",
   codeeditor_compile_progress:
     "Dein Code wird nun kompiliert und anschließend auf deinen Computer heruntergeladen",
+
+  /**
+   * Device Selction
+   *  */
+  deviceselection_head: "Welches Board benutzt du?",
+  deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
+  deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
+  deviceselection_footnote_02: "oder die"
 };

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

@@ -176,6 +176,8 @@ export const UI = {
   settings_sounds: "Sound",
   settings_sounds_text:
     "Enable or disable sounds when adding and deleting blocks. Disabled by default",
+  settings_board: "Board",
+  settings_board_text: "Choose your board",
 
   /**
    * 404
@@ -296,4 +298,14 @@ export const UI = {
   codeeditor_blockly_code: "Load blockly code",
   codeeditor_compile_progress:
     "Your code will now be compiled and then downloaded to your computer",
+
+      /**
+   * Device Selction
+   *  */
+  deviceselection_head: "Which board are you using?",
+  deviceselection_keep_selection: "Save my choice (You can change the board later in the settings)",
+  deviceselection_footnote: "Here you can access the old blockly Version for the",
+  deviceselection_footnote_02: "or the",
+
+
 };

src/components/CodeEditor/CodeEditor.js

@@ -38,7 +38,6 @@ const CodeEditor = (props) => {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data);
         if (data.code === "Internal Server Error") {
           setProgress(false);
           setOpen(true);

src/components/CodeEditor/Compile.js

@@ -89,7 +89,6 @@ class Compile extends Component {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data);
         if (data.code === "Internal Server Error") {
           this.setState({
             progress: false,

src/components/CodeEditor/SerialMonitor.js

@@ -27,7 +27,6 @@ const SerialMonitor = () => {
             if (value) {
               //   byte array to string: https://stackoverflow.com/a/37542820
               const text = String.fromCharCode.apply(null, value);
-              console.log(text);
               setSerialPortContent((prevContent) => [
                 ...prevContent,
                 [new Date(), text],

src/components/Content.js

@@ -10,6 +10,7 @@ import Navbar from './Navbar';
 import Footer from './Footer';
 import Routes from './Route/Routes';
 import Cookies from './Cookies';
+import { setBoard } from './Blockly/helpers/board';
 
 class Content extends Component {
 
@@ -19,6 +20,7 @@ class Content extends Component {
     } else if (this.props.language === 'en_US') {
       Blockly.setLocale(En);
     }
+    setBoard(this.props.board)
   }
 
   componentDidUpdate(props) {
@@ -29,6 +31,7 @@ class Content extends Component {
         Blockly.setLocale(En);
       }
     }
+    setBoard(this.props.board)
   }
 
   render() {
@@ -48,7 +51,8 @@ Content.propTypes = {
 };
 
 const mapStateToProps = state => ({
-  language: state.general.language
+  language: state.general.language,
+  board: state.board.board
 });
 
 export default connect(mapStateToProps, null)(Content);

src/components/DeviceSelection.js

@@ -0,0 +1,162 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import Dialog from "./Dialog";
+
+import { withStyles } from "@material-ui/core/styles";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import * as Blockly from "blockly";
+import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
+import { setBoard } from "../actions/boardAction";
+
+const styles = (theme) => ({
+  link: {
+    color: theme.palette.primary.main,
+    textDecoration: "none",
+    "&:hover": {
+      color: theme.palette.primary.main,
+      textDecoration: `underline`,
+    },
+  },
+  label: {
+    fontSize: "0.9rem",
+    color: "grey",
+  },
+});
+
+class DeviceSeclection extends Component {
+  constructor(props) {
+    var previousPageWasAnotherDomain = props.pageVisits === 0;
+    var userWantToKeepBoard = window.localStorage.getItem("board")
+      ? true
+      : false;
+    super(props);
+    this.state = {
+      open: userWantToKeepBoard
+        ? !userWantToKeepBoard
+        : previousPageWasAnotherDomain,
+      selectedBoard : "",
+      saveSettings: false,
+
+    };
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state });
+    if(this.state.saveSettings){
+      window.localStorage.setItem("board", this.state.selectedBoard) 
+    }
+    this.props.setBoard(this.state.selectedBoard)
+
+  };
+
+  onChange = (e) => {
+    if (e.target.checked) {
+      this.setState({ saveSettings: true});
+    } else {
+      this.setState({ saveSettings: false});
+    }
+  };
+
+  onclick = (e, value) => {
+    console.log(e, value)
+    this.setState({selectedBoard: value})
+  };
+
+  render() {
+    return (
+      <Dialog
+        style={{ zIndex: 9999999 }}
+        fullWidth
+        maxWidth={"xl"}
+        open={this.state.open}
+        title={Blockly.Msg.deviceselection_head}
+        content={""}
+        onClick={this.toggleDialog}
+        button={Blockly.Msg.button_accept}
+        disabled={this.state.selectedBoard===""}
+      >
+        <div>
+          <Grid container spacing={2} style={{  textAlign : "center" }}>
+            <Grid item xs={6}>
+            <IconButton onClick={(e) => this.onclick(e, "mcu")}>
+              <Avatar
+                alt="Sensebox MCU"
+                src="/media/hardware/senseboxmcu.png"
+                style={{
+                  border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  width:"20vw",
+                  height: "20vw"
+               }}
+              />
+              </IconButton>
+              <p>senseBox MCU</p>
+            </Grid>
+
+            {/* <Grid item xs={4}>
+            <IconButton onClick={(e) => this.onclick(e, "esp")}>
+              <Avatar
+                alt="Sensebox ESP"
+                src="/media/hardware/senseboxmcu.png"
+                style={{
+                  border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  width:"20vw",
+                  height: "20vw"
+               }}
+              />
+              </IconButton>
+              <p>Sensebox ESP</p>
+            </Grid> */}
+            <Grid item xs={6}>
+              <IconButton onClick={(e) => this.onclick(e, "mini")}>
+              <Avatar
+                alt="Sensebox Mini"
+                src="/media/hardware/senseboxmcumini.png"
+                 style={{
+                  border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
+                  width:"20vw",
+                  height: "20vw"
+               }}
+              />
+              </IconButton>
+              <p>senseBox MCU:mini</p>
+            </Grid>
+          </Grid>
+        </div>
+        <FormControlLabel
+          style={{ marginTop: "20px" }}
+          classes={{ label: this.props.classes.label }}
+          control={
+            <Checkbox
+              size={"small"}
+              value={true}
+              checked={this.state.checked}
+              onChange={(e) => this.onChange(e)}
+              name="dialog"
+              color="primary"
+            />
+          }
+          label={Blockly.Msg.deviceselection_keep_selection}
+        />
+        <Typography variant="body1" >
+          {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="/">senseBox MCU</a>
+        </Typography>
+      </Dialog>
+    );
+  }
+}
+
+DeviceSeclection.propTypes = {
+  pageVisits: PropTypes.number.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  pageVisits: state.general.pageVisits,
+  selectedBoard: state.board.board
+});
+
+export default connect(
+  mapStateToProps,
+  {setBoard}
+)(withStyles(styles, { withTheme: true })(DeviceSeclection));

src/components/Dialog.js

@@ -24,7 +24,7 @@ class Dialog extends Component {
         </DialogContent>
         <DialogActions>
           {this.props.actions ? this.props.actions :
-            <Button onClick={this.props.onClick} color="primary">
+            <Button onClick={this.props.onClick} disabled={this.props.disabled} color="primary">
               {this.props.button}
             </Button>
           }

src/components/Home.js

@@ -12,6 +12,7 @@ import BlocklyWindow from "./Blockly/BlocklyWindow";
 import CodeViewer from "./CodeViewer";
 import TrashcanButtons from "./Workspace/TrashcanButtons";
 import HintTutorialExists from "./Tutorial/HintTutorialExists";
+import DeviceSelection from "./DeviceSelection";
 
 import Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
@@ -186,6 +187,7 @@ class Home extends Component {
             </Grid>
           ) : null}
         </Grid>
+        <DeviceSelection />
         <HintTutorialExists />
         {this.props.platform ? (
           <Dialog

src/components/Settings/DeviceSelector.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setBoard } from '../../actions/boardAction';
+
+import * as Blockly from 'blockly/core';
+
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+class DeviceSelector extends Component {
+
+  componentDidMount(){
+    // Ensure that Blockly.setLocale is adopted in the component.
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
+
+
+  render(){
+    return(
+      <div>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_board}</Typography>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_board_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_board}</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={this.props.selectedBoard}
+            onChange={(e) => this.props.setBoard(e.target.value)}
+          >
+            <MenuItem value="mcu">senseBox MCU</MenuItem>
+            <MenuItem value="mini">senseBox MCU mini</MenuItem>
+          </Select>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+DeviceSelector.propTypes = {
+  setBoard: PropTypes.func.isRequired,
+  selectedBoard: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  selectedBoard: state.board.board
+});
+
+export default connect(mapStateToProps, { setBoard })(DeviceSelector);

src/components/Settings/Settings.js

@@ -12,6 +12,7 @@ import RenderSelector from "./RenderSelector";
 import StatsSelector from "./StatsSelector";
 import OtaSelector from "./OtaSelector";
 import SoundsSelector from "./SoundsSelector";
+import DeviceSelector from "./DeviceSelector";
 
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
@@ -52,6 +53,9 @@ class Settings extends Component {
         <Paper style={{ margin: "10px 0px", padding: "10px" }}>
           <SoundsSelector />
         </Paper>
+        <Paper style={{ margin: "10px 0px", padding: "10px" }}>
+          <DeviceSelector />
+        </Paper>
 
         <Button
           style={{ marginTop: "10px" }}

src/components/Tutorial/Builder/Builder.js

@@ -304,7 +304,6 @@ class Builder extends Component {
           newTutorial.append(`steps[${i}][xml]`, step.xml);
         }
       });
-      console.log(newTutorial);
       return newTutorial;
     }
   };

src/components/Tutorial/Builder/Difficulty.js

@@ -34,13 +34,11 @@ const styles = (theme) => ({
 
 class Difficulty extends Component {
   ratingChanged = (newRating) => {
-    console.log(newRating);
     this.handleChange(newRating);
   };
 
   handleChange = (e) => {
     var value = e;
-    console.log(value);
     if (this.props.property === "difficulty") {
       this.props.tutorialDifficulty(value);
     } else if (this.props.property === "json") {

src/components/Tutorial/Builder/MarkdownEditor.js

@@ -44,7 +44,6 @@ const MarkdownEditor = (props) => {
         headers: { "Content-Type": "multipart/form-data" },
       })
         .then((res) => {
-          console.log(res);
           resolve(
             `${process.env.REACT_APP_BLOCKLY_API}/upload/` + res.data.filename
           );

src/components/Tutorial/Builder/Public.js

@@ -36,7 +36,6 @@ const styles = (theme) => ({
 class Public extends Component {
   handleChange = (e) => {
     var value = e.target.checked;
-    console.log(value);
     if (this.props.property === "public") {
       this.props.tutorialPublic(value);
     } else if (this.props.property === "json") {

src/components/Tutorial/TutorialHome.js

@@ -147,7 +147,6 @@ class TutorialHome extends Component {
     if (this.props.message.id === "GET_TUTORIALS_FAIL") {
       alert(this.props.message.msg);
     }
-    console.log(this.props.user);
   }
 
   componentWillUnmount() {

src/components/User/Login.js

@@ -50,7 +50,6 @@ export class Login extends Component {
       }
       // Check for login error
       else if (message.id === "LOGIN_FAIL") {
-        console.log("login fail");
         this.setState({
           email: "",
           password: "",

src/components/Workspace/AutoSave.js

@@ -37,7 +37,6 @@ class AutoSave extends Component {
   };
 
   componentDidMount() {
-    console.log(this.props.xml);
   }
 
   componentDidUpdate(prevProps) {

src/components/Workspace/Compile.js

@@ -89,7 +89,6 @@ class Compile extends Component {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log(data);
         if (data.code === "Internal Server Error") {
           this.setState({
             progress: false,

src/components/Workspace/WorkspaceFunc.js

@@ -15,9 +15,6 @@ import DeleteProject from "./DeleteProject";
 import CopyCode from "./CopyCode";
 import AutoSave from "./AutoSave";
 class WorkspaceFunc extends Component {
-  componentDidUpdate() {
-    console.log(this.props.autosave);
-  }
 
   render() {
     return (

src/index.js

@@ -3,18 +3,7 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
 
-Sentry.init({
-  dsn: "https://ffe5d54461f64c46b4bed5d77c130d6f@o507523.ingest.sentry.io/5598758",
-  autoSessionTracking: true,
-  integrations: [new Integrations.BrowserTracing()],
-
-  // We recommend adjusting this value in production, or using tracesSampler
-  // for finer control
-  tracesSampleRate: 1.0,
-});
 
 ReactDOM.render(
   <React.StrictMode>

src/reducers/boardReducer.js

@@ -0,0 +1,24 @@
+import { BOARD } from '../actions/types';
+
+const initialValue = () => {
+  if (window.localStorage.getItem("board")) {
+    return window.localStorage.getItem("board");
+  }
+  return "bla";
+};
+
+const initialState = {
+    board: initialValue()
+};
+
+export default function foo(state = initialState, action){
+  switch(action.type){
+    case BOARD:
+      return {
+        ...state,
+        board: action.payload,
+      };
+    default:
+      return state;
+  }
+}

src/reducers/index.js

@@ -6,9 +6,11 @@ import generalReducer from './generalReducer';
 import projectReducer from './projectReducer';
 import messageReducer from './messageReducer';
 import authReducer from './authReducer';
+import boardReducer from './boardReducer'
 
 export default combineReducers({
   auth: authReducer,
+  board: boardReducer, 
   workspace: workspaceReducer,
   tutorial: tutorialReducer,
   builder: tutorialBuilderReducer,