From 10de64c442f9acfa3eeb255f6f1d9bd9031f8748 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Fri, 5 Aug 2016 15:15:40 -0700
Subject: [PATCH] Fix(nav): clicking on points should not hit server
 Refactor(nav): fccnavitem is now points-nav-item

---
 common/app/components/Nav/Nav.jsx             |  9 +-
 common/app/components/Nav/NavItem.jsx         | 91 -------------------
 common/app/components/Nav/Points-Nav-Item.jsx | 40 ++++++++
 3 files changed, 45 insertions(+), 95 deletions(-)
 delete mode 100644 common/app/components/Nav/NavItem.jsx
 create mode 100644 common/app/components/Nav/Points-Nav-Item.jsx

diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx
index a3c60b4894..30681e8b17 100644
--- a/common/app/components/Nav/Nav.jsx
+++ b/common/app/components/Nav/Nav.jsx
@@ -10,7 +10,7 @@ import {
 } from 'react-bootstrap';
 
 import navLinks from './links.json';
-import FCCNavItem from './NavItem.jsx';
+import PointsNavItem from './Points-Nav-Item.jsx';
 import AvatarNavItem from './Avatar-Nav-Item.jsx';
 
 const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
@@ -176,9 +176,10 @@ export default class extends React.Component {
         key='points'
         to='/settings'
         >
-        <FCCNavItem className='brownie-points-nav'>
-          [ { points } ]
-        </FCCNavItem>
+        <PointsNavItem
+          className='brownie-points-nav'
+          points={ points }
+        />
       </LinkContainer>
     );
   }
diff --git a/common/app/components/Nav/NavItem.jsx b/common/app/components/Nav/NavItem.jsx
deleted file mode 100644
index 8d1a21407e..0000000000
--- a/common/app/components/Nav/NavItem.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-export default React.createClass({
-  displayName: 'FCCNavItem',
-
-  propTypes: {
-    active: React.PropTypes.bool,
-    'aria-controls': React.PropTypes.string,
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    eventKey: React.PropTypes.any,
-    href: React.PropTypes.string,
-    linkId: React.PropTypes.string,
-    onSelect: React.PropTypes.func,
-    role: React.PropTypes.string,
-    target: React.PropTypes.string,
-    title: React.PropTypes.node
-  },
-
-  getDefaultProps() {
-    return {
-      href: '#'
-    };
-  },
-
-  handleClick(e) {
-    if (this.props.onSelect) {
-      e.preventDefault();
-
-      if (!this.props.disabled) {
-        this.props.onSelect(
-          this.props.eventKey,
-          this.props.href,
-          this.props.target
-        );
-      }
-    }
-  },
-
-  render() {
-    let {
-      role,
-      linkId,
-      disabled,
-      active,
-      href,
-      title,
-      target,
-      children,
-      'aria-controls': ariaControls,  // eslint-disable-line react/prop-types
-      className
-    } = this.props;
-
-    const linkClassName = classNames(className, {
-      // 'active': active, we don't actually use the active class
-      // but it is used for a11y below
-      disabled: disabled
-    });
-
-    let linkProps = {
-      role,
-      href,
-      title,
-      target,
-      id: linkId,
-      onClick: this.handleClick,
-      ref: 'anchor'
-    };
-
-    if (!role && href === '#') {
-      linkProps.role = 'button';
-    }
-
-    return (
-      <li
-        role='presentation'
-        >
-        <a
-          { ...linkProps }
-          aria-controls={ ariaControls }
-          aria-selected={ active }
-          className={ linkClassName }
-          >
-          { children }
-        </a>
-      </li>
-    );
-  }
-});
diff --git a/common/app/components/Nav/Points-Nav-Item.jsx b/common/app/components/Nav/Points-Nav-Item.jsx
new file mode 100644
index 0000000000..633a237cd2
--- /dev/null
+++ b/common/app/components/Nav/Points-Nav-Item.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+export default React.createClass({
+  displayName: 'Points',
+
+  propTypes: {
+    'aria-controls': React.PropTypes.string,
+    className: React.PropTypes.string,
+    href: React.PropTypes.string,
+    onClick: React.PropTypes.func.isRequired,
+    points: React.PropTypes.func,
+    title: React.PropTypes.node
+  },
+
+  render() {
+    let {
+      href,
+      title,
+      points,
+      'aria-controls': ariaControls,  // eslint-disable-line react/prop-types
+      className,
+      onClick
+    } = this.props;
+
+    let linkProps = {
+      title,
+      href,
+      onClick,
+      className,
+      ref: 'anchor',
+      'aria-controls': ariaControls
+    };
+
+    return (
+      <li role='presentation'>
+        <a { ...linkProps }>[ { points || 1 } ]</a>
+      </li>
+    );
+  }
+});