add generalReducer to store settings

src/App.js

@@ -11,10 +11,7 @@ import './App.css';
 
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
-import Navbar from './components/Navbar';
+import Content from './components/Content';
-import Footer from './components/Footer';
-import Routes from './components/Route/Routes';
-import Cookies from './components/Cookies';
 
 const theme = createMuiTheme({
   palette: {
@@ -43,12 +40,7 @@ class App extends Component {
       <ThemeProvider theme={theme}>
         <Provider store={store}>
           <Router history={customHistory}>
-            <div className="wrapper">
+            <Content />
-              <Navbar />
-              <Routes />
-              <Cookies />
-              <Footer />
-            </div>
           </Router>
         </Provider>
       </ThemeProvider>

src/actions/generalActions.js

@@ -1,4 +1,4 @@
-import { VISIT } from './types';
+import { VISIT, LANGUAGE, RENDERER, STATISTICS } from './types';
 
 
 export const visitPage = () => (dispatch) => {
@@ -6,3 +6,24 @@ export const visitPage = () => (dispatch) => {
     type: VISIT
   });
 };
+
+export const setLanguage = (language) => (dispatch) => {
+  dispatch({
+    type: LANGUAGE,
+    payload: language
+  });
+};
+
+export const setRenderer = (renderer) => (dispatch) => {
+  dispatch({
+    type: RENDERER,
+    payload: renderer
+  });
+};
+
+export const setStatistics = (showStatistics) => (dispatch) => {
+  dispatch({
+    type: STATISTICS,
+    payload: showStatistics
+  });
+};

src/actions/types.js

@@ -46,6 +46,9 @@ export const PROGRESS = 'PROGRESS';
 
 
 export const VISIT = 'VISIT';
+export const LANGUAGE = 'LANGUAGE';
+export const RENDERER = 'RENDERER';
+export const STATISTICS = 'STATISTICS';
 
 // messages
 export const GET_ERRORS = 'GET_ERRORS';

src/components/Blockly/BlocklyWindow.js

@@ -18,26 +18,21 @@ class BlocklyWindow extends Component {
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    var locale = window.localStorage.getItem('locale');
+    // if (locale === null) {
-    this.state = {
+    //   if (navigator.language === 'de-DE') {
-      renderer: window.localStorage.getItem('renderer'),
+    //     locale = 'de';
-    };
+    //   } else {
-    if (locale === null) {
+    //     locale = 'en';
-      if (navigator.language === 'de-DE') {
+    //   }
-        locale = 'de';
+    // }
-      } else {
+    if (this.props.language === 'de') {
-        locale = 'en';
-      }
-    }
-    if (locale === 'de') {
       Blockly.setLocale(De);
-    } else if (locale === 'en') {
+    } else if (this.props.language === 'en') {
       Blockly.setLocale(En);
     }
   }
 
   componentDidMount() {
-
     const workspace = Blockly.getMainWorkspace();
     this.props.onChangeWorkspace({});
     this.props.clearStats();
@@ -72,7 +67,7 @@ class BlocklyWindow extends Component {
           style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
           readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
           trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
-          renderer={this.state.renderer}
+          renderer={this.props.renderer}
           zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
             controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
             wheel: false,
@@ -106,8 +101,14 @@ class BlocklyWindow extends Component {
 
 BlocklyWindow.propTypes = {
   onChangeWorkspace: PropTypes.func.isRequired,
-  clearStats: PropTypes.func.isRequired
+  clearStats: PropTypes.func.isRequired,
+  renderer: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
 };
 
+const mapStateToProps = state => ({
+  renderer: state.general.renderer,
+  language: state.general.language
+});
 
-export default connect(null, { onChangeWorkspace, clearStats })(BlocklyWindow);
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);

src/components/Blockly/msg/de.js

@@ -926,9 +926,15 @@ Blockly.Msg.projectname = "Projektname";
  */
 Blockly.Msg.settings_head = "Einstellungen"
 Blockly.Msg.settings_language = "Sprache"
+Blockly.Msg.settings_language_text = "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden."
 Blockly.Msg.settings_language_de = "Deutsch"
 Blockly.Msg.settings_language_en = "Englisch"
-Blockly.Msg.settings_renderer_text = "Der Renderer bestimmt das aussehen der Blöcke"
+Blockly.Msg.settings_renderer = "Renderer"
+Blockly.Msg.settings_renderer_text = "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist."
+Blockly.Msg.settings_statistics = "Statistiken"
+Blockly.Msg.settings_statistics_text = "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden."
+Blockly.Msg.settings_statistics_on = "An"
+Blockly.Msg.settings_statistics_off = "Aus"
 
 /**
  * 404

src/components/Blockly/msg/en.js

@@ -861,6 +861,20 @@ Blockly.Msg.button_create_variableCreate = "Create Variable";
 Blockly.Msg.filename = "Filename";
 Blockly.Msg.projectname = "Projectname";
 
+/**
+ * Settings
+ */
+Blockly.Msg.settings_head = "Settings"
+Blockly.Msg.settings_language = "Language"
+Blockly.Msg.settings_language_text = "Selection of the language applies to the entire application. A distinction can be made between German and English."
+Blockly.Msg.settings_language_de = "German"
+Blockly.Msg.settings_language_en = "English"
+Blockly.Msg.settings_renderer = "Renderer"
+Blockly.Msg.settings_renderer_text = "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application."
+Blockly.Msg.settings_statistics = "Statistics"
+Blockly.Msg.settings_statistics_text = "The display of statistics on the usage of the blocks above the workspace can be shown or hidden."
+Blockly.Msg.settings_statistics_on = "On"
+Blockly.Msg.settings_statistics_off = "Off"
 
 
 

src/components/Content.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import * as Blockly from 'blockly/core';
+import { De } from './Blockly/msg/de';
+import { En } from './Blockly/msg/en';
+
+import Navbar from './Navbar';
+import Footer from './Footer';
+import Routes from './Route/Routes';
+import Cookies from './Cookies';
+
+class Content extends Component {
+
+  componentDidMount() {
+    if (this.props.language === 'de') {
+      Blockly.setLocale(De);
+    } else if (this.props.language === 'en') {
+      Blockly.setLocale(En);
+    }
+  }
+
+  componentDidUpdate(props){
+    if(props.language !== this.props.language){
+      if (this.props.language === 'de') {
+        Blockly.setLocale(De);
+      } else if (this.props.language === 'en') {
+        Blockly.setLocale(En);
+      }
+    }
+  }
+
+  render() {
+    return (
+      <div className="wrapper">
+        <Navbar />
+        <Routes />
+        <Cookies />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+Content.propTypes = {
+  language: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, null)(Content);

src/components/Home.js

@@ -48,7 +48,6 @@ class Home extends Component {
 
   state = {
     codeOn: false,
-    stats: window.localStorage.getItem('stats'),
     snackbar: false,
     type: '',
     key: '',
@@ -91,7 +90,7 @@ class Home extends Component {
   render() {
     return (
       <div>
-        {this.state.stats ?
+        {this.props.statistics ?
           <div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
           : null
         }
@@ -136,11 +135,13 @@ class Home extends Component {
 Home.propTypes = {
   clearStats: PropTypes.func.isRequired,
   workspaceName: PropTypes.func.isRequired,
-  message: PropTypes.object.isRequired
+  message: PropTypes.object.isRequired,
+  statistics: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
-  message: state.message
+  message: state.message,
+  statistics: state.general.statistics
 });
 
 

src/components/NotFound.js

@@ -9,6 +9,13 @@ import Typography from '@material-ui/core/Typography';
 import * as Blockly from 'blockly'
 
 class NotFound 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>

src/components/Settings/LanguageSelector.js

@@ -1,44 +1,58 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setLanguage } from '../../actions/generalActions';
+
+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 * as Blockly from 'blockly/core';
+import Typography from '@material-ui/core/Typography';
+import FormHelperText from '@material-ui/core/FormHelperText';
 
-const useStyles = makeStyles((theme) => ({
+class LanguageSelector extends Component {
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 120,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
 
-export default function LanguageSelector() {
+  componentDidMount(){
-    const classes = useStyles();
+    // Ensure that Blockly.setLocale is adopted in the component.
-    const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
+    // Otherwise, the text will not be displayed until the next update of the component.
+    this.forceUpdate();
+  }
 
-    const handleChange = (event) => {
+  handleChange = (event) => {
-        setLang(event.target.value);
+    this.props.setLanguage(event.target.value);
-        window.localStorage.setItem('locale', event.target.value);
+  }
-    };
 
+  render(){
     return(
       <div>
-            <FormControl className={classes.formControl}>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_language}</Typography>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_language_text}</FormHelperText>
+        <FormControl>
           <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
-                    value={lang}
+            value={this.props.language}
-                    onChange={handleChange}
+            onChange={this.handleChange}
           >
-                    <MenuItem value={'de'}>Deutsch</MenuItem>
+            <MenuItem value={'de'}>{Blockly.Msg.settings_language_de}</MenuItem>
-                    <MenuItem value={'en'}>Englisch</MenuItem>
+            <MenuItem value={'en'}>{Blockly.Msg.settings_language_en}</MenuItem>
           </Select>
         </FormControl>
       </div>
     );
   }
+}
+
+LanguageSelector.propTypes = {
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setLanguage })(LanguageSelector);

src/components/Settings/RenderSelector.js

@@ -1,45 +1,57 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setRenderer } from '../../actions/generalActions';
+
+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 * as Blockly from 'blockly/core'
+import Typography from '@material-ui/core/Typography';
-const useStyles = makeStyles((theme) => ({
+import FormHelperText from '@material-ui/core/FormHelperText';
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 400,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
 
-export default function RenderSelector() {
-    const classes = useStyles();
-    const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
 
-    const handleChange = (event) => {
+class RenderSelector extends Component {
-        setRenderer(event.target.value);
-        window.localStorage.setItem('renderer', event.target.value);
-    };
 
+  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>
-            <FormControl className={classes.formControl}>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_renderer}</Typography>
-                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_renderer_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_renderer}</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
-                    value={renderer}
+            value={this.props.renderer}
-                    onChange={handleChange}
+            onChange={(e) => this.props.setRenderer(e.target.value)}
-
           >
             <MenuItem value={'geras'}>Geras</MenuItem>
             <MenuItem value={'zelos'}>Zelos</MenuItem>
           </Select>
         </FormControl>
-            <p>{Blockly.Msg.settings_renderer_text}</p>
       </div>
     );
   }
+}
+
+RenderSelector.propTypes = {
+  setRenderer: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  renderer: PropTypes.string.isRequired
+};
+
+const mapStateToProps = state => ({
+  renderer: state.general.renderer,
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setRenderer })(RenderSelector);

src/components/Settings/Settings.js

@@ -1,26 +1,49 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
 import { withRouter } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
+import * as Blockly from 'blockly/core';
-import Typography from '@material-ui/core/Typography';
+
+import Breadcrumbs from '../Breadcrumbs';
 import LanguageSelector from './LanguageSelector';
 import RenderSelector from './RenderSelector';
 import StatsSelector from './StatsSelector';
-import * as Blockly from 'blockly'
+
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
 
 class Settings 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 variant='h4' style={{ marginBottom: '5px' }}>{Blockly.Msg.settings_head}</Typography>
+        <Breadcrumbs content={[{ link: this.props.location.pathname, title: Blockly.Msg.settings_head }]} />
+
+        <h1>{Blockly.Msg.settings_head}</h1>
+
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
           <LanguageSelector />
+        </Paper>
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
           <RenderSelector />
+        </Paper>
+        <Paper style={{margin: '10px 0px', padding: '10px'}}>
           <StatsSelector />
+        </Paper>
+
         <Button
-                    style={{ marginTop: '20px' }}
+          style={{ marginTop: '10px' }}
           variant="contained"
           color="primary"
-                    onClick={() => { this.props.history.push('/') }}
+          onClick={this.props.pageVisits > 0 ? () => this.props.history.goBack() : () => this.props.history.push('/')}
         >
           {Blockly.Msg.button_back}
         </Button>
@@ -29,4 +52,14 @@ class Settings extends Component {
   };
 }
 
-export default withRouter(Settings);
+Settings.propTypes = {
+  language: PropTypes.string.isRequired,
+  pageVisits: PropTypes.number.isRequired
+};
+
+const mapStateToProps = state => ({
+  language: state.general.language,
+  pageVisits: state.general.pageVisits
+});
+
+export default connect(mapStateToProps, null)(withRouter(Settings));

src/components/Settings/StatsSelector.js

@@ -1,44 +1,56 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setStatistics } from '../../actions/generalActions';
+
+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';
 
-const useStyles = makeStyles((theme) => ({
+class StatsSelector extends Component {
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 400,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
 
-export default function StatsSelector() {
+  componentDidMount(){
-    const classes = useStyles();
+    // Ensure that Blockly.setLocale is adopted in the component.
-    const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
+    // Otherwise, the text will not be displayed until the next update of the component.
-
+    this.forceUpdate();
-    const handleChange = (event) => {
+  }
-        setStats(event.target.value);
-        window.localStorage.setItem('stats', event.target.value);
-    };
 
+  render(){
     return (
       <div>
-            <FormControl className={classes.formControl}>
+        <Typography style={{fontWeight: 'bold'}}>{Blockly.Msg.settings_statistics}</Typography>
-                <InputLabel id="demo-simple-select-label">Statistiken</InputLabel>
+        <FormHelperText style={{color: 'black', lineHeight: 1.3, marginBottom: '8px'}}>{Blockly.Msg.settings_statistics_text}</FormHelperText>
+        <FormControl>
+          <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_statistics}</InputLabel>
           <Select
             labelId="demo-simple-select-label"
             id="demo-simple-select"
-                    value={stats}
+            value={this.props.statistics}
-                    onChange={handleChange}
+            onChange={(e) => this.props.setStatistics(e.target.value)}
           >
-                    <MenuItem value={true}>On</MenuItem>
+            <MenuItem value={true}>{Blockly.Msg.settings_statistics_on}</MenuItem>
-                    <MenuItem value={false}>Off</MenuItem>
+            <MenuItem value={false}>{Blockly.Msg.settings_statistics_off}</MenuItem>
           </Select>
         </FormControl>
-            <p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
       </div>
     );
   }
+}
+
+StatsSelector.propTypes = {
+  setStatistics: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  statistics: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+  statistics: state.general.statistics,
+  language: state.general.language
+});
+
+export default connect(mapStateToProps, { setStatistics })(StatsSelector);

src/reducers/generalReducer.js

@@ -1,8 +1,11 @@
-import { VISIT } from '../actions/types';
+import { VISIT, LANGUAGE, RENDERER, STATISTICS } from '../actions/types';
 
 
 const initialState = {
-  pageVisits: 0 // detect if previous URL was
+  pageVisits: 0, // detect if previous URL was
+  language: 'de',
+  renderer: window.localStorage.getItem('renderer') || 'geras',
+  statistics: window.localStorage.getItem('statistics') === 'true' ? true : window.localStorage.getItem('statistics') === 'false' ? false : false
 };
 
 export default function(state = initialState, action){
@@ -12,6 +15,23 @@ export default function(state = initialState, action){
         ...state,
         pageVisits: state.pageVisits += 1
       };
+    case LANGUAGE:
+      return {
+        ...state,
+        language: action.payload
+      };
+    case RENDERER:
+      window.localStorage.setItem('renderer', action.payload);
+      return {
+        ...state,
+        renderer: action.payload
+      };
+    case STATISTICS:
+      window.localStorage.setItem('statistics', action.payload);
+      return {
+        ...state,
+        statistics: action.payload
+      };
     default:
       return state;
   }