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-04-29 17:02:08 +02:00
|
|
|
import { apiUrl } from '../../utils'
|
2018-01-01 21:54:03 +01:00
|
|
|
|
2019-01-09 12:07:57 +01:00
|
|
|
class NavBar extends React.PureComponent {
|
|
|
|
render() {
|
2019-01-09 12:45:05 +01:00
|
|
|
const { id, isAuthenticated, picture, username } = this.props
|
2019-01-09 12:07:57 +01:00
|
|
|
return (
|
|
|
|
<header>
|
|
|
|
<nav className="navbar navbar-expand-lg navbar-light bg-light">
|
|
|
|
<div className="container">
|
|
|
|
<span className="navbar-brand">FitTrackee</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">
|
2018-05-17 13:33:44 +02:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
2019-01-09 12:07:57 +01:00
|
|
|
pathname: '/',
|
2018-05-17 13:33:44 +02:00
|
|
|
}}
|
|
|
|
>
|
2019-01-09 12:07:57 +01:00
|
|
|
Dashboard
|
2018-05-17 13:33:44 +02:00
|
|
|
</Link>
|
|
|
|
</li>
|
2019-01-09 12:45:05 +01:00
|
|
|
{isAuthenticated && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/activities/history',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Workouts
|
|
|
|
</Link>
|
2019-01-13 15:35:44 +01:00
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
{isAuthenticated && (
|
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/activities/statistics',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Statistics
|
|
|
|
</Link>
|
2019-01-09 12:07:57 +01:00
|
|
|
</li>
|
|
|
|
)}
|
2019-01-09 12:45:05 +01:00
|
|
|
{isAuthenticated && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/activities/add',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<strong>Add workout</strong>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
{/* {user.admin && ( */}
|
|
|
|
{/* <li className="nav-item"> */}
|
|
|
|
{/* <Link */}
|
|
|
|
{/* className="nav-link" */}
|
|
|
|
{/* to={{ */}
|
|
|
|
{/* pathname: '/admin', */}
|
|
|
|
{/* }} */}
|
|
|
|
{/* > */}
|
|
|
|
{/* Admin */}
|
|
|
|
{/* </Link> */}
|
|
|
|
{/* </li> */}
|
|
|
|
{/* )} */}
|
|
|
|
</ul>
|
|
|
|
<ul className="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
2019-01-09 12:45:05 +01:00
|
|
|
{!isAuthenticated && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/register',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Register
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
2019-01-09 12:45:05 +01:00
|
|
|
{!isAuthenticated && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/login',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Login
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
2019-01-09 12:45:05 +01:00
|
|
|
{picture === true && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<img
|
|
|
|
alt="Avatar"
|
2019-01-09 12:45:05 +01:00
|
|
|
src={`${apiUrl}users/${id}/picture` +
|
2019-01-09 12:07:57 +01:00
|
|
|
`?${Date.now()}`}
|
|
|
|
className="img-fluid App-nav-profile-img"
|
|
|
|
/>
|
|
|
|
)}
|
2019-01-09 12:45:05 +01:00
|
|
|
{isAuthenticated && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/profile',
|
|
|
|
}}
|
|
|
|
>
|
2019-01-09 12:45:05 +01:00
|
|
|
{username}
|
2019-01-09 12:07:57 +01:00
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
2019-01-09 12:45:05 +01:00
|
|
|
{isAuthenticated && (
|
2019-01-09 12:07:57 +01:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
className="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/logout',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Logout
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
|
|
|
</ul>
|
|
|
|
</div>
|
2018-05-17 13:33:44 +02:00
|
|
|
</div>
|
2019-01-09 12:07:57 +01:00
|
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
)
|
|
|
|
}
|
2017-12-17 12:27:07 +01:00
|
|
|
}
|
2018-05-17 13:33:44 +02:00
|
|
|
|
2017-12-25 17:45:28 +01:00
|
|
|
export default connect(
|
2019-01-09 12:45:05 +01:00
|
|
|
({ user }) => ({
|
|
|
|
id: user.id,
|
|
|
|
isAuthenticated: user.isAuthenticated,
|
|
|
|
picture: user.picture,
|
|
|
|
username: user.username,
|
2017-12-25 17:45:28 +01:00
|
|
|
})
|
|
|
|
)(NavBar)
|