get locale from user if exists

src/actions/authActions.js

@@ -1,8 +1,8 @@
 import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
 
 import axios from 'axios';
-import { returnErrors, returnSuccess } from './messageActions'
-
+import { returnErrors, returnSuccess } from './messageActions';
+import { setLanguage } from './generalActions';
 
 // Check token & load user
 export const loadUser = () => (dispatch) => {
@@ -16,6 +16,7 @@ export const loadUser = () => (dispatch) => {
         type: USER_LOADED,
         payload: res.data.user
       });
+      dispatch(setLanguage(res.data.user.language));
     },
     error: err => {
       if(err.response){
@@ -61,6 +62,7 @@ export const login = ({ email, password }) => (dispatch) => {
       type: LOGIN_SUCCESS,
       payload: res.data
     });
+    dispatch(setLanguage(res.data.user.language));
     dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
   })
   .catch(err => {
@@ -130,6 +132,11 @@ export const logout = () => (dispatch) => {
       dispatch({
         type: LOGOUT_SUCCESS
       });
+      var locale = 'de_DE';
+      if (window.localStorage.getItem('locale')) {
+        locale = window.localStorage.getItem('locale');
+      }
+      dispatch(setLanguage(locale));
       dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS'));
       clearTimeout(logoutTimerId);
     },

src/actions/generalActions.js

@@ -7,7 +7,10 @@ export const visitPage = () => (dispatch) => {
   });
 };
 
-export const setLanguage = (language) => (dispatch) => {
+export const setLanguage = (language) => (dispatch, getState) => {
+  if(!getState().auth.isAuthenticated){
+    window.localStorage.setItem('locale', language);
+  }
   dispatch({
     type: LANGUAGE,
     payload: language

src/components/Blockly/BlocklyWindow.js

@@ -18,16 +18,9 @@ class BlocklyWindow extends Component {
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    // if (locale === null) {
-    //   if (navigator.language === 'de-DE') {
-    //     locale = 'de';
-    //   } else {
-    //     locale = 'en';
-    //   }
-    // }
-    if (this.props.language === 'de') {
+    if (this.props.language === 'de_DE') {
       Blockly.setLocale(De);
-    } else if (this.props.language === 'en') {
+    } else if (this.props.language === 'en_US') {
       Blockly.setLocale(En);
     }
   }

src/components/Content.js

@@ -14,18 +14,18 @@ import Cookies from './Cookies';
 class Content extends Component {
 
   componentDidMount() {
-    if (this.props.language === 'de') {
+    if (this.props.language === 'de_DE') {
       Blockly.setLocale(De);
-    } else if (this.props.language === 'en') {
+    } else if (this.props.language === 'en_US') {
       Blockly.setLocale(En);
     }
   }
 
   componentDidUpdate(props){
     if(props.language !== this.props.language){
-      if (this.props.language === 'de') {
+      if (this.props.language === 'de_DE') {
         Blockly.setLocale(De);
-      } else if (this.props.language === 'en') {
+      } else if (this.props.language === 'en_US') {
         Blockly.setLocale(En);
       }
     }

src/components/Settings/LanguageSelector.js

@@ -37,8 +37,8 @@ class LanguageSelector extends Component {
             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>
+            <MenuItem value={'de_DE'}>{Blockly.Msg.settings_language_de}</MenuItem>
+            <MenuItem value={'en_US'}>{Blockly.Msg.settings_language_en}</MenuItem>
           </Select>
         </FormControl>
       </div>

src/reducers/generalReducer.js

@@ -1,11 +1,35 @@
 import { VISIT, LANGUAGE, RENDERER, STATISTICS } from '../actions/types';
 
+const initialLanguage = () => {
+  if (window.localStorage.getItem('locale')) {
+    return window.localStorage.getItem('locale');
+  }
+  if (navigator.language === 'de-DE'){
+    return 'de_DE';
+  }
+  return 'en_US';
+};
+
+const initialRenderer = () => {
+  if (window.localStorage.getItem('renderer')) {
+    return window.localStorage.getItem('renderer');
+  }
+  return 'geras';
+};
+
+const initialStatistics = () => {
+  if (window.localStorage.getItem('statistics')) {
+    return JSON.parse(window.localStorage.getItem('statistics'));
+  }
+  return false;
+};
+
 
 const initialState = {
   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
+  language: initialLanguage(),
+  renderer: initialRenderer(),
+  statistics: initialStatistics()
 };
 
 export default function(state = initialState, action){