From cbb41b3edab66c6592d57f98d10ba1e213183de5 Mon Sep 17 00:00:00 2001
From: Jan-Espen Oversand <sigsegv@radiotube.org>
Date: Wed, 13 Dec 2017 00:23:51 +0100
Subject: [PATCH 1/2] Add onClick to both NavItem and dropdown items.

---
 src/scripts/app.jsx                     | 14 +++++++++++---
 src/scripts/components/DropdownMenu.jsx | 11 ++++++++++-
 src/scripts/components/NavItem.jsx      | 12 +++++++++++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/scripts/app.jsx b/src/scripts/app.jsx
index fda388b..8b07ad5 100644
--- a/src/scripts/app.jsx
+++ b/src/scripts/app.jsx
@@ -8,7 +8,9 @@ import DropdownMenu from './components/DropdownMenu';
 
 const navitems = [
     {link: '#', title: 'Setup'},
-    {link: '#', title: 'Usage'},
+    {link: '#', title: 'Usage', onClick: function () {
+        alert('Usage');
+    }},
     {link: '#', title: 'Advanced'},
     {link: '#', title: 'Try it out'},
     {link: '#', title: 'FAQ'}
@@ -16,7 +18,9 @@ const navitems = [
 
 const dropdownItems = [
     {href: '#', name: 'ES2015'},
-    {href: '#', name: 'Setup'},
+    {href: '#', name: 'Setup', onClick: function (item) {
+        alert('Setup clicked');
+    }},
     {href: '#', name: 'Usage'},
     {href: '#', name: 'Advanced'},
     {href: '#', name: 'Try it'},
@@ -28,7 +32,11 @@ const navbarInstance = (
         <NavbarHeader href="http://www.google.com" name="Babel"/>
         <NavbarItems>
             {navitems.map(item => {
-                return <NavItem key={navitems.indexOf(item)} link={item.link} title={item.title} />;
+                if (typeof(item.onClick) !== 'undefined') {
+                    return <NavItem key={navitems.indexOf(item)} link={item.link} title={item.title} onClick={item.onClick}/>;
+                } else {
+                    return <NavItem key={navitems.indexOf(item)} link={item.link} title={item.title}/>;
+                }
             })}
             <NavbarDropdown name="Dropdown">
                 <DropdownMenu menuItems={dropdownItems}/>
diff --git a/src/scripts/components/DropdownMenu.jsx b/src/scripts/components/DropdownMenu.jsx
index 086926f..dddd6f7 100644
--- a/src/scripts/components/DropdownMenu.jsx
+++ b/src/scripts/components/DropdownMenu.jsx
@@ -85,6 +85,15 @@ export default class DropdownMenu extends React.Component {
         return styles;
     }
 
+    clickHandler(event, item) {
+        if (typeof(item.onClick) !== 'undefined') {
+            event.preventDefault();
+            item.onClick(item);
+            return false;
+        }
+        return true;
+    }
+
     render() {
         const defStyle = this.getStyles();
         const {menuItems, style, menuItemStyle} = this.props;
@@ -94,7 +103,7 @@ export default class DropdownMenu extends React.Component {
                   return (
                     <li key={menuItems.indexOf(item)}>
                         <a key={item.name} style={[defStyle.link, menuItemStyle && menuItemStyle]}
-                            href={item.href}>{item.name}
+                            onClick={(event) => { return this.clickHandler(event, item); }} href={item.href}>{item.name}
                         </a>
                     </li>
                   );
diff --git a/src/scripts/components/NavItem.jsx b/src/scripts/components/NavItem.jsx
index 63737df..17fbe81 100644
--- a/src/scripts/components/NavItem.jsx
+++ b/src/scripts/components/NavItem.jsx
@@ -6,6 +6,7 @@ export default class NavItem extends React.Component {
     displayName = 'Navigation bar item'
 
     static propTypes = {
+        onClick: React.PropTypes.func,
         link:  React.PropTypes.string,
         title: React.PropTypes.string,
         style: React.PropTypes.object,
@@ -54,12 +55,21 @@ export default class NavItem extends React.Component {
         };
     }
 
+    clickHandler(event) {
+        if (typeof(this.props.onClick) !== 'undefined') {
+            event.preventDefault();
+            this.props.onClick();
+            return false;
+        }
+        return true;
+    }
+
     render() {
         const defStyle = this.getStyles();
         const {style, link, title, itemStyle} = this.props;
         return (
           <li ref="list" style={[defStyle.base, style && style]}>
-              <a ref="link" href={link} style={[defStyle.link, itemStyle && itemStyle]}>{title}</a>
+              <a ref="link" onClick={(event) => { return this.clickHandler(event); }} href={link} style={[defStyle.link, itemStyle && itemStyle]}>{title}</a>
           </li>
         );
     }

From 35ba8a2bdaa97183543e5311a3774a0fa87db6e9 Mon Sep 17 00:00:00 2001
From: Jan-Espen Oversand <sigsegv@radiotube.org>
Date: Fri, 22 Dec 2017 21:30:43 +0100
Subject: [PATCH 2/2] Upgrade to a more recent reactjs.

---
 package.json        | 3 ++-
 src/scripts/app.jsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2e8b86f..8736892 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "path-is-absolute": "^1.0.0",
     "radium": "^0.13.4",
-    "react": "^0.13.3"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
   }
 }
diff --git a/src/scripts/app.jsx b/src/scripts/app.jsx
index 8b07ad5..19db14e 100644
--- a/src/scripts/app.jsx
+++ b/src/scripts/app.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Navbar from './components/Navbar';
 import NavItem from './components/NavItem';
 import NavbarHeader from './components/NavbarHeader';
@@ -48,4 +49,4 @@ const navbarInstance = (
     </Navbar>
 );
 
-React.render(navbarInstance, document.getElementById('navigation_bar'));
+ReactDOM.render(navbarInstance, document.getElementById('navigation_bar'));