Add routing middleware

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,
     };
   },
 };

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}>