Hot module reload fixes (#181)

* accept hot module changes, move routes into root component

* Fix "You cannot change <Router routes>; it will be ignored" error message by implementing solution in Github: https://github.com/ReactTraining/react-router/issues/2704#issuecomment-211352123

Router is only instantiated once in a production setting (e.g. not webpack-dev-server), so there is minimal overhead on producing a random key value for `Router`.

.babelrc

@@ -1,21 +1,26 @@
 {
   "plugins": [
     [
-            "transform-runtime", {
+      "transform-runtime",
+      {
         "helpers": false,
         "polyfill": false,
         "regenerator": true,
         "moduleName": "babel-runtime"
       }
     ],
-        ["module-resolver", {
+    [
+      "module-resolver",
+      {
         "root": ["./common"],
         "alias": {
           "underscore": "lodash"
         },
         "cwd": "babelrc"
-        }],
-    "react-hot-loader/babel"],
+      }
+    ],
+    "react-hot-loader/babel"
+  ],
   "presets": ["es2015", "react", "stage-0", "flow"],
   "env": {
     "production": {

common/components/Root/index.jsx

@@ -1,22 +1,45 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router';
+import { Router, Redirect, Route } from 'react-router';
 import PropTypes from 'prop-types';
+import { App } from 'containers';
+import GenerateWallet from 'containers/Tabs/GenerateWallet';
+import ViewWallet from 'containers/Tabs/ViewWallet';
+import Help from 'containers/Tabs/Help';
+import Swap from 'containers/Tabs/Swap';
+import SendTransaction from 'containers/Tabs/SendTransaction';
+import Contracts from 'containers/Tabs/Contracts';
+import ENS from 'containers/Tabs/ENS';
 
 export default class Root extends Component {
   static propTypes = {
     store: PropTypes.object,
-    history: PropTypes.object,
-    routes: PropTypes.func
+    history: PropTypes.object
   };
 
   render() {
-    const { store, history, routes } = this.props;
-    // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
+    const { store, history } = this.props;
     return (
-      <Provider store={store} key={Math.random()}>
+      <Provider store={store}>
         <Router history={history} key={Math.random()}>
-          {routes()}
+          <Route name="App" path="" component={App}>
+            <Route name="GenerateWallet" path="/" component={GenerateWallet} />
+            <Route
+              name="ViewWallet"
+              path="/view-wallet"
+              component={ViewWallet}
+            />
+            <Route name="Help" path="/help" component={Help} />
+            <Route name="Swap" path="/swap" component={Swap} />
+            <Route
+              name="Send"
+              path="/send-transaction"
+              component={SendTransaction}
+            />
+            <Route name="Contracts" path="/contracts" component={Contracts} />
+            <Route name="ENS" path="/ens" component={ENS} />
+            <Redirect from="/*" to="/" />
+          </Route>
         </Router>
       </Provider>
     );

common/index.jsx

@@ -8,18 +8,13 @@ import { render } from 'react-dom';
 import { syncHistoryWithStore } from 'react-router-redux';
 
 import { Root } from 'components';
-import { Routing, history } from './routing';
+import { history } from './routing';
 import { store } from './store';
 
 const renderRoot = Root => {
   let syncedHistory = syncHistoryWithStore(history, store);
   render(
-    <Root
-      key={Math.random()}
-      routes={Routing}
-      history={syncedHistory}
-      store={store}
-    />,
+    <Root history={syncedHistory} store={store} />,
     document.getElementById('app')
   );
 };
@@ -30,4 +25,5 @@ if (module.hot) {
   module.hot.accept('reducers/index', () =>
     store.replaceReducer(require('reducers/index').default)
   );
+  module.hot.accept();
 }

common/routing/index.js

@@ -0,0 +1,9 @@
+import { browserHistory } from 'react-router';
+import { useBasename } from 'history';
+
+export const history = getHistory();
+
+function getHistory() {
+  const basename = '';
+  return useBasename(() => browserHistory)({ basename });
+}

common/routing/index.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { browserHistory, Redirect, Route } from 'react-router';
-import { useBasename } from 'history';
-import { App } from 'containers';
-import GenerateWallet from 'containers/Tabs/GenerateWallet';
-import ViewWallet from 'containers/Tabs/ViewWallet';
-import Help from 'containers/Tabs/Help';
-import Swap from 'containers/Tabs/Swap';
-import SendTransaction from 'containers/Tabs/SendTransaction';
-import Contracts from 'containers/Tabs/Contracts';
-import ENS from 'containers/Tabs/ENS';
-
-export const history = getHistory();
-export const Routing = () =>
-  <Route name="App" path="" component={App}>
-    <Route name="GenerateWallet" path="/" component={GenerateWallet} />
-    <Route name="ViewWallet" path="/view-wallet" component={ViewWallet} />
-    <Route name="Help" path="/help" component={Help} />
-    <Route name="Swap" path="/swap" component={Swap} />
-    <Route name="Send" path="/send-transaction" component={SendTransaction} />
-    <Route name="Contracts" path="/contracts" component={Contracts} />
-    <Route name="ENS" path="/ens" component={ENS} />
-    <Redirect from="/*" to="/" />
-  </Route>;
-
-function getHistory() {
-  const basename = '';
-  return useBasename(() => browserHistory)({ basename });
-}