auth - header

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

// if the user is logged out display this header
const LoggedOutView = (props) => {
  if (!props.currentUser) {
    return (
      // list with navbar style (horizontal, spaced elements) pulled to the right
      <ul className="nav navbar-nav pull-xs-right">
        {/* nav item linking to home */}
        <li className="nav-item">
          <Link to="/" className="nav-link">
            Home
          </Link>
        </li>
        {/* nav item linking ot login */}
        <li className="nav-item">
          <Link to="login" className="nav-link">
            Sign in
          </Link>
        </li>
        {/* nav item linking to register */}
        <li className="nav-item">
          <Link to="register" className="nav-link">
            Sign up
          </Link>
        </li>
      </ul>
    );
  }
  return null;
};

// if the user is logged in display this header
const LoggedInView = (props) => {
  if (props.currentUser) {
    return (
      // ditto above
      <ul className="nav navbar-nav pull-xs-right">
        {/* nav item linking to home */}
        <li className="nav-item">
          <Link to="" className="nav-link">
            Home
          </Link>
        </li>
        {/* nav item linking to editor */}
        <li className="nav-item">
          <Link to="editor" className="nav-link">
            {/* display writing icon followed by a space followed by 'New Post' */}
            <i className="ion-compose" />
            &nbsp;New Post
          </Link>
        </li>
        {/* nav item linking to settings */}
        <li className="nav-item">
          <Link to="settings" className="nav-link">
            <i className="ion-gear-a" />
            &nbsp;Settings
          </Link>
        </li>
        {/* link to current user's profile with user's avatar and username */}
        <li className="nav-item">
          <Link to={`@${props.currentUser.username}`} className="nav-link">
            <img src={props.currentUser.image} className="user-pic" />
            {props.currentUser.username}
          </Link>
        </li>
      </ul>
    );
  }
  return null;
};

class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-light">
        <div className="container">
          {/* logo links to homepage */}
          <Link to="/" className="navbar-brand">
            {this.props.appName.toLowerCase()}
          </Link>
          {/* render loggedin/loggedoutview */}
          <LoggedOutView currentUser={this.props.currentUser} />
          <LoggedInView currentUser={this.props.currentUser} />
        </div>
      </nav>
    );
  }
}

export default Header;