59 lines
2.2 KiB
JavaScript
59 lines
2.2 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import axios from 'axios';
|
|
import './css/Header.css';
|
|
|
|
const Header = () => {
|
|
const [display_name, setDisplay_name] = useState('');
|
|
const [avatar, setAvatar] = useState('');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isAnimated, setIsAnimated] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkSession = async () => {
|
|
try {
|
|
const response = await axios.get('/api/users/me');
|
|
setDisplay_name(response.data.display_name);
|
|
setAvatar(response.data.avatar_url);
|
|
} catch {}
|
|
setIsLoading(false);
|
|
setTimeout(() => setIsAnimated(true), 150);
|
|
};
|
|
checkSession();
|
|
}, []);
|
|
|
|
return (
|
|
<header className="header">
|
|
<div className="header-container">
|
|
<div className="logo">
|
|
<Link to="/main">
|
|
<h1>Fool-stack</h1>
|
|
</Link>
|
|
</div>
|
|
<nav className="nav">
|
|
{!isLoading && (
|
|
<ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
|
|
{display_name ? (
|
|
<>
|
|
<li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li>
|
|
<li>
|
|
<Link to="/profile">
|
|
{display_name}<img className="nav-avatar" src={avatar} alt=''></img>
|
|
</Link>
|
|
</li>
|
|
</>
|
|
) : (
|
|
<>
|
|
<li><Link to="/registration">Регистрация</Link></li>
|
|
<li><Link to="/login">Вход</Link></li>
|
|
</>
|
|
)}
|
|
</ul>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header; |