Add Link component

common/config.js

@@ -11,9 +11,11 @@ export const getPageNames = (radar) => {
     'overview',
     'help',
     ...quadrants,
+    ...getItemPageNames(radar.items),
   ]
 }
 
+export const getItemPageNames = (items) => items.map(item => `${item.quadrant}/${item.name}`);
 
 export const rings = [
   'assess',

js/client.js

@@ -28,7 +28,7 @@ const historyManager = store => {
 
   return next => action => {
     if(action.type === NAVIGATE && action.pushToHistory === true) {
-      history.push(`${action.pageName}.html`);
+      history.push(`/${action.pageName}.html`);
     }
     return next(action);
   }

js/components/Header.js

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

js/components/Item.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
+import Link from './Link';
 
 export default function Item({ item, noLeadingBorder = false}) {
   return (
-    <a
+    <Link
       className={classNames('item', {
         'item--no-leading-border': noLeadingBorder,
       })}
-      href={`/${item.quadrant}/${item.name}.html`}
+      pageName={`${item.quadrant}/${item.name}`}
     >
       <div className="item__title">{item.title}</div>
       {
@@ -15,6 +16,6 @@ export default function Item({ item, noLeadingBorder = false}) {
           <div className="item__info">{item.info}</div>
         )
       }
-    </a>
+    </Link>
   );
 }

js/components/Link.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import actions from '../actions';
+
+function Link({ pageName, children, navigate, className}) {
+  const handleClick = (e) => {
+    e.preventDefault();
+    navigate(pageName);
+  };
+
+  return (
+    <a href={`/${pageName}.html`} onClick={handleClick} {...{ className }}>
+      {children}
+    </a>
+  );
+}
+
+export default connect(
+  undefined,
+  actions
+)(Link);

js/components/PageItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+
+export default function PageItems({ pageName, items }) {
+  const [quadrantName, itemName] = pageName.split('/');
+  const item = items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
+  return (
+    <div>
+      <HeroHeadline>{item.title}</HeroHeadline>
+    </div>
+  );
+}

js/components/PageOverview.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import HeadlineGroup from './HeadlineGroup';
 import HeroHeadline from './HeroHeadline';
 import Badge from './Badge';
+import Link from './Link';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
@@ -76,7 +77,11 @@ class PageOverview extends React.Component {
                     <div className="item-list__list">
                       {
                         items.map((item) => (
-                          <a key={item.name} className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
+                          <Link
+                            key={item.name}
+                            className="item item--big item--no-leading-border item--no-trailing-border"
+                            pageName={`${item.quadrant}/${item.name}`}
+                          >
                             <div className="split split--overview">
                               <div className="split__left">
                                 <div className="item__title">{item.title}</div>
@@ -90,7 +95,7 @@ class PageOverview extends React.Component {
                                 </div>
                               </div>
                             </div>
-                          </a>
+                          </Link>
                         ))
                       }
                     </div>

js/components/QuadrantSection.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { translate, rings } from '../../common/config';
 import Badge from './Badge';
 import Item from './Item';
+import Link from './Link';
 
 const renderList = (ringName, quadrantName, groups, big) => {
   const itemsInRing = groups[quadrantName][ringName];
@@ -34,7 +35,7 @@ const renderList = (ringName, quadrantName, groups, big) => {
             key={item.name}
             className="ring-list__item"
           >
-            <a className="link" href={`/${item.quadrant}/${item.name}.html`}>{item.title}</a>
+            <Link className="link" pageName={`${item.quadrant}/${item.name}`}>{item.title}</Link>
           </span>
         ))
       }
@@ -65,9 +66,9 @@ export default function QuadrantSection({ quadrantName, groups, big = false }) {
           {
             !big && (
               <div className="split__right">
-                <a className="icon-link" href={`/${quadrantName}.html`}>
+                <Link className="icon-link" pageName={`${quadrantName}`}>
                   <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
-                </a>
+                </Link>
               </div>
             )
           }

js/components/Router.js

@@ -3,10 +3,11 @@ import PageIndex from './PageIndex';
 import PageOverview from './PageOverview';
 import PageHelp from './PageHelp';
 import PageQuadrant from './PageQuadrant';
-import { quadrants } from '../../common/config';
+import PageItem from './PageItem';
+import { quadrants, getItemPageNames } from '../../common/config';
 
 
-const getPageByName = (pageName) => {
+const getPageByName = (items, pageName) => {
   if (pageName === 'index') {
     return PageIndex;
   }
@@ -19,11 +20,14 @@ const getPageByName = (pageName) => {
   if (quadrants.includes(pageName)) {
     return PageQuadrant;
   }
+  if (getItemPageNames(items).includes(pageName)) {
+    return PageItem;
+  }
 
   return 'div';
 }
 
 export default function Router({ pageName, ...props}) {
-  const Comp = getPageByName(pageName);
+  const Comp = getPageByName(props.items, pageName);
   return <Comp {...props} pageName={pageName} />;
 }