More on routing

js/actions.js

@@ -0,0 +1,25 @@
+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`);
+    return {
+      type: NAVIGATE,
+      pageName,
+    };
+  },
+};
+
+export default actions;

js/client.js

@@ -3,10 +3,8 @@ import { render } from 'react-dom'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import App from './components/App'
+import appReducer from './reducer'
 
-const appReducer = (state = {}, action) => {
-  return state;
-}
 
 // Grab the state from a global variable injected into the server-generated HTML
 const preloadedState = window.__TECHRADAR__;

js/components/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import actions from '../actions';
 import Header from './Header';
 import Router from './Router';
 
@@ -9,7 +10,7 @@ function App(props) {
     <div className="js--body">
       <div className="page">
         <div className="page__header">
-          <Header />
+          <Header {...props} />
         </div>
         <div className="page__content">
           <Router {...props} />
@@ -29,4 +30,7 @@ function App(props) {
   )
 }
 
-export default connect(({ items, releases, pageName }) => ({ items, releases, pageName }))(App);
+export default connect(
+  ({ items, releases, pageName }) => ({ items, releases, pageName }),
+  actions
+)(App);

js/components/Header.js

@@ -1,13 +1,18 @@
 import React from 'react';
 
-export default function() {
+export default function Header({ navigate }) {
+  const handleClick = (pageName) => (e) => {
+    e.preventDefault();
+    navigate(pageName);
+  };
+
   return (
     <div className="branding">
-      <a className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
+      <a onClick={handleClick('index')} className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
       <div className="branding__content">
         <div className="nav">
-          <div className="nav__item"><a className="icon-link" href="/help.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
+          <div onClick={handleClick('help')} className="nav__item"><a className="icon-link" href="/help.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
-          <div className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
+          <div onClick={handleClick('overview')} className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
           <div className="nav__item"><a className="icon-link" href="#todo"><span className="icon icon--search icon-link__icon"></span>Search</a></div>
         </div>
       </div>

js/components/PageIndex.js

@@ -2,7 +2,7 @@ import React from 'react';
 import HeroHeadline from './HeroHeadline';
 import QuadrantGrid from './QuadrantGrid';
 
-export default function PageIndex({ items }) {
+export default function PageIndex({ items, navigate }) {
   return (
     <div>
       <div className="headline-group">

js/components/QuadrantGrid.js

@@ -7,7 +7,7 @@ const renderRing = (ringName, quadrantName, groups) => {
     return null;
   }
   return (
-    <div className="quadrant-section__ring">
+    <div key={ringName} className="quadrant-section__ring">
       <div className="ring-list">
         <div className="ring-list__header"><span className={`badge badge--${ringName}`}>{ringName}</span></div>
         {
@@ -51,7 +51,7 @@ const renderQuadrant = (quadrantName, groups) => {
   );
 }
 
-export default function({ items }) {
+export default function QuadrantGrid({ items }) {
   const groups = groupByQuadrants(items);
   return (
     <div className="quadrant-grid">

js/reducer.js

@@ -0,0 +1,22 @@
+import { NAVIGATE } from './actions';
+
+const initialState = {
+  pageName: 'index',
+  items: [],
+  releases: [],
+};
+
+const appReducer = (state = initialState, action = {}) => {
+  switch (action.type) {
+    case NAVIGATE:
+      return {
+        ...state,
+        pageName: action.pageName,
+      }
+      break;
+    default:
+      return state;
+  }
+}
+
+export default appReducer;

js/server.js

@@ -4,10 +4,7 @@ import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
 import App from './components/App';
-
+import appReducer from './reducer';
-const appReducer = (state = {}, action) => {
-  return state;
-}
 
 export const renderPage = (radar, pageName) => {
   // Create a new Redux store instance

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "build": "npm run clean && npm run build:pages && npm run build:js && npm run build:css && npm run build:assets",
     "build:all": "npm run build",
-    "build:pages": "babel-node ./tasks/build.js",
+    "build:pages": "RENDER_MODE=server babel-node ./tasks/build.js",
-    "build:js": "webpack --config webpack.config.js",
+    "build:js": "RENDER_MODE=client webpack --config webpack.config.js",
     "build:css": "postcss -c postcss.config.json -o dist/styles.css styles/main.css",
     "build:assets": "babel-node ./tasks/assets.js",
     "watch": "babel-node ./tasks/watch.js",
@@ -27,6 +27,7 @@
     "classnames": "2.2.5",
     "front-matter": "2.1.2",
     "fs-extra": "2.0.0",
+    "history": "4.5.1",
     "live-server": "1.2.0",
     "marked": "0.3.6",
     "moment": "2.17.1",