87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { useHistory } from 'react-router';
|
|
import { Link } from 'react-router-dom';
|
|
import { AUTH_TOKEN } from '../constants';
|
|
|
|
const Header = () => {
|
|
const history = useHistory();
|
|
const authToken = localStorage.getItem(AUTH_TOKEN);
|
|
return (
|
|
<div className="flex pa1 justify-between nowrap orange">
|
|
<div className="flex flex-fixed black">
|
|
<div className="fw7 mr1">Hacker News</div>
|
|
<Link to="/" className="ml1 no-underline black">
|
|
new
|
|
</Link>
|
|
<div className="ml1">|</div>
|
|
<Link to="/top" className="ml1 no-underline black">
|
|
top
|
|
</Link>
|
|
<div className="ml1">|</div>
|
|
<Link to="/search" className="ml1 no-underline black">
|
|
search
|
|
</Link>
|
|
{authToken && (
|
|
<div className="flex">
|
|
<div className="ml1">|</div>
|
|
<Link
|
|
to="/create"
|
|
className="ml1 no-underline black"
|
|
>
|
|
submit
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-fixed">
|
|
{authToken ? (
|
|
<div
|
|
className="ml1 pointer black"
|
|
onClick={() => {
|
|
localStorage.removeItem(AUTH_TOKEN);
|
|
history.push(`/`);
|
|
}}
|
|
>
|
|
logout
|
|
</div>
|
|
) : (
|
|
<Link
|
|
to="/login"
|
|
className="ml1 no-underline black"
|
|
>
|
|
login
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Header;
|
|
|
|
// import React from 'react';
|
|
// import { useHistory } from 'react-router';
|
|
// import { Link, withRouter } from 'react-router-dom';
|
|
|
|
// const Header = () => {
|
|
// const history = useHistory();
|
|
// return (
|
|
// <div className="flex pa1 justify-between nowrap orange">
|
|
// <div className="flex flex-fixed black">
|
|
// <div className="fw7 mr1">Hacker News</div>
|
|
// <Link to="/" className="ml1 no-underline black">
|
|
// new
|
|
// </Link>
|
|
// <div className="ml1">|</div>
|
|
// <Link
|
|
// to="/create"
|
|
// className="ml1 no-underline black"
|
|
// >
|
|
// submit
|
|
// </Link>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// export default Header;
|