Migration to redux simple router and async-props

package.json

@@ -88,7 +88,6 @@
     "compression": "^1.6.0",
     "express": "^4.13.3",
     "express-session": "^1.12.1",
-    "history": "1.17.0",
     "file-loader": "^0.8.5",
     "http-proxy": "^1.12.0",
     "invariant": "^2.2.0",
@@ -99,19 +98,19 @@
     "multireducer": "^2.0.0",
     "piping": "^0.3.0",
     "pretty-error": "^1.2.0",
-    "query-string": "^3.0.0",
     "react": "^0.14.2",
     "react-bootstrap": "^0.28.1",
     "react-dom": "^0.14.1",
     "react-helmet": "^2.2.0",
     "react-inline-css": "^2.0.0",
     "react-redux": "^4.0.0",
-    "react-router": "1.0.3",
-    "react-router-bootstrap": "^0.19.3",
+    "react-router": "2.0.0",
+    "react-router-bootstrap": "^0.20.1",
+    "react-router-redux": "^3.0.0",
     "redux": "^3.0.4",
+    "redux-async-connect": "^0.1.13",
     "redux-form": "^3.0.12",
-    "redux-router": "1.0.0-beta5",
-    "scroll-behavior": "^0.3.0",
+    "scroll-behavior": "^0.3.2",
     "serialize-javascript": "^1.1.2",
     "serve-favicon": "^2.3.0",
     "socket.io": "^1.3.7",

src/client.js

@@ -4,25 +4,20 @@
 import 'babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import createHistory from 'history/lib/createBrowserHistory';
-import useScroll from 'scroll-behavior/lib/useStandardScroll';
 import createStore from './redux/create';
 import ApiClient from './helpers/ApiClient';
 import io from 'socket.io-client';
 import {Provider} from 'react-redux';
-import {reduxReactRouter, ReduxRouter} from 'redux-router';
+import { Router, browserHistory } from 'react-router';
+import { ReduxAsyncConnect } from 'redux-async-connect';
+import useScroll from 'scroll-behavior/lib/useStandardScroll';
 
 import getRoutes from './routes';
-import makeRouteHooksSafe from './helpers/makeRouteHooksSafe';
 
 const client = new ApiClient();
-
-// Three different types of scroll behavior available.
-// Documented here: https://github.com/rackt/scroll-behavior
-const scrollableHistory = useScroll(createHistory);
-
+const history = useScroll(() => browserHistory)();
 const dest = document.getElementById('content');
-const store = createStore(reduxReactRouter, makeRouteHooksSafe(getRoutes), scrollableHistory, client, window.__data);
+const store = createStore(getRoutes, history, client, window.__data);
 
 function initSocket() {
   const socket = io('', {path: '/ws'});
@@ -40,7 +35,11 @@ function initSocket() {
 global.socket = initSocket();
 
 const component = (
-  <ReduxRouter routes={getRoutes(store)} />
+  <Router render={(props) =>
+        <ReduxAsyncConnect {...props} helpers={{client}} />
+      } history={history}>
+    {getRoutes(store)}
+  </Router>
 );
 
 ReactDOM.render(

src/components/__tests__/InfoBar-test.js

@@ -4,8 +4,7 @@ import {renderIntoDocument} from 'react-addons-test-utils';
 import { expect} from 'chai';
 import { InfoBar } from 'components';
 import { Provider } from 'react-redux';
-import {reduxReactRouter} from 'redux-router';
-import createHistory from 'history/lib/createMemoryHistory';
+import { browserHistory } from 'react-router';
 import createStore from 'redux/create';
 import ApiClient from 'helpers/ApiClient';
 const client = new ApiClient();
@@ -22,8 +21,7 @@ describe('InfoBar', () => {
       }
     }
   };
-
-  const store = createStore(reduxReactRouter, null, createHistory, client, mockStore);
+  const store = createStore(null, browserHistory, client, mockStore);
   const renderer = renderIntoDocument(
     <Provider store={store} key="provider">
       <InfoBar/>

src/containers/App/App.js

@@ -9,25 +9,12 @@ import Helmet from 'react-helmet';
 import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
 import { isLoaded as isAuthLoaded, load as loadAuth, logout } from 'redux/modules/auth';
 import { InfoBar } from 'components';
-import { pushState } from 'redux-router';
-import connectData from 'helpers/connectData';
+import { routeActions } from 'react-router-redux';
 import config from '../../config';
 
-function fetchData(getState, dispatch) {
-  const promises = [];
-  if (!isInfoLoaded(getState())) {
-    promises.push(dispatch(loadInfo()));
-  }
-  if (!isAuthLoaded(getState())) {
-    promises.push(dispatch(loadAuth()));
-  }
-  return Promise.all(promises);
-}
-
-@connectData(fetchData)
 @connect(
   state => ({user: state.auth.user}),
-  {logout, pushState})
+  {logout, pushState: routeActions.push})
 export default class App extends Component {
   static propTypes = {
     children: PropTypes.object.isRequired,
@@ -43,17 +30,31 @@ export default class App extends Component {
   componentWillReceiveProps(nextProps) {
     if (!this.props.user && nextProps.user) {
       // login
-      this.props.pushState(null, '/loginSuccess');
+      this.props.pushState('/loginSuccess');
     } else if (this.props.user && !nextProps.user) {
       // logout
-      this.props.pushState(null, '/');
+      this.props.pushState('/');
+    }
+  }
+
+  static reduxAsyncConnect(params, store) {
+    const {dispatch, getState} = store;
+    const promises = [];
+
+    if (!isInfoLoaded(getState())) {
+      promises.push(dispatch(loadInfo()));
+    }
+    if (!isAuthLoaded(getState())) {
+      promises.push(dispatch(loadAuth()));
     }
+
+    return Promise.all(promises);
   }
 
   handleLogout = (event) => {
     event.preventDefault();
     this.props.logout();
-  }
+  };
 
   render() {
     const {user} = this.props;

src/containers/Widgets/Widgets.js

@@ -4,16 +4,8 @@ import {connect} from 'react-redux';
 import * as widgetActions from 'redux/modules/widgets';
 import {isLoaded, load as loadWidgets} from 'redux/modules/widgets';
 import {initializeWithKey} from 'redux-form';
-import connectData from 'helpers/connectData';
 import { WidgetForm } from 'components';
 
-function fetchDataDeferred(getState, dispatch) {
-  if (!isLoaded(getState())) {
-    return dispatch(loadWidgets());
-  }
-}
-
-@connectData(null, fetchDataDeferred)
 @connect(
   state => ({
     widgets: state.widgets.data,
@@ -31,6 +23,13 @@ export default class Widgets extends Component {
     editing: PropTypes.object.isRequired,
     load: PropTypes.func.isRequired,
     editStart: PropTypes.func.isRequired
+  };
+
+  static reduxAsyncConnect(params, store) {
+    const {dispatch, getState} = store;
+    if (!isLoaded(getState())) {
+      return dispatch(loadWidgets());
+    }
   }
 
   render() {

src/helpers/Html.js

@@ -17,7 +17,7 @@ export default class Html extends Component {
     assets: PropTypes.object,
     component: PropTypes.node,
     store: PropTypes.object
-  }
+  };
 
   render() {
     const {assets, component, store} = this.props;