Init user state before app initialization. Moved i18n logic into coresponding service

src/components/user/factory.js

@@ -0,0 +1,22 @@
+import { authenticate } from 'components/user/actions';
+
+/**
+ * Initializes User state with the fresh data
+ *
+ * @param  {Object} store - redux store
+ *
+ * @return {Promise} a promise, that resolves in User state
+ */
+export function factory(store) {
+    const state = store.getState();
+
+    return new Promise((resolve, reject) => {
+        if (state.user.token) {
+            // authorizing user if it is possible
+            store.dispatch(authenticate(state.user.token))
+                .then(() => resolve(store.getState().user), reject);
+        } else {
+            resolve(state.user);
+        }
+    });
+}

src/index.js

@@ -15,10 +15,10 @@ import thunk from 'redux-thunk';
 import { Router, browserHistory } from 'react-router';
 import { syncHistory, routeReducer } from 'react-router-redux';
 
-import { IntlProvider, addLocaleData } from 'react-intl';
-import enLocaleData from 'react-intl/locale-data/en';
-import ruLocaleData from 'react-intl/locale-data/ru';
+import { IntlProvider } from 'react-intl';
 
+import { factory as userFactory } from 'components/user/factory';
+import i18n from 'services/i18n';
 import reducers from 'reducers';
 import routesFactory from 'routes';
 
@@ -34,44 +34,26 @@ const store = applyMiddleware(
     thunk
 )(createStore)(reducer);
 
-addLocaleData(enLocaleData);
-addLocaleData(ruLocaleData);
-
-// TODO: bind with user state
-const SUPPORTED_LANGUAGES = ['ru', 'en'];
-const DEFAULT_LANGUAGE = 'en';
-const state = store.getState();
-function getUserLanguages() {
-    return [].concat(state.user.lang || [])
-        .concat(navigator.languages || [])
-        .concat(navigator.language || []);
-}
-
-function detectLanguage(userLanguages, availableLanguages, defaultLanguage) {
-    return (userLanguages || [])
-        .concat(defaultLanguage)
-        .map((lang) => lang.split('-').shift().toLowerCase())
-        .find((lang) => availableLanguages.indexOf(lang) !== -1);
-}
-
-const locale = detectLanguage(getUserLanguages(), SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE);
-
-new Promise(require(`bundle!i18n/${locale}.json`))
-    .then((messages) => {
-        ReactDOM.render(
-            <IntlProvider locale={locale} messages={messages}>
-                <ReduxProvider store={store}>
-                    <Router history={browserHistory}>
-                        {routesFactory(store)}
-                    </Router>
-                </ReduxProvider>
-            </IntlProvider>,
-            document.getElementById('app')
-        );
-
-        document.getElementById('loader').classList.remove('is-active');
-    });
+userFactory(store)
+.then(({lang}) =>
+    i18n.require(
+        i18n.detectLanguage(lang)
+    )
+)
+.then(({locale, messages}) => {
+    ReactDOM.render(
+        <IntlProvider locale={locale} messages={messages}>
+            <ReduxProvider store={store}>
+                <Router history={browserHistory}>
+                    {routesFactory(store)}
+                </Router>
+            </ReduxProvider>
+        </IntlProvider>,
+        document.getElementById('app')
+    );
 
+    document.getElementById('loader').classList.remove('is-active');
+});
 
 
 if (process.env.NODE_ENV !== 'production') {

src/routes.js

@@ -10,8 +10,6 @@ import ProfileChangePasswordPage from 'pages/profile/ChangePasswordPage';
 import ProfileChangeUsernamePage from 'pages/profile/ChangeUsernamePage';
 import ProfileChangeEmailPage from 'pages/profile/ProfileChangeEmailPage';
 
-import { authenticate } from 'components/user/actions';
-
 import OAuthInit from 'components/auth/OAuthInit';
 import Register from 'components/auth/register/Register';
 import Login from 'components/auth/login/Login';
@@ -26,12 +24,6 @@ import Finish from 'components/auth/finish/Finish';
 import authFlow from 'services/authFlow';
 
 export default function routesFactory(store) {
-    const state = store.getState();
-    if (state.user.token) {
-        // authorizing user if it is possible
-        store.dispatch(authenticate(state.user.token));
-    }
-
     authFlow.setStore(store);
 
     const onEnter = {

src/services/i18n.js

@@ -0,0 +1,33 @@
+import { addLocaleData } from 'react-intl';
+import enLocaleData from 'react-intl/locale-data/en';
+import ruLocaleData from 'react-intl/locale-data/ru';
+
+const SUPPORTED_LANGUAGES = ['ru', 'en'];
+const DEFAULT_LANGUAGE = 'en';
+function getUserLanguages(userSelectedLang = []) {
+    return [].concat(userSelectedLang || [])
+        .concat(navigator.languages || [])
+        .concat(navigator.language || []);
+}
+
+function detectLanguage(userLanguages, availableLanguages, defaultLanguage) {
+    return (userLanguages || [])
+        .concat(defaultLanguage)
+        .map((lang) => lang.split('-').shift().toLowerCase())
+        .find((lang) => availableLanguages.indexOf(lang) !== -1);
+}
+
+export default {
+    detectLanguage(lang) {
+        return detectLanguage(getUserLanguages(lang), SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE);
+    },
+
+    require(locale) {
+        // till we have not so many locales, we can require their data at once
+        addLocaleData(enLocaleData);
+        addLocaleData(ruLocaleData);
+
+        return new Promise(require(`bundle!i18n/${locale}.json`))
+            .then((messages) => ({locale, messages}));
+    }
+};