[feature/redux] Isomorphic redirect

src/actions/route.js

@@ -0,0 +1,9 @@
+
+// Pseudo action. All is handled through history module
+export function redirect(descriptor) {
+  return (dispatch, _, { history }) => history.replace(descriptor);
+}
+
+export function navigate(descriptor) {
+  return (dispatch, _, { history }) => history.push(descriptor);
+}

src/client.js

@@ -12,7 +12,7 @@ import ReactDOM from 'react-dom';
 import FastClick from 'fastclick';
 import UniversalRouter from 'universal-router';
 import routes from './routes';
-import history from './core/history';
+import createHistory from './core/createHistory';
 import configureStore from './store/configureStore';
 import { readState, saveState } from 'history/lib/DOMStateStorage';
 import {
@@ -90,6 +90,7 @@ function render(container, state, component) {
 }
 
 function run() {
+  const history = createHistory();
   const container = document.getElementById('app');
   const initialState = JSON.parse(
     document.
@@ -101,7 +102,8 @@ function run() {
   // Make taps on links and buttons work fast on mobiles
   FastClick.attach(document.body);
 
-  context.store = configureStore(initialState, {});
+  context.store = configureStore(initialState, { history });
+  context.createHref = history.createHref;
 
   // Re-render the app when window.location changes
   function onLocationChange(location) {

src/components/App/App.js

@@ -19,6 +19,7 @@ class App extends Component {
 
   static propTypes = {
     context: PropTypes.shape({
+      createHref: PropTypes.func.isRequired,
       store: PropTypes.object.isRequired,
       insertCss: PropTypes.func,
       setTitle: PropTypes.func,
@@ -29,6 +30,7 @@ class App extends Component {
   };
 
   static childContextTypes = {
+    createHref: PropTypes.func.isRequired,
     insertCss: PropTypes.func.isRequired,
     setTitle: PropTypes.func.isRequired,
     setMeta: PropTypes.func.isRequired,
@@ -37,6 +39,7 @@ class App extends Component {
   getChildContext() {
     const context = this.props.context;
     return {
+      createHref: context.createHref,
       insertCss: context.insertCss || emptyFunction,
       setTitle: context.setTitle || emptyFunction,
       setMeta: context.setMeta || emptyFunction,

src/components/Link/Link.js

@@ -8,7 +8,8 @@
  */
 
 import React, { Component, PropTypes } from 'react';
-import history from '../../core/history';
+import { connect } from 'react-redux';
+import { navigate } from '../../actions/route';
 
 function isLeftClickEvent(event) {
   return event.button === 0;
@@ -23,6 +24,13 @@ class Link extends Component { // eslint-disable-line react/prefer-stateless-fun
   static propTypes = {
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
     onClick: PropTypes.func,
+
+    // actions
+    navigate: PropTypes.func,
+  };
+
+  static contextTypes = {
+    createHref: PropTypes.func.isRequired,
   };
 
   handleClick = (event) => {
@@ -44,9 +52,9 @@ class Link extends Component { // eslint-disable-line react/prefer-stateless-fun
 
     if (allowTransition) {
       if (this.props.to) {
-        history.push(this.props.to);
+        this.props.navigate(this.props.to);
       } else {
-        history.push({
+        this.props.navigate({
           pathname: event.currentTarget.pathname,
           search: event.currentTarget.search,
         });
@@ -56,9 +64,15 @@ class Link extends Component { // eslint-disable-line react/prefer-stateless-fun
 
   render() {
     const { to, ...props } = this.props; // eslint-disable-line no-use-before-define
-    return <a href={history.createHref(to)} {...props} onClick={this.handleClick} />;
+    return <a href={this.context.createHref(to)} {...props} onClick={this.handleClick} />;
   }
 
 }
 
-export default Link;
+const mapState = null;
+
+const mapDispatch = {
+  navigate,
+};
+
+export default connect(mapState, mapDispatch)(Link);

src/core/history.js → src/core/createHistory.js

@@ -11,6 +11,4 @@ import createHistory from 'history/lib/createBrowserHistory';
 import createMemoryHistory from 'history/lib/createMemoryHistory';
 import useQueries from 'history/lib/useQueries';
 
-const history = useQueries(process.env.BROWSER ? createHistory : createMemoryHistory)();
-
-export default history;
+export default useQueries(process.env.BROWSER ? createHistory : createMemoryHistory);

src/server.js

@@ -26,6 +26,7 @@ import passport from './core/passport';
 import models from './data/models';
 import schema from './data/schema';
 import routes from './routes';
+import createHistory from './core/createHistory';
 import assets from './assets'; // eslint-disable-line import/no-unresolved
 import configureStore from './store/configureStore';
 import { setRuntimeVariable } from './actions/runtime';
@@ -85,13 +86,31 @@ app.use('/graphql', expressGraphQL(req => ({
 // Register server-side rendering middleware
 // -----------------------------------------------------------------------------
 app.get('*', async (req, res, next) => {
-  try {
-    let css = [];
-    let statusCode = 200;
-    const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };
+  let css = [];
+  let statusCode = 200;
+  const data = { title: '', description: '', style: '', script: assets.main.js, children: '' };
+
+  const history = createHistory(req.url);
+  // let currentLocation = history.getCurrentLocation();
+  let sent = false;
+  const removeHistoryListener = history.listen(location => {
+    const newUrl = `${location.pathname}${location.search}`;
+    if (req.originalUrl !== newUrl) {
+      // console.log(`R ${req.originalUrl} -> ${newUrl}`); // eslint-disable-line no-console
+      if (!sent) {
+        res.redirect(303, newUrl);
+        sent = true;
+        next();
+      } else {
+        console.error(`${req.path}: Already sent!`); // eslint-disable-line no-console
+      }
+    }
+  });
 
+  try {
     const store = configureStore({}, {
       cookie: req.headers.cookie,
+      history,
     });
 
     store.dispatch(setRuntimeVariable({
@@ -104,6 +123,7 @@ app.get('*', async (req, res, next) => {
       query: req.query,
       context: {
         store,
+        createHref: history.createHref,
         insertCss: (...styles) => {
           styles.forEach(style => css.push(style._getCss())); // eslint-disable-line no-underscore-dangle, max-len
         },
@@ -120,12 +140,15 @@ app.get('*', async (req, res, next) => {
       },
     });
 
-    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
-
-    res.status(statusCode);
-    res.send(`<!doctype html>${html}`);
+    if (!sent) {
+      const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
+      res.status(statusCode);
+      res.send(`<!doctype html>${html}`);
+    }
   } catch (err) {
     next(err);
+  } finally {
+    removeHistoryListener();
   }
 });
 

src/store/createHelpers.js

@@ -46,5 +46,6 @@ export default function createHelpers(config) {
   return {
     fetch: fetchKnowingCookie,
     graphqlRequest,
+    history: config.history,
   };
 }