Better use of React-Router (maintaining old routes)

This commit is contained in:
Nicolas Gotchac 2016-12-10 14:19:15 +01:00
parent 51b9034a5e
commit 591d086f42
4 changed files with 51 additions and 14 deletions

View File

@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { Redirect, Router, Route } from 'react-router'; 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 { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Wallet, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from '~/views';
@ -26,6 +26,23 @@ export default class MainApplication extends Component {
routerHistory: PropTypes.any.isRequired 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 () { render () {
const { routerHistory } = this.props; const { routerHistory } = this.props;
@ -34,26 +51,46 @@ export default class MainApplication extends Component {
<Redirect from='/' to='/accounts' /> <Redirect from='/' to='/accounts' />
<Redirect from='/auth' to='/accounts' query={ {} } /> <Redirect from='/auth' to='/accounts' query={ {} } />
<Redirect from='/settings' to='/settings/views' /> <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='/' component={ Application }>
<Route path='accounts' component={ Accounts } /> <Route path='accounts'>
<Route path='account/:address' component={ Account } /> <IndexRoute component={ Accounts } />
<Route path='wallet/:address' component={ Wallet } /> <Route path=':address' component={ Account } />
<Route path='addresses' component={ Addresses } /> <Route path='/wallet/:address' component={ Wallet } />
<Route path='address/:address' component={ Address } /> </Route>
<Route path='addresses'>
<IndexRoute component={ Addresses } />
<Route path=':address' component={ Address } />
</Route>
<Route path='apps' component={ Dapps } /> <Route path='apps' component={ Dapps } />
<Route path='app/:id' component={ Dapp } /> <Route path='app/:id' component={ Dapp } />
<Route path='contracts' component={ Contracts } />
<Route path='contracts/write' component={ WriteContract } /> <Route path='contracts'>
<Route path='contract/:address' component={ Contract } /> <IndexRoute component={ Contracts } />
<Route path='write' component={ WriteContract } />
<Route path=':address' component={ Contract } />
</Route>
<Route path='settings' component={ Settings }> <Route path='settings' component={ Settings }>
<Route path='background' component={ SettingsBackground } /> <Route path='background' component={ SettingsBackground } />
<Route path='proxy' component={ SettingsProxy } /> <Route path='proxy' component={ SettingsProxy } />
<Route path='views' component={ SettingsViews } /> <Route path='views' component={ SettingsViews } />
<Route path='parity' component={ SettingsParity } /> <Route path='parity' component={ SettingsParity } />
</Route> </Route>
<Route path='signer' component={ Signer } /> <Route path='signer' component={ Signer } />
<Route path='status' component={ Status } />
<Route path='status/:subpage' component={ Status } /> <Route path='status'>
<IndexRoute component={ Status } />
<Route path=':subpage' component={ Status } />
</Route>
</Route> </Route>
</Router> </Router>
); );

View File

@ -153,7 +153,7 @@ export default class Summary extends Component {
const { link, noLink, account, name } = this.props; const { link, noLink, account, name } = this.props;
const { address } = account; const { address } = account;
const viewLink = `/${link || 'account'}/${address}`; const viewLink = `/${link || 'accounts'}/${address}`;
const content = ( const content = (
<IdentityName address={ address } name={ name } unknown /> <IdentityName address={ address } name={ name } unknown />

View File

@ -95,7 +95,7 @@ class Addresses extends Component {
return ( return (
<List <List
link='address' link='addresses'
search={ searchValues } search={ searchValues }
accounts={ contacts } accounts={ contacts }
balances={ balances } balances={ balances }

View File

@ -85,7 +85,7 @@ class Contracts extends Component {
{ this.renderDeployContract() } { this.renderDeployContract() }
<Page> <Page>
<List <List
link='contract' link='contracts'
search={ searchValues } search={ searchValues }
accounts={ contracts } accounts={ contracts }
balances={ balances } balances={ balances }