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

js/src/i18n/store.js

@@ -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);
     });
   }
 

js/src/main.js

@@ -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 { Router } 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 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 }>
+      <Router className={ styles.reset } history={ routerHistory } routes={ routes } />
-        <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>
     );
   }
 }

js/src/routes.js

@@ -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;