From 61d46f96bba5f4c0e32e73b9fcbd7f744138a7bc Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Tue, 21 Feb 2017 19:55:09 +0100
Subject: [PATCH] Add routing middleware

---
 js/actions.js | 16 ++--------------
 js/client.js  | 42 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/js/actions.js b/js/actions.js
index bfbced50..650f22b7 100644
--- a/js/actions.js
+++ b/js/actions.js
@@ -1,23 +1,11 @@
-import createHistory from 'history/createBrowserHistory';
-
 export const NAVIGATE = 'navigate';
 
-let history;
-if (process.env.RENDER_MODE !== 'server') {
-  history = createHistory();
-
-  const unlisten = history.listen((location, action) => {
-    // location is an object like window.location
-    console.log(action, location.pathname, location.state)
-  });
-}
-
 const actions = {
-  navigate: (pageName) => {
-    history.push(`${pageName}.html`);
+  navigate: (pageName, pushToHistory = true) => {
     return {
       type: NAVIGATE,
       pageName,
+      pushToHistory,
     };
   },
 };
diff --git a/js/client.js b/js/client.js
index 1bb06e80..5cc2aa24 100644
--- a/js/client.js
+++ b/js/client.js
@@ -1,10 +1,38 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { createStore } from 'redux'
-import { Provider } from 'react-redux'
-import App from './components/App'
-import appReducer from './reducer'
+import React from 'react';
+import { render } from 'react-dom';
+import { createStore, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import createHistory from 'history/createBrowserHistory';
+import App from './components/App';
+import appReducer from './reducer';
+import actions, { NAVIGATE } from './actions';
 
+// Remove .html and map / to index
+const getPageNameFromPath = (path) => {
+  if (path === '/') {
+    return 'index';
+  }
+  return path.substring(1, path.length - 5);
+}
+
+const historyManager = store => {
+  const history = createHistory();
+
+  // If browser-back button is pressed, provide new pageName to store
+  history.listen((location, action) => {
+    if (action === 'POP') {
+      const pageName = getPageNameFromPath(location.pathname);
+      store.dispatch(actions.navigate(pageName, false))
+    }
+  });
+
+  return next => action => {
+    if(action.type === NAVIGATE && action.pushToHistory === true) {
+      history.push(`${action.pageName}.html`);
+    }
+    return next(action);
+  }
+}
 
 // Grab the state from a global variable injected into the server-generated HTML
 const preloadedState = window.__TECHRADAR__;
@@ -13,7 +41,7 @@ const preloadedState = window.__TECHRADAR__;
 delete window.__TECHRADAR__;
 
 // Create Redux store with initial state
-const store = createStore(appReducer, preloadedState)
+const store = createStore(appReducer, preloadedState, applyMiddleware(historyManager))
 
 render(
   <Provider store={store}>