add generalReducer to store settings

src/components/Settings/LanguageSelector.js

@@ -1,44 +1,58 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { Component } from 'react';
+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) => ({
-    formControl: {
-        margin: theme.spacing(1),
-        minWidth: 120,
-    },
-    selectEmpty: {
-        marginTop: theme.spacing(2),
-    },
-}));
+class LanguageSelector extends Component {
 
-export default function LanguageSelector() {
-    const classes = useStyles();
-    const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
+  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();
+  }
 
-    const handleChange = (event) => {
-        setLang(event.target.value);
-        window.localStorage.setItem('locale', event.target.value);
-    };
+  handleChange = (event) => {
+    this.props.setLanguage(event.target.value);
+  }
 
-    return (
-        <div>
-            <FormControl className={classes.formControl}>
-                <InputLabel id="demo-simple-select-label">{Blockly.Msg.settings_language}</InputLabel>
-                <Select
-                    labelId="demo-simple-select-label"
-                    id="demo-simple-select"
-                    value={lang}
-                    onChange={handleChange}
-                >
-                    <MenuItem value={'de'}>Deutsch</MenuItem>
-                    <MenuItem value={'en'}>Englisch</MenuItem>
-                </Select>
-            </FormControl>
-        </div>
+  render(){
+    return(
+      <div>
+        <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={this.props.language}
+            onChange={this.handleChange}
+          >
+            <MenuItem value={'de'}>{Blockly.Msg.settings_language_de}</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);