{"size": 2948, "ext": "js", "max_stars_repo_path": "anywhere-fitness/src/components/Header.js", "max_stars_repo_name": "anywhere-fitness-tt2/front-end", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "anywhere-fitness/src/components/Header.js", "max_issues_repo_name": "anywhere-fitness-tt2/front-end", "max_issues_repo_issues_event_min_datetime": "2021-01-31T15:56:56.000Z", "max_issues_repo_issues_event_max_datetime": "2021-02-05T17:16:31.000Z", "max_forks_repo_path": "anywhere-fitness/src/components/Header.js", "max_forks_repo_name": "anywhere-fitness-tt2/front-end", "max_forks_repo_forks_event_min_datetime": "2021-04-21T17:27:19.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-21T17:27:19.000Z"}
{"max_stars_count": null, "max_issues_count": 39, "max_forks_count": 1, "avg_line_length": 25.4137931034, "max_line_length": 74, "alphanum_fraction": 0.5780189959}
import React, { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import { connect } from 'react-redux';
import styled from 'styled-components';
import { Fade } from '@material-ui/core';

import { logout } from '../actions/index';

function Header(props) {
  const [fadeIn, setFadeIn] = useState(false);
  const location = useLocation();
  const { push } = useHistory();

  useEffect(() => {
    setTimeout(() => {
      setFadeIn(true);
    }, 5300);
  }, []);

  const profileClickHandler = () => {
    localStorage.getItem('token') && props.user.role === 'instructor'
      ? push(`/instructor-profile/${props.user.userId}`)
      : push(`/client-profile/${props.user.userId}`);
  };

  const logOutHandler = () => {
    props.logout();
    push('/');
  };

  const inSetting = location.pathname === '/' ? fadeIn : true;
  const timeoutSetting = location.pathname === '/' ? 1000 : 0;

  return (
    <Container>
      <Fade in={inSetting} timeout={timeoutSetting}>
        <div onClick={() => push('/')} className='logo'>
          <h1>
            Anywhere<span>Fitness</span>
          </h1>
        </div>
      </Fade>
      {localStorage.getItem('token') ? (
        <div className='buttons'>
          <Fade in={inSetting} timeout={timeoutSetting}>
            <button onClick={profileClickHandler}>Profile</button>
          </Fade>
          <Fade in={inSetting} timeout={timeoutSetting}>
            <button onClick={logOutHandler}>Logout</button>
          </Fade>
        </div>
      ) : (
        <div className='buttons'>
          <Fade in={inSetting} timeout={timeoutSetting}>
            <button onClick={() => push('/registration')}>Sign up</button>
          </Fade>
          <Fade in={inSetting} timeout={timeoutSetting}>
            <button onClick={() => push('/login')}>Login</button>
          </Fade>
        </div>
      )}
    </Container>
  );
}

const mapStateToProps = (state) => {
  return {
    loggedIn: state.loginReducer.loggedIn,
    user: state.loginReducer.user,
  };
};

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

const Container = styled.div`
  height: 6vh;
  background-color: ${(props) => props.theme.midGray};
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    cursor: pointer;
  }

  h1 {
    margin: 0 30px;
    font-family: ${(props) => props.theme.titleFont};
    color: ${(props) => props.theme.yellow};

    span {
      color: whitesmoke;
    }
  }

  .buttons {
    margin: 0 30px;
  }

  button {
    margin: 10px;
    padding: 5px;
    width: 80px;
    font-family: ${(props) => props.theme.bodyFont};
    border: 1px solid ${(props) => props.theme.yellow};
    background-color: ${(props) => props.theme.midGray};
    color: whitesmoke;

    &:hover {
      background-color: ${(props) => props.theme.yellow};
      color: ${(props) => props.theme.midGray};
    }
  }
`;
