{"size": 1012, "ext": "js", "max_stars_repo_path": "client/components/Navigation.js", "max_stars_repo_name": "iamstevechow/Stackathon", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/Navigation.js", "max_issues_repo_name": "iamstevechow/Stackathon", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/components/Navigation.js", "max_forks_repo_name": "iamstevechow/Stackathon", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.4888888889, "max_line_length": 60, "alphanum_fraction": 0.587944664}
import React from 'react';
import { connect } from 'react-redux';
import { logout } from '../store';
import { Icon, Menu } from 'semantic-ui-react';

const Navigation = props => {
  const handleClick = props.handleClick;
  return props.isLoggedIn && props.hasFirstName ? (
    <Menu secondary>
      <Menu.Item onClick={props.handleMenuClick}>
        <Icon name="bars" />
      </Menu.Item>
      <h2 style={{ fontFamily: 'cursive' }}>
        <big>Sous</big>
      </h2>
      <div className="right menu">
        <Menu.Item onClick={handleClick}>Log Out</Menu.Item>
      </div>
    </Menu>
  ) : (
    <Menu secondary>
      <h2 style={{ fontFamily: 'cursive' }}>
        <big>Sous</big>
      </h2>
    </Menu>
  );
};

const mapState = state => {
  return {
    isLoggedIn: !!state.user.id,
    hasFirstName: !!state.user.firstName
  };
};

const mapDispatch = dispatch => {
  return {
    handleClick() {
      dispatch(logout());
    }
  };
};

export default connect(mapState, mapDispatch)(Navigation);
