Allow language to configured and pass it to App as a prop.

__tests__/src/components/App.test.js

@@ -13,6 +13,7 @@ import i18n from '../../../src/i18n';
 function createWrapper(props) {
   return shallow(
     <App
+      language="en"
       isFullscreenEnabled={false}
       isWorkspaceControlPanelVisible
       setWorkspaceFullscreen={() => {}}
@@ -80,4 +81,14 @@ describe('App', () => {
     expect(wrapper.find(Workspace).length).toBe(0);
     expect(wrapper.find(WorkspaceAdd).length).toBe(1);
   });
+
+  describe('componentDidUpdate()', () => {
+    it('changes the i18n language if the language prop has been updated', () => {
+      const wrapper = createWrapper();
+
+      expect(i18n.language).toEqual('en');
+      wrapper.setProps({ language: 'de' });
+      expect(i18n.language).toEqual('de');
+    });
+  });
 });

src/components/App.js

@@ -15,6 +15,33 @@ import i18n from '../i18n';
  * @prop {Object} manifests
  */
 class App extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+
+    this.i18n = i18n;
+  }
+
+  /**
+   * Set i18n language on component mount
+   */
+  componentDidMount() {
+    const { language } = this.props;
+
+    this.i18n.changeLanguage(language);
+  }
+
+  /**
+   * Update the i18n language if it is changed
+   */
+  componentDidUpdate(prevProps) {
+    const { language } = this.props;
+
+    if (prevProps.language !== language) {
+      this.i18n.changeLanguage(language);
+    }
+  }
+
   /**
    * render
    * @return {String} - HTML markup for the component
@@ -26,12 +53,12 @@ class App extends Component {
     } = this.props;
 
     Object.keys(translations).forEach((lng) => {
-      i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
+      this.i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
     });
 
     return (
       <div className={classNames(classes.background, ns('app'))}>
-        <I18nextProvider i18n={i18n}>
+        <I18nextProvider i18n={this.i18n}>
           <MuiThemeProvider theme={createMuiTheme(theme)}>
             <Fullscreen
               enabled={isFullscreenEnabled}
@@ -55,6 +82,7 @@ class App extends Component {
 }
 
 App.propTypes = {
+  language: PropTypes.string.isRequired,
   theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   translations: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   isFullscreenEnabled: PropTypes.bool,

src/config/settings.js

@@ -10,6 +10,7 @@ export default {
       useNextVariants: true // set so that console deprecation warning is removed
     }
   },
+  language: 'en',
   translations: {
   },
   window: {

src/containers/App.js

@@ -11,6 +11,7 @@ import App from '../components/App';
  */
 const mapStateToProps = state => (
   {
+    language: state.config.language,
     theme: state.config.theme,
     translations: state.config.translations,
     isFullscreenEnabled: state.workspace.isFullscreenEnabled,