fetchData() and fetchDataDeferred() behave as they should

package.json

@@ -88,7 +88,7 @@
     "express": "^4.13.3",
     "express-session": "^1.12.1",
     "file-loader": "^0.8.4",
-    "history": "^1.13.0",
+    "history": "^1.13.1",
     "hoist-non-react-statics": "^1.0.3",
     "http-proxy": "^1.12.0",
     "less": "^2.5.3",
@@ -105,11 +105,12 @@
     "react-dom": "^0.14.1",
     "react-inline-css": "^2.0.0",
     "react-redux": "^4.0.0",
-    "react-router": "^1.0.0-rc3",
+    "react-router": "^1.0.0-rc4",
     "react-router-bootstrap": "^0.19.3",
     "redux": "^3.0.4",
     "redux-form": "^3.0.0",
-    "redux-simple-router": "^0.0.7",
+    "redux-simple-router": "0.0.10",
+    "scroll-behavior": "^0.3.0",
     "serialize-javascript": "^1.1.2",
     "serve-favicon": "^2.3.0",
     "serve-static": "^1.10.0",

src/client.js

@@ -9,17 +9,17 @@ import createStore from './redux/create';
 import ApiClient from './helpers/ApiClient';
 import io from 'socket.io-client';
 import {Provider} from 'react-redux';
-import {Router} from 'react-router';
+import {Router, match, createRoutes} from 'react-router';
 import {syncReduxAndRouter} from 'redux-simple-router';
 import getRoutes from './routes';
+import {fetchData, fetchDataDeferred} from './helpers/fetchComponentsData';
+import useScroll from 'scroll-behavior/lib/useStandardScroll';
 
 const client = new ApiClient();
 
 const dest = document.getElementById('content');
 const store = createStore(client, window.__data);
-const history = createHistory();
-
-syncReduxAndRouter(history, store);
+const routes = getRoutes(store);
 
 function initSocket() {
   const socket = io('', {path: '/api/ws', transports: ['polling']});
@@ -36,17 +36,60 @@ function initSocket() {
 
 global.socket = initSocket();
 
-function createElement(Component, props) {
-  if (Component.fetchData) {
-    Component.fetchData(store.getState, store.dispatch,
-                        props.location, props.params);
+const history = useScroll(createHistory)({routes: createRoutes(routes)});
+syncReduxAndRouter(history, store);
+
+let lastMatchedLocBefore;
+let lastMatchedLocAfter;
+
+history.listenBefore((location, callback) => {
+  const loc = location.pathname + location.search + location.hash;
+  if (lastMatchedLocBefore === loc) {
+    return callback();
   }
-  return React.createElement(Component, props);
-}
+
+  match({routes: routes, location: loc}, (err, redirectLocation, nextState) => {
+    if (!err && nextState) {
+      fetchData(nextState.components, store.getState, store.dispatch,
+        location, nextState.params)
+        .then(() => {
+          lastMatchedLocBefore = loc;
+          callback();
+        })
+        .catch(err2 => {
+          console.error(err2, 'Error while fetching data');
+          callback();
+        });
+    } else {
+      console.log('Location "%s" did not match any routes (listenBefore)', loc);
+      callback();
+    }
+  });
+});
+
+history.listen((location) => {
+  const loc = location.pathname + location.search + location.hash;
+  if (lastMatchedLocAfter === loc) {
+    return;
+  }
+
+  match({routes: routes, location: loc}, (err, redirectLocation, nextState) => {
+    if (err) {
+      console.error(err, 'Error while matching route (change handler)');
+    } else if (nextState) {
+      fetchDataDeferred(nextState.components, store.getState,
+        store.dispatch, location, nextState.params)
+        .then(() => lastMatchedLocAfter = loc)
+        .catch((err2) => console.error(err2, 'Error while fetching deferred data'));
+    } else {
+      console.log('Location "%s" did not match any routes (listen)', loc);
+    }
+  });
+});
 
 const component = (
-  <Router createElement={createElement} history={history}>
-    {getRoutes(store)}
+  <Router history={history}>
+    {routes}
   </Router>
 );
 

src/helpers/fetchComponentsData.js

@@ -0,0 +1,24 @@
+
+function _fetchData(components, getState, dispatch, location, params, deferred) {
+  const methodName = deferred ? 'fetchDataDeferred' : 'fetchData';
+  return components
+    .filter((component) => component && component[methodName]) // only look at ones with a static fetchData()
+    .map((component) => component[methodName])    // pull out fetch data methods
+    .map(fetchDataFoo =>
+      fetchDataFoo(getState, dispatch, location, params));  // call fetch data methods and save promises
+}
+
+
+export function fetchData(components, getState, dispatch, location, params) {
+  return Promise.all(_fetchData(components, getState, dispatch, location, params));
+}
+
+export function fetchDataDeferred(components, getState, dispatch, location, params) {
+  return Promise.all(_fetchData(components, getState, dispatch, location, params, true));
+}
+
+export function fetchAllData(components, getState, dispatch, location, params) {
+  return fetchData(components, getState, dispatch, location, params)
+    .then(() => fetchDataDeferred(components, getState, dispatch, location, params))
+    .catch(error => console.error(error, 'Error while fetching data'));
+}

src/server.js

@@ -19,7 +19,7 @@ import {Provider} from 'react-redux';
 import qs from 'query-string';
 import getRoutes from './routes';
 import getStatusFromRoutes from './helpers/getStatusFromRoutes';
-import fetchAllData from './helpers/fetchAllData';
+import {fetchAllData} from './helpers/fetchComponentsData';
 
 const pretty = new PrettyError();
 const app = new Express();