Merge pull request #207 from MyEtherWallet/master-hmr-fix-revert

Revert "Hot module reload fixes (#181)"

Author: dternyak

.babelrc

@@ -1,30 +1,25 @@
 {
-  "plugins": [
-    [
-      "transform-runtime",
-      {
-        "helpers": false,
-        "polyfill": false,
-        "regenerator": true,
-        "moduleName": "babel-runtime"
+    "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"]
       }
-    ],
-    [
-      "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,45 +1,22 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import { Router, Redirect, Route } from 'react-router';
+import { Router } 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
+    history: PropTypes.object,
+    routes: PropTypes.func
   };
 
   render() {
-    const { store, history } = this.props;
+    const { store, history, routes } = this.props;
+    // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
     return (
-      <Provider store={store}>
+      <Provider store={store} key={Math.random()}>
         <Router history={history} key={Math.random()}>
-          <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>
+          {routes()}
         </Router>
       </Provider>
     );

common/index.jsx

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

common/routing/index.js

@@ -0,0 +1,29 @@
+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 });
+}