outsourcing BlocklyComponent to blockly/BlocklyWindow.js

src/App.css

@@ -3,5 +3,5 @@
   overflow: hidden;
   display: block;
   position: relative;
-  padding-bottom: 60px; /* height of your footer + 30px*/y
+  padding-bottom: 60px; /* height of your footer + 30px*/
 }

src/App.js

@@ -5,6 +5,8 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import store from './store';
 
+import './App.css';
+
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
 import Navbar from './components/Navbar';
@@ -27,9 +29,7 @@ function App() {
         <Router>
           <div className="wrapper">
             <Navbar />
-            <div style={{ margin: '0 22px' }}>
-              <Routes />
-            </div>
+            <Routes />
             <Footer />
           </div>
         </Router>

src/components/Blockly/BlocklyComponent.css

@@ -1,4 +1,6 @@
 #blocklyDiv {
-  height: 60vH;
-  width: 50%;
+  height: 100%;
+  min-height: 500px;
+  width: 100%;
+  border: 1px solid #4EAF47;
 }

src/components/Blockly/BlocklyWindow.js

@@ -1,31 +1,28 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { onChangeWorkspace } from '../../actions/workspaceActions';
 
-import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
+import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './';
 import * as Blockly from 'blockly/core';
-import * as De from './Blockly/msg/de'; // de locale files
+import * as De from './msg/de'; // de locale files
 //import * as En from './Blockly/msg/en'; // de locale files
-import './Blockly/blocks/index';
-import './Blockly/generator/index';
+import './blocks/index';
+import './generator/index';
 
 
-class BlocklyView extends Component {
+class BlocklyWindow extends Component {
+
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    this.state = {
-      generatedCode: 'Click text'
-    }
   }
 
   componentDidMount() {
-    let workspace = Blockly.getMainWorkspace();
-    workspace.addChangeListener(this.generateCode);
-  }
-
-  generateCode = () => {
-    var code = Blockly.Arduino.workspaceToCode(this.workspace);
-    console.log(code);
-    this.setState({ generatedCode: code })
+    const workspace = Blockly.getMainWorkspace();
+    workspace.addChangeListener((event) => {
+      this.props.onChangeWorkspace(event);
+    });
   }
 
   render() {
@@ -33,11 +30,25 @@ class BlocklyView extends Component {
       <BlocklyComponent ref={this.simpleWorkspace}
         readOnly={false}
         trashcan={true}
+        zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
+          controls: true,
+          wheel: true,
+          startScale: 1.0,
+          maxScale: 3,
+          minScale: 0.3,
+          scaleSpeed: 1.2
+        }}
+        grid={{ // https://developers.google.com/blockly/guides/configure/web/grid
+          spacing: 20,
+          length: 1,
+          colour: '#4EAF47', // senseBox-green
+          snap: false
+        }}
         media={'media/'}
-        move={{
+        move={{ // https://developers.google.com/blockly/guides/configure/web/move
           scrollbars: true,
           drag: true,
-          wheel: true
+          wheel: false
         }}
         initialXml={''}
       >
@@ -65,4 +76,9 @@ class BlocklyView extends Component {
   };
 }
 
-export default BlocklyView;
+BlocklyWindow.propTypes = {
+  onChangeWorkspace: PropTypes.func.isRequired
+};
+
+
+export default connect(null, { onChangeWorkspace })(BlocklyWindow);

src/components/Home.js

@@ -1,92 +1,30 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { onChangeWorkspace } from '../actions/workspaceActions';
 
 import WorkspaceStats from './WorkspaceStats';
 import WorkspaceFunc from './WorkspaceFunc';
-import CodeViewer from './CodeViewer';
-
-import BlocklyComponent, { Block, Value, Field, Shadow, Category } from './Blockly';
-import * as Blockly from 'blockly/core';
-import * as De from './Blockly/msg/de'; // de locale files
-//import * as En from './Blockly/msg/en'; // de locale files
-import './Blockly/blocks/index';
-import './Blockly/generator/index';
+import BlocklyWindow from './Blockly/BlocklyWindow';
 
+import Grid from '@material-ui/core/Grid';
 
 class Home extends Component {
-  constructor(props) {
-    super(props);
 
-    this.simpleWorkspace = React.createRef();
-  }
-
-  componentDidMount() {
-    const workspace = Blockly.getMainWorkspace();
-    workspace.addChangeListener((event) => {
-      this.props.onChangeWorkspace(event);
-    });
-  }
 
   render() {
     return (
       <div>
         <WorkspaceStats />
-        <BlocklyComponent ref={this.simpleWorkspace}
-          readOnly={false}
-          trashcan={true}
-          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
-            controls: true,
-            wheel: true,
-            startScale: 1.0,
-            maxScale: 3,
-            minScale: 0.3,
-            scaleSpeed: 1.2
-          }}
-          grid={{ // https://developers.google.com/blockly/guides/configure/web/grid
-            spacing: 20,
-            length: 1,
-            colour: '#4EAF47',
-            snap: false
-          }}
-          media={'media/'}
-          move={{ // https://developers.google.com/blockly/guides/configure/web/move
-            scrollbars: true,
-            drag: true,
-            wheel: false
-          }}
-          initialXml={''}
-        >
-          <Category name="loops" >
-            <Block type="controls_for" />
-            <Block type="controls_repeat_ext" />
-            <Block type="controls_whileUntil" />
-          </Category>
-          <Category name="senseBox" colour="120" >
-            <Category name="Sensoren" colour="120" >
-              <Block type="sensebox_sensor_temp_hum"></Block>
-            </Category>
-            <Block type="sensebox_telegram" />
-          </Category>
-          <Category name="Logic" colour="#b063c5">
-            <Block type="control_if"></Block>
-            <Block type="controls_ifelse"></Block>
-            <Block type="logic_compare"></Block>
-            <Block type="logic_operation"></Block>
-            <Block type="logic_negate"></Block>
-            <Block type="logic_boolean"></Block>
-          </Category>
-        </BlocklyComponent>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={6}>
+            <BlocklyWindow />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <div style={{height: '500px', border: '1px solid black'}}></div>
+          </Grid>
+        </Grid>
         <WorkspaceFunc />
       </div>
     );
   };
 }
 
-Home.propTypes = {
-  onChangeWorkspace: PropTypes.func.isRequired
-};
-
-
-export default connect(null, { onChangeWorkspace })(Home);
+export default Home;

src/components/Routes.js

@@ -9,10 +9,12 @@ class Routes extends Component {
 
   render() {
     return (
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route component={NotFound} />
-      </Switch>
+      <div style={{ margin: '0 22px' }}>
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route component={NotFound} />
+        </Switch>
+      </div>
     );
   }
 }