diff --git a/__tests__/src/components/App.test.js b/__tests__/src/components/App.test.js index 0a84c0f4545125de88f3dc692967d122758ecd91..2a246c7a47d8116f84e6a8436968ebbcd6123fc6 100644 --- a/__tests__/src/components/App.test.js +++ b/__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'); + }); + }); }); diff --git a/src/components/App.js b/src/components/App.js index cee00e4bc969f20504dce767615e67935a112927..55bb715b5d4aafb9b5fe21425f75cddc50579792 100644 --- a/src/components/App.js +++ b/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, diff --git a/src/config/settings.js b/src/config/settings.js index df3444143db0c59f5de76cc5ebd4de0583ce6b24..a2d481e5d3456a1278dc5c10c54db09bc53a2a26 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -10,6 +10,7 @@ export default { useNextVariants: true // set so that console deprecation warning is removed } }, + language: 'en', translations: { }, window: { diff --git a/src/containers/App.js b/src/containers/App.js index 87ebc50d90b2ab0009497f471251a179a086081b..8136706c3b6ca75be63d7fd6468645a351e12abf 100644 --- a/src/containers/App.js +++ b/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,