import React from 'react';
import { Link } from 'react-router';

class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-default navbar-static-top">
        <div className="container">
          <div className="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar" className="navbar-toggle collapsed">
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <Link to="/" className="navbar-brand">Project name</Link>
          </div>
          <div id="navbar" className="navbar-collapse collapse">
            <ul className="nav navbar-nav">
              <li><Link to="/">Home</Link></li>
              <li><Link to="/contact">Contact</Link></li>
            </ul>
            <ul className="nav navbar-nav navbar-right">
              <li><Link to="/login">Log in</Link></li>
              <li><Link to="/signup">Sign up</Link></li>
            </ul>
          </div>
        </div>
      </nav>
    );
  }
}

export default Header;

@@ -56,16 +56,54 @@
 router';
+%0Aimport %7B connect %7D from 'react-redux'
 %0A%0Aclass 
@@ -148,16 +148,915 @@
 der() %7B%0A
+    const %7B user %7D = this.props;%0A%0A    let rightNav;%0A%0A    if (user) %7B%0A      rightNav = (%0A        %3Cul className=%22nav navbar-nav navbar-right%22%3E%0A          %3Cli className=%22dropdown%22%3E%0A            %3Ca href=%22#%22 data-toggle=%22dropdown%22 className=%22navbar-avatar dropdown-toggle%22%3E%0A              %3Cimg src=%7Buser.picture %7C%7C user.gravatar%7D /%3E %7Buser.name %7C%7C user.email %7C%7C user.id%7D%0A              %3Ci className=%22caret%22%3E%3C/i%3E%0A            %3C/a%3E%0A            %3Cul className=%22dropdown-menu%22%3E%0A              %3Cli%3E%3CLink to=%22/account%22%3EMy Account%3C/Link%3E%3C/li%3E%0A              %3Cli className=%22divider%22%3E%3C/li%3E%0A              %3Cli%3E%3CLink to=%22/logout%22%3ELogout%3C/Link%3E%3C/li%3E%0A            %3C/ul%3E%0A          %3C/li%3E%0A        %3C/ul%3E%0A      );%0A    %7D else %7B%0A      rightNav = (%0A        %3Cul className=%22nav navbar-nav navbar-right%22%3E%0A          %3Cli%3E%3CLink to=%22/login%22%3ELog in%3C/Link%3E%3C/li%3E%0A          %3Cli%3E%3CLink to=%22/signup%22%3ESign up%3C/Link%3E%3C/li%3E%0A        %3C/ul%3E%0A      );%0A    %7D%0A%0A
     retu
@@ -1888,240 +1888,189 @@
     
-%3Cul className=%22nav navbar-nav navbar-right%22%3E%0A              %3Cli%3E%3CLink to=%22/login%22%3ELog in%3C/Link%3E%3C/li%3E%0A              %3Cli%3E%3CLink to=%22/signup%22%3ESign up%3C/Link%3E%3C/li%3E%0A            %3C/ul%3E%0A          %3C/div%3E%0A        %3C/div%3E%0A      %3C/nav%3E%0A    );
+%7BrightNav%7D%0A          %3C/div%3E%0A        %3C/div%3E%0A      %3C/nav%3E%0A    );%0A  %7D%0A%7D%0A%0Aconst mapReduxStateToHeaderProps = (state) =%3E %7B%0A  return %7B%0A    token: state.token,%0A    user: state.user
 %0A  %7D
+;
 %0A%7D
+;
 %0A%0Aex
@@ -2082,16 +2082,53 @@
 default 
-Header
+connect(mapReduxStateToHeaderProps)(Header)
 ;%0A

Use Redux for header component, show user info if available