117 lines
3.1 KiB
React
Raw Normal View History

2017-12-17 12:27:07 +01:00
import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
2017-12-17 12:27:07 +01:00
2018-04-29 17:02:08 +02:00
import { apiUrl } from '../../utils'
2018-01-01 21:54:03 +01:00
function NavBar (props) {
return (
2017-12-17 12:27:07 +01:00
<header>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<span className="navbar-brand">mpwo</span>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<Link
className="nav-link"
to={{
pathname: '/',
}}
>
2017-12-25 18:19:28 +01:00
Dashboard
</Link>
2017-12-17 12:27:07 +01:00
</li>
2018-01-28 13:01:26 +01:00
{props.user.isAdmin && (
<li className="nav-item">
<Link
className="nav-link"
to={{
pathname: '/admin',
}}
>
Admin
</Link>
</li>
)}
2017-12-26 16:02:46 +01:00
</ul>
<ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
{!props.user.isAuthenticated && (
<li className="nav-item">
<Link
className="nav-link"
to={{
2017-12-26 16:02:46 +01:00
pathname: '/register',
}}
>
2017-12-26 16:02:46 +01:00
Register
</Link>
</li>
)}
{!props.user.isAuthenticated && (
<li className="nav-item">
<Link
className="nav-link"
to={{
2017-12-26 16:02:46 +01:00
pathname: '/login',
}}
>
2017-12-26 16:02:46 +01:00
Login
</Link>
</li>
)}
2018-01-01 21:54:03 +01:00
{props.user.picture === true && (
<img
2018-04-29 21:25:11 +02:00
alt="Avatar"
2018-04-29 17:02:08 +02:00
src={`${apiUrl}users/${props.user.id}/picture` +
2018-01-01 21:54:03 +01:00
`?${Date.now()}`}
className="img-fluid App-nav-profile-img"
/>
)}
{props.user.isAuthenticated && (
2017-12-26 16:02:46 +01:00
<li className="nav-item">
2017-12-31 18:43:24 +01:00
<Link
className="nav-link"
to={{
pathname: '/profile',
}}
>
{props.user.username}
</Link>
2017-12-26 16:02:46 +01:00
</li>
)}
{props.user.isAuthenticated && (
<li className="nav-item">
<Link
className="nav-link"
to={{
pathname: '/logout',
}}
>
Logout
</Link>
</li>
)}
2017-12-17 12:27:07 +01:00
</ul>
</div>
</nav>
</header>
)
2017-12-17 12:27:07 +01:00
}
export default connect(
state => ({
user: state.user,
})
)(NavBar)