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: remix-run/react-router#2704 (comment)

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,25 +1,30 @@
 {
-    "plugins": [
-        [
-            "transform-runtime", {
-                "helpers": false,
-                "polyfill": false,
-                "regenerator": true,
-                "moduleName": "babel-runtime"
-            }
-        ],
-        ["module-resolver", {
-            "root": ["./common"],
-            "alias": {
-                "underscore": "lodash"
-            },
-            "cwd": "babelrc"
-        }],
-    "react-hot-loader/babel"],
-    "presets": ["es2015", "react", "stage-0", "flow"],
-    "env": {
-      "production": {
-          "presets": ["react-optimize"]
+  "plugins": [
+    [
+      "transform-runtime",
+      {
+        "helpers": false,
+        "polyfill": false,
+        "regenerator": true,
+        "moduleName": "babel-runtime"
       }
+    ],
+    [
+      "module-resolver",
+      {
+        "root": ["./common"],
+        "alias": {
+          "underscore": "lodash"
+        },
+        "cwd": "babelrc"
+      }
+    ],
+    "react-hot-loader/babel"
+  ],
+  "presets": ["es2015", "react", "stage-0", "flow"],
+  "env": {
+    "production": {
+      "presets": ["react-optimize"]
     }
+  }
 }

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