<commit_before>import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { logout } from 'containers/Authentication/actions/authActions';

const StyledNav = styled.nav`
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  z-index: 100;
  box-shadow: none;
`;

class NavBar extends React.PureComponent {
  constructor() {
    super();
    this.logout = this.logout.bind(this);
  }
  logout(e) {
    e.preventDefault();
    this.props.logout();
  }

  render() {
    const { isAuthenticated } = this.props.auth;

    const userLinks = (
      <ul className="navbar-nav">
        <li className="nav-item"><Link className="nav-link" to="/restaurant">{ this.props.auth.user.email }</Link></li>
        <li className="nav-item"><Link className="nav-link" to="/restaurant">My Favorites</Link></li>
        <li className="nav-item"><a className="nav-link" href="/logout" onClick={this.logout}>Log out</a></li>
      </ul>
    );

    const guestLinks = (
      <ul className="navbar-nav">
        <li className="nav-item"><Link className="nav-link" to="/signup">Sign up</Link></li>
        <li className="nav-item"><Link className="nav-link" to="/login">Log in</Link></li>
      </ul>
    );

    return (
      <StyledNav className="navbar navbar-toggleable-md navbar-light bg-faded">
        <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <Link className="navbar-brand" to="/">Test</Link>
        <div className="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
          { isAuthenticated ? userLinks : guestLinks }
        </div>
      </StyledNav>
    );
  }
}

NavBar.propTypes = {
  auth: React.PropTypes.object.isRequired,
  logout: React.PropTypes.func.isRequired,
};

function mapStateToProps(state) {
  return {
    auth: state.get('auth'),
  };
}

export default connect(mapStateToProps, { logout })(NavBar);
<commit_msg>change nav style according to user role<commit_after>import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { logout } from 'containers/Authentication/actions/authActions';

const StyledNav = styled.nav`
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  z-index: 100;
  box-shadow: none;
`;

class NavBar extends React.PureComponent {
  constructor() {
    super();
    this.logout = this.logout.bind(this);
  }
  logout(e) {
    e.preventDefault();
    this.props.logout();
  }

  render() {
    const { isAuthenticated, user} = this.props.auth;
    let link
    const userLinks = (
      <ul className="navbar-nav">
        <li className="nav-item"><Link className="nav-link" to="/profile">{ this.props.auth.user.email }</Link></li>
        <li className="nav-item"><Link className="nav-link" to="/restaurant">My Favorites</Link></li>
        <li className="nav-item"><a className="nav-link" href="/logout" onClick={this.logout}>Log out</a></li>
      </ul>
    );

    const guestLinks = (
      <ul className="navbar-nav">
        <li className="nav-item"><Link className="nav-link" to="/signup">Sign up</Link></li>
        <li className="nav-item"><Link className="nav-link" to="/login">Log in</Link></li>
      </ul>
    );

    const businessLinks = (
      <ul className="navbar-nav">
        <li className="nav-item"><Link className="nav-link" to="/profile">{ this.props.auth.user.email }</Link></li>
        <li className="nav-item"><Link className="nav-link" to="/restaurant">My restaurant</Link></li>
        <li className="nav-item"><a className="nav-link" href="/logout" onClick={this.logout}>Log out</a></li>
      </ul>
    );

    if(!isAuthenticated){
      link = guestLinks;
    } else if(user.role === "customer"){
      link = userLinks;
    } else if(user.role === "business"){
      link = businessLinks;
    }

    return (
      <StyledNav className="navbar navbar-toggleable-md navbar-light bg-faded">
        <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <Link className="navbar-brand" to="/">Test</Link>
        <div className="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
          {link}
        </div>
      </StyledNav>
    );
  }
}

NavBar.propTypes = {
  auth: React.PropTypes.object.isRequired,
  logout: React.PropTypes.func.isRequired,
};

function mapStateToProps(state) {
  return {
    auth: state.get('auth'),
  };
}

export default connect(mapStateToProps, { logout })(NavBar);

{'fraction_non_alphanumeric': 0.1690840453010133, 'fraction_numerical': 0.00397377309755613, 'mean_word_length': 3.454867256637168, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7452464', 'n_tokens_mistral': 1659, 'n_tokens_neox': 1596, 'n_words': 314}