diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx
index c95ebe2448..d902c72b45 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';
@@ -173,9 +173,10 @@ export default class extends React.Component {
key='points'
to='/settings'
>
-
- [ { points } ]
-
+
);
}
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 (
-
-
- { children }
-
-
- );
- }
-});
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 (
+
+ [ { points || 1 } ]
+
+ );
+ }
+});