Add react links to nav bar

common/app/components/Flash/Queue.jsx

@@ -0,0 +1,27 @@
+import React, { createClass, PropTypes } from 'react';
+import { Alert } from 'react-bootstrap';
+
+export default createClass({
+  displayName: 'FlashQueue',
+
+  propTypes: {
+    messages: PropTypes.array
+  },
+
+  renderMessages(messages) {
+    return messages.map(message => {
+      return (
+        <Alert>
+      );
+    });
+  },
+
+  render() {
+    const { messages = [] } = this.props;
+    return (
+      <div>
+        { this.renderMessages(messages) }
+      </div>
+    );
+  }
+});

common/app/components/Nav/Nav.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { LinkContainer } from 'react-router-bootstrap';
 import {
   Col,
   CollapsibleNav,
@@ -11,16 +12,6 @@ import navLinks from './links.json';
 import FCCNavItem from './NavItem.jsx';
 
 const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
-const navElements = navLinks.map((navItem, index) => {
-  return (
-    <NavItem
-      eventKey={ index + 1 }
-      href={ navItem.link }
-      key={ index }>
-      { navItem.content }
-    </NavItem>
-  );
-});
 
 const logoElement = (
   <a href='/'>
@@ -39,18 +30,40 @@ const toggleButton = (
   </button>
 );
 
-export default class extends React.Component {
+export default React.createClass({
-  constructor(props) {
+  displayName: 'Nav',
-    super(props);
-  }
 
-  static displayName = 'Nav'
+  propTypes: {
-  static propTypes = {
     points: PropTypes.number,
     picture: PropTypes.string,
     signedIn: PropTypes.bool,
     username: PropTypes.string
-  }
+  },
+
+  renderLinks() {
+    return navLinks.map(({ content, link, react }, index) => {
+      if (react) {
+        return (
+          <LinkContainer
+            eventKey={ index + 1 }
+            key={ content }
+            to={ link }>
+            <NavItem>
+              { content }
+            </NavItem>
+          </LinkContainer>
+        );
+      }
+      return (
+        <NavItem
+          eventKey={ index + 1 }
+          href={ link }
+          key={ content }>
+          { content }
+        </NavItem>
+      );
+    });
+  },
 
   renderPoints(username, points) {
     if (!username) {
@@ -62,7 +75,7 @@ export default class extends React.Component {
         [ { points } ]
       </NavItem>
     );
-  }
+  },
 
   renderSignin(username, picture) {
     if (username) {
@@ -87,7 +100,7 @@ export default class extends React.Component {
         </FCCNavItem>
       );
     }
-  }
+  },
 
   render() {
     const { username, points, picture } = this.props;
@@ -103,12 +116,12 @@ export default class extends React.Component {
             className='hamburger-dropdown'
             navbar={ true }
             right={ true }>
-            { navElements }
+            { this.renderLinks() }
-            { this.renderPoints(username, points)}
+            { this.renderPoints(username, points) }
             { this.renderSignin(username, picture) }
           </Nav>
         </CollapsibleNav>
       </Navbar>
     );
   }
-}
+});

common/app/components/Nav/NavItem.jsx

@@ -4,11 +4,14 @@ import BootstrapMixin from 'react-bootstrap/lib/BootstrapMixin';
 
 export default React.createClass({
   displayName: 'FCCNavItem',
+
   mixins: [BootstrapMixin],
 
   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,
@@ -30,7 +33,11 @@ export default React.createClass({
       e.preventDefault();
 
       if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, this.props.href, this.props.target);
+        this.props.onSelect(
+          this.props.eventKey,
+          this.props.href,
+          this.props.target
+        );
       }
     }
   },
@@ -50,10 +57,11 @@ export default React.createClass({
       ...props
     } = this.props;
 
-    let classes = {
+    const linkClassName = classNames(className, {
-      active,
+      // 'active': active, we don't actually use the active class
-      disabled
+      // but it is used for a11y below
-    };
+      'disabled': disabled
+    });
 
     let linkProps = {
       role,
@@ -75,9 +83,9 @@ export default React.createClass({
         role='presentation'>
         <a
           { ...linkProps }
-          aria-selected={ active }
           aria-controls={ ariaControls }
-          className={ className }>
+          aria-selected={ active }
+          className={ linkClassName }>
           { children }
         </a>
       </li>

common/app/components/Nav/links.json

@@ -9,5 +9,6 @@
   "link": "/news"
 },{
   "content": "Jobs",
-  "link": "/jobs"
+  "link": "/jobs",
+  "react": true
 }]