Feature(settings): Update url/challenge lang onChange

common/app/App.jsx

@@ -9,7 +9,8 @@ import {
   initWindowHeight,
   updateNavHeight,
   toggleMapDrawer,
-  toggleMainChat
+  toggleMainChat,
+  updateAppLang
 } from './redux/actions';
 
 import { submitChallenge } from './routes/challenges/redux/actions';
@@ -18,6 +19,16 @@ import Nav from './components/Nav';
 import Toasts from './toasts/Toasts.jsx';
 import { userSelector } from './redux/selectors';
 
+const bindableActions = {
+  initWindowHeight,
+  updateNavHeight,
+  fetchUser,
+  submitChallenge,
+  toggleMapDrawer,
+  toggleMainChat,
+  updateAppLang
+};
+
 const mapStateToProps = createSelector(
   userSelector,
   state => state.app.shouldShowSignIn,
@@ -43,15 +54,6 @@ const mapStateToProps = createSelector(
   })
 );
 
-const bindableActions = {
-  initWindowHeight,
-  updateNavHeight,
-  fetchUser,
-  submitChallenge,
-  toggleMapDrawer,
-  toggleMainChat
-};
-
 // export plain class for testing
 export class FreeCodeCamp extends React.Component {
   static displayName = 'FreeCodeCamp';
@@ -74,9 +76,16 @@ export class FreeCodeCamp extends React.Component {
     toggleMainChat: PropTypes.func,
     fetchUser: PropTypes.func,
     shouldShowSignIn: PropTypes.bool,
-    params: PropTypes.object
+    params: PropTypes.object,
+    updateAppLang: PropTypes.func.isRequired
   };
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.params.lang !== nextProps.params.lang) {
+      this.props.updateAppLang(nextProps.params.lang);
+    }
+  }
+
   componentDidMount() {
     this.props.initWindowHeight();
     if (!this.props.isSignedIn) {