From 517df35b94efe9c178245b0afc8b131c3ff08fb0 Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Mon, 20 Feb 2017 22:51:30 +0100
Subject: [PATCH] More on routing

---
 js/actions.js                 | 25 +++++++++++++++++++++++++
 js/client.js                  |  4 +---
 js/components/App.js          |  8 ++++++--
 js/components/Header.js       | 13 +++++++++----
 js/components/PageIndex.js    |  2 +-
 js/components/QuadrantGrid.js |  4 ++--
 js/reducer.js                 | 22 ++++++++++++++++++++++
 js/server.js                  |  5 +----
 package.json                  |  5 +++--
 9 files changed, 70 insertions(+), 18 deletions(-)
 create mode 100644 js/actions.js
 create mode 100644 js/reducer.js

diff --git a/js/actions.js b/js/actions.js
new file mode 100644
index 0000000..bfbced5
--- /dev/null
+++ b/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;
diff --git a/js/client.js b/js/client.js
index a5b7a49..1bb06e8 100644
--- a/js/client.js
+++ b/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__;
diff --git a/js/components/App.js b/js/components/App.js
index fab58f1..ee37e1b 100644
--- a/js/components/App.js
+++ b/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);
diff --git a/js/components/Header.js b/js/components/Header.js
index bf9397e..0163da3 100644
--- a/js/components/Header.js
+++ b/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 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('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 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>
diff --git a/js/components/PageIndex.js b/js/components/PageIndex.js
index 843010f..e79f869 100644
--- a/js/components/PageIndex.js
+++ b/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">
diff --git a/js/components/QuadrantGrid.js b/js/components/QuadrantGrid.js
index 54cfa7b..6238703 100644
--- a/js/components/QuadrantGrid.js
+++ b/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">
diff --git a/js/reducer.js b/js/reducer.js
new file mode 100644
index 0000000..31b3b7d
--- /dev/null
+++ b/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;
diff --git a/js/server.js b/js/server.js
index ee98b61..73903a9 100644
--- a/js/server.js
+++ b/js/server.js
@@ -4,10 +4,7 @@ import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
 import App from './components/App';
-
-const appReducer = (state = {}, action) => {
-  return state;
-}
+import appReducer from './reducer';
 
 export const renderPage = (radar, pageName) => {
   // Create a new Redux store instance
diff --git a/package.json b/package.json
index c20d4d2..ace4099 100644
--- a/package.json
+++ b/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:js": "webpack --config webpack.config.js",
+    "build:pages": "RENDER_MODE=server babel-node ./tasks/build.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",