mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-09-30 07:17:20 +05:30
Init user state before app initialization. Moved i18n logic into coresponding service
This commit is contained in:
parent
651ec10c62
commit
6ca594cf65
22
src/components/user/factory.js
Normal file
22
src/components/user/factory.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
62
src/index.js
62
src/index.js
@ -15,10 +15,10 @@ import thunk from 'redux-thunk';
|
|||||||
import { Router, browserHistory } from 'react-router';
|
import { Router, browserHistory } from 'react-router';
|
||||||
import { syncHistory, routeReducer } from 'react-router-redux';
|
import { syncHistory, routeReducer } from 'react-router-redux';
|
||||||
|
|
||||||
import { IntlProvider, addLocaleData } from 'react-intl';
|
import { IntlProvider } from 'react-intl';
|
||||||
import enLocaleData from 'react-intl/locale-data/en';
|
|
||||||
import ruLocaleData from 'react-intl/locale-data/ru';
|
|
||||||
|
|
||||||
|
import { factory as userFactory } from 'components/user/factory';
|
||||||
|
import i18n from 'services/i18n';
|
||||||
import reducers from 'reducers';
|
import reducers from 'reducers';
|
||||||
import routesFactory from 'routes';
|
import routesFactory from 'routes';
|
||||||
|
|
||||||
@ -34,44 +34,26 @@ const store = applyMiddleware(
|
|||||||
thunk
|
thunk
|
||||||
)(createStore)(reducer);
|
)(createStore)(reducer);
|
||||||
|
|
||||||
addLocaleData(enLocaleData);
|
userFactory(store)
|
||||||
addLocaleData(ruLocaleData);
|
.then(({lang}) =>
|
||||||
|
i18n.require(
|
||||||
// TODO: bind with user state
|
i18n.detectLanguage(lang)
|
||||||
const SUPPORTED_LANGUAGES = ['ru', 'en'];
|
)
|
||||||
const DEFAULT_LANGUAGE = 'en';
|
)
|
||||||
const state = store.getState();
|
.then(({locale, messages}) => {
|
||||||
function getUserLanguages() {
|
ReactDOM.render(
|
||||||
return [].concat(state.user.lang || [])
|
<IntlProvider locale={locale} messages={messages}>
|
||||||
.concat(navigator.languages || [])
|
<ReduxProvider store={store}>
|
||||||
.concat(navigator.language || []);
|
<Router history={browserHistory}>
|
||||||
}
|
{routesFactory(store)}
|
||||||
|
</Router>
|
||||||
function detectLanguage(userLanguages, availableLanguages, defaultLanguage) {
|
</ReduxProvider>
|
||||||
return (userLanguages || [])
|
</IntlProvider>,
|
||||||
.concat(defaultLanguage)
|
document.getElementById('app')
|
||||||
.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');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
document.getElementById('loader').classList.remove('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
@ -10,8 +10,6 @@ import ProfileChangePasswordPage from 'pages/profile/ChangePasswordPage';
|
|||||||
import ProfileChangeUsernamePage from 'pages/profile/ChangeUsernamePage';
|
import ProfileChangeUsernamePage from 'pages/profile/ChangeUsernamePage';
|
||||||
import ProfileChangeEmailPage from 'pages/profile/ProfileChangeEmailPage';
|
import ProfileChangeEmailPage from 'pages/profile/ProfileChangeEmailPage';
|
||||||
|
|
||||||
import { authenticate } from 'components/user/actions';
|
|
||||||
|
|
||||||
import OAuthInit from 'components/auth/OAuthInit';
|
import OAuthInit from 'components/auth/OAuthInit';
|
||||||
import Register from 'components/auth/register/Register';
|
import Register from 'components/auth/register/Register';
|
||||||
import Login from 'components/auth/login/Login';
|
import Login from 'components/auth/login/Login';
|
||||||
@ -26,12 +24,6 @@ import Finish from 'components/auth/finish/Finish';
|
|||||||
import authFlow from 'services/authFlow';
|
import authFlow from 'services/authFlow';
|
||||||
|
|
||||||
export default function routesFactory(store) {
|
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);
|
authFlow.setStore(store);
|
||||||
|
|
||||||
const onEnter = {
|
const onEnter = {
|
||||||
|
33
src/services/i18n.js
Normal file
33
src/services/i18n.js
Normal file
@ -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}));
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user