2017-12-17 12:27:07 +01:00
|
|
|
import React from 'react'
|
2017-12-25 17:45:28 +01:00
|
|
|
import { connect } from 'react-redux'
|
2017-12-17 14:33:04 +01:00
|
|
|
import { Link } from 'react-router-dom'
|
2017-12-17 12:27:07 +01:00
|
|
|
|
2018-01-01 21:54:03 +01:00
|
|
|
import mpwoApi from '../../mpwoApi'
|
|
|
|
|
|
|
|
|
2017-12-25 17:45:28 +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">
|
2017-12-17 14:33:04 +01:00
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/',
|
|
|
|
}}
|
|
|
|
>
|
2017-12-25 18:19:28 +01:00
|
|
|
Dashboard
|
2017-12-17 14:33:04 +01:00
|
|
|
</Link>
|
2017-12-17 12:27:07 +01:00
|
|
|
</li>
|
2017-12-26 16:02:46 +01:00
|
|
|
</ul>
|
|
|
|
<ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
2017-12-25 17:45:28 +01:00
|
|
|
{!props.user.isAuthenticated && (
|
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
2017-12-26 16:02:46 +01:00
|
|
|
pathname: '/register',
|
2017-12-25 17:45:28 +01:00
|
|
|
}}
|
|
|
|
>
|
2017-12-26 16:02:46 +01:00
|
|
|
Register
|
2017-12-25 17:45:28 +01:00
|
|
|
</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-25 17:45:28 +01:00
|
|
|
}}
|
|
|
|
>
|
2017-12-26 16:02:46 +01:00
|
|
|
Login
|
2017-12-25 17:45:28 +01:00
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
2018-01-01 21:54:03 +01:00
|
|
|
{props.user.picture === true && (
|
|
|
|
<img
|
|
|
|
alt="Profile"
|
|
|
|
src={`${mpwoApi.getApiUrl()}users/${props.user.id}/picture` +
|
|
|
|
`?${Date.now()}`}
|
|
|
|
className="img-fluid App-nav-profile-img"
|
|
|
|
/>
|
|
|
|
)}
|
2017-12-25 17:45:28 +01:00
|
|
|
{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 && (
|
2017-12-25 17:45:28 +01:00
|
|
|
<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-25 17:45:28 +01:00
|
|
|
)
|
2017-12-17 12:27:07 +01:00
|
|
|
}
|
2017-12-25 17:45:28 +01:00
|
|
|
export default connect(
|
|
|
|
state => ({
|
|
|
|
user: state.user,
|
|
|
|
})
|
|
|
|
)(NavBar)
|