Fix React-Router in i18n locale change (#3815)
* Routes in routes config => no more react router error message * Add LocalStorage for Locale Selection * Ethcore to Parity LTD
This commit is contained in:
Nicolas Gotchac
Jaco Greeff
parent
4dbfcf231d
commit
4c3dea2a0b
@ -19,11 +19,14 @@ import { action, observable, transaction } from 'mobx';
|
||||
import { addLocaleData } from 'react-intl';
|
||||
import de from 'react-intl/locale-data/de';
|
||||
import en from 'react-intl/locale-data/en';
|
||||
import store from 'store';
|
||||
|
||||
import languages from './languages';
|
||||
import deMessages from './de';
|
||||
import enMessages from './en';
|
||||
|
||||
const LS_STORE_KEY = '_parity::locale';
|
||||
|
||||
let instance = null;
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
|
||||
@ -45,10 +48,21 @@ export default class Store {
|
||||
@observable messages = MESSAGES[DEFAULT];
|
||||
@observable isDevelopment = !isProduction;
|
||||
|
||||
constructor () {
|
||||
const savedLocale = store.get(LS_STORE_KEY);
|
||||
|
||||
this.locale = (savedLocale && LOCALES.includes(savedLocale))
|
||||
? savedLocale
|
||||
: DEFAULT;
|
||||
this.messages = MESSAGES[this.locale];
|
||||
}
|
||||
|
||||
@action setLocale (locale) {
|
||||
transaction(() => {
|
||||
this.locale = locale;
|
||||
this.messages = MESSAGES[locale];
|
||||
|
||||
store.set(LS_STORE_KEY, locale);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -15,10 +15,9 @@
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Redirect, Router, Route, IndexRoute } from 'react-router';
|
||||
|
||||
import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Wallet, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from '~/views';
|
||||
import { Router } from 'react-router';
|
||||
|
||||
import routes from './routes';
|
||||
import styles from './reset.css';
|
||||
|
||||
export default class MainApplication extends Component {
|
||||
@ -26,73 +25,11 @@ export default class MainApplication extends Component {
|
||||
routerHistory: PropTypes.any.isRequired
|
||||
};
|
||||
|
||||
handleDeprecatedRoute = (nextState, replace) => {
|
||||
const { address } = nextState.params;
|
||||
const redirectMap = {
|
||||
account: 'accounts',
|
||||
address: 'addresses',
|
||||
contract: 'contracts'
|
||||
};
|
||||
|
||||
const oldRoute = nextState.routes[0].path;
|
||||
const newRoute = Object.keys(redirectMap).reduce((newRoute, key) => {
|
||||
return newRoute.replace(new RegExp(`^/${key}`), '/' + redirectMap[key]);
|
||||
}, oldRoute);
|
||||
|
||||
console.warn(`Route "${oldRoute}" is deprecated. Please use "${newRoute}"`);
|
||||
replace(newRoute.replace(':address', address));
|
||||
}
|
||||
|
||||
render () {
|
||||
const { routerHistory } = this.props;
|
||||
|
||||
return (
|
||||
<Router className={ styles.reset } history={ routerHistory }>
|
||||
<Redirect from='/' to='/accounts' />
|
||||
<Redirect from='/auth' to='/accounts' query={ {} } />
|
||||
<Redirect from='/settings' to='/settings/views' />
|
||||
|
||||
{ /** Backward Compatible links */ }
|
||||
<Route path='/account/:address' onEnter={ this.handleDeprecatedRoute } />
|
||||
<Route path='/address/:address' onEnter={ this.handleDeprecatedRoute } />
|
||||
<Route path='/contract/:address' onEnter={ this.handleDeprecatedRoute } />
|
||||
|
||||
<Route path='/' component={ Application }>
|
||||
<Route path='accounts'>
|
||||
<IndexRoute component={ Accounts } />
|
||||
<Route path=':address' component={ Account } />
|
||||
<Route path='/wallet/:address' component={ Wallet } />
|
||||
</Route>
|
||||
|
||||
<Route path='addresses'>
|
||||
<IndexRoute component={ Addresses } />
|
||||
<Route path=':address' component={ Address } />
|
||||
</Route>
|
||||
|
||||
<Route path='apps' component={ Dapps } />
|
||||
<Route path='app/:id' component={ Dapp } />
|
||||
|
||||
<Route path='contracts'>
|
||||
<IndexRoute component={ Contracts } />
|
||||
<Route path='develop' component={ WriteContract } />
|
||||
<Route path=':address' component={ Contract } />
|
||||
</Route>
|
||||
|
||||
<Route path='settings' component={ Settings }>
|
||||
<Route path='background' component={ SettingsBackground } />
|
||||
<Route path='proxy' component={ SettingsProxy } />
|
||||
<Route path='views' component={ SettingsViews } />
|
||||
<Route path='parity' component={ SettingsParity } />
|
||||
</Route>
|
||||
|
||||
<Route path='signer' component={ Signer } />
|
||||
|
||||
<Route path='status'>
|
||||
<IndexRoute component={ Status } />
|
||||
<Route path=':subpage' component={ Status } />
|
||||
</Route>
|
||||
</Route>
|
||||
</Router>
|
||||
<Router className={ styles.reset } history={ routerHistory } routes={ routes } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
119
js/src/routes.js
Normal file
119
js/src/routes.js
Normal file
@ -0,0 +1,119 @@
|
||||
// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import {
|
||||
Accounts, Account, Addresses, Address, Application,
|
||||
Contract, Contracts, WriteContract, Wallet, Dapp, Dapps,
|
||||
Settings, SettingsBackground, SettingsParity, SettingsProxy,
|
||||
SettingsViews, Signer, Status
|
||||
} from '~/views';
|
||||
|
||||
function handleDeprecatedRoute (nextState, replace) {
|
||||
const { address } = nextState.params;
|
||||
const redirectMap = {
|
||||
account: 'accounts',
|
||||
address: 'addresses',
|
||||
contract: 'contracts'
|
||||
};
|
||||
|
||||
const oldRoute = nextState.routes[0].path;
|
||||
const newRoute = Object.keys(redirectMap).reduce((newRoute, key) => {
|
||||
return newRoute.replace(new RegExp(`^/${key}`), '/' + redirectMap[key]);
|
||||
}, oldRoute);
|
||||
|
||||
console.warn(`Route "${oldRoute}" is deprecated. Please use "${newRoute}"`);
|
||||
replace(newRoute.replace(':address', address));
|
||||
}
|
||||
|
||||
function redirectTo (path) {
|
||||
return (nextState, replace) => {
|
||||
replace(path);
|
||||
};
|
||||
}
|
||||
|
||||
const accountsRoutes = [
|
||||
{ path: ':address', component: Account },
|
||||
{ path: '/wallet/:address', component: Wallet }
|
||||
];
|
||||
|
||||
const addressesRoutes = [
|
||||
{ path: ':address', component: Address }
|
||||
];
|
||||
|
||||
const contractsRoutes = [
|
||||
{ path: 'develop', component: WriteContract },
|
||||
{ path: ':address', component: Contract }
|
||||
];
|
||||
|
||||
const settingsRoutes = [
|
||||
{ path: 'background', component: SettingsBackground },
|
||||
{ path: 'proxy', component: SettingsProxy },
|
||||
{ path: 'views', component: SettingsViews },
|
||||
{ path: 'parity', component: SettingsParity }
|
||||
];
|
||||
|
||||
const statusRoutes = [
|
||||
{ path: ':subpage', component: Status }
|
||||
];
|
||||
|
||||
const routes = [
|
||||
// Backward Compatible routes
|
||||
{ path: '/account/:address', onEnter: handleDeprecatedRoute },
|
||||
{ path: '/address/:address', onEnter: handleDeprecatedRoute },
|
||||
{ path: '/contract/:address', onEnter: handleDeprecatedRoute },
|
||||
|
||||
{ path: '/', onEnter: redirectTo('/accounts') },
|
||||
{ path: '/auth', onEnter: redirectTo('/accounts') },
|
||||
{ path: '/settings', onEnter: redirectTo('/settings/views') },
|
||||
|
||||
{
|
||||
path: '/',
|
||||
component: Application,
|
||||
childRoutes: [
|
||||
{
|
||||
path: 'accounts',
|
||||
indexRoute: { component: Accounts },
|
||||
childRoutes: accountsRoutes
|
||||
},
|
||||
{
|
||||
path: 'addresses',
|
||||
indexRoute: { component: Addresses },
|
||||
childRoutes: addressesRoutes
|
||||
},
|
||||
{
|
||||
path: 'contracts',
|
||||
indexRoute: { component: Contracts },
|
||||
childRoutes: contractsRoutes
|
||||
},
|
||||
{
|
||||
path: 'status',
|
||||
indexRoute: { component: Status },
|
||||
childRoutes: statusRoutes
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
component: Settings,
|
||||
childRoutes: settingsRoutes
|
||||
},
|
||||
|
||||
{ path: 'apps', component: Dapps },
|
||||
{ path: 'app/:id', component: Dapp },
|
||||
{ path: 'signer', component: Signer }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default routes;
|
||||
Loading…
Reference in New Issue
Block a user