{"size": 1481, "ext": "js", "max_stars_repo_path": "src/components/header/Header.js", "max_stars_repo_name": "oti4me/order-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/header/Header.js", "max_issues_repo_name": "oti4me/order-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/header/Header.js", "max_forks_repo_name": "oti4me/order-app", "max_forks_repo_forks_event_min_datetime": "2021-01-24T11:14:33.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-15T08:29:17.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 38.9736842105, "max_line_length": 110, "alphanum_fraction": 0.6198514517}
import React from 'react';
import {Link} from "react-router-dom";
import { logOut } from '../../actions/loginAction'
import {useDispatch, useSelector} from "react-redux";

const Header = (props) => {
  const dispatch = useDispatch();
  const isLoggedIn = useSelector(({ userReducer }) => userReducer.isLoggedIn);

  const handleLogout = () => {
    dispatch(logOut(props.history));
  }
  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <Link className="navbar-brand" to="/orders">Order Manager</Link>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
              aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"/>
      </button>
      <div className="collapse navbar-collapse" id="navbarNavDropdown">
        <ul className="navbar-nav">
          { isLoggedIn && <li className="nav-item active">
            <Link className="nav-link" to="/orders">Orders <span className="sr-only">(current)</span></Link>
          </li> }
          { !isLoggedIn && <li className="nav-item">
            <Link className="nav-link" to="/login">Login</Link>
          </li> }
          { isLoggedIn && <li className="nav-item">
            <Link className="nav-link" to="#" onClick={ (event) => handleLogout(event) }>Logout</Link>
          </li> }
        </ul>
      </div>
    </nav>
  )
}

export default Header;
