diff --git a/src/components/user/factory.js b/src/components/user/factory.js new file mode 100644 index 0000000..04425dc --- /dev/null +++ b/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); + } + }); +} diff --git a/src/index.js b/src/index.js index b070e5c..c142e7e 100644 --- a/src/index.js +++ b/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( - - - - {routesFactory(store)} - - - , - document.getElementById('app') - ); - - document.getElementById('loader').classList.remove('is-active'); - }); +userFactory(store) +.then(({lang}) => + i18n.require( + i18n.detectLanguage(lang) + ) +) +.then(({locale, messages}) => { + ReactDOM.render( + + + + {routesFactory(store)} + + + , + document.getElementById('app') + ); + document.getElementById('loader').classList.remove('is-active'); +}); if (process.env.NODE_ENV !== 'production') { diff --git a/src/routes.js b/src/routes.js index ea7f7a0..2dce36b 100644 --- a/src/routes.js +++ b/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 = { diff --git a/src/services/i18n.js b/src/services/i18n.js new file mode 100644 index 0000000..0ed5fd0 --- /dev/null +++ b/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})); + } +};