More on routing

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

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