gRomkoPlayer/src/components/Header.js

import React, { useState, useEffect } from "react";

import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logOut } from "../actions/authActions";
import { useHistory } from "react-router-dom";

const Header = ({ logOut }) => {
  let history = useHistory();

  function onLogOut() {
    logOut();
    history.push("/");
  }

  return (
    <div className="header">
      <ul className="mainMenu">
        <li>
          <h2>gRomkoPlayer</h2>
        </li>
        <li onClick={() => history.push("/private")}>
          <h2>Library</h2>
        </li>
        <li onClick={() => history.push("/all_playlists")}>
          <h2>All Playlists</h2>
        </li>
        <li onClick={() => history.push("/my_playlists")}>
          <h2>My Playlists</h2>
        </li>
        <li onClick={() => history.push("/search")}>
          <h2>Search</h2>
        </li>
        <li className="userMenu">
          <h2>User: {localStorage.user}</h2>
          <ul className="userMenu-child">
            <li onClick={() => onLogOut()}>Log out</li>
          </ul>
        </li>
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => ({
  state: state,
});
export default connect(mapStateToProps, { logOut })(Header);