2017-09-09 16:38:18 +00:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
2017-10-13 17:58:21 +00:00
|
|
|
import NavBar from '../App/Navbar'
|
|
|
|
import NavBarLink from '../App/NavBarLink'
|
2016-08-02 01:36:48 +00:00
|
|
|
|
2016-08-01 19:33:41 +00:00
|
|
|
class Header extends Component {
|
|
|
|
render = () => {
|
2017-03-16 21:58:56 +00:00
|
|
|
const { signedIn, section, user } = this.props
|
2016-08-02 01:20:19 +00:00
|
|
|
|
|
|
|
const activeClass = (title) => {
|
2017-10-13 17:58:21 +00:00
|
|
|
let forClass = title + 'Maps'
|
2016-10-07 16:31:32 +00:00
|
|
|
if (title === 'my' && section === 'mine' ||
|
|
|
|
title === section) forClass += ' active'
|
2016-08-01 19:33:41 +00:00
|
|
|
return forClass
|
|
|
|
}
|
|
|
|
|
2016-10-07 16:31:32 +00:00
|
|
|
const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
|
|
|
|
const mapper = section === 'mapper'
|
2016-08-01 19:33:41 +00:00
|
|
|
|
|
|
|
return (
|
2017-10-13 17:58:21 +00:00
|
|
|
<NavBar>
|
|
|
|
<NavBarLink show={explore}
|
|
|
|
href={signedIn ? '/' : '/explore/active'}
|
|
|
|
linkClass={activeClass('active')}
|
|
|
|
text="All Maps"
|
|
|
|
/>
|
|
|
|
<NavBarLink show={signedIn && explore}
|
|
|
|
href="/explore/mine"
|
|
|
|
linkClass={activeClass('my')}
|
|
|
|
text="My Maps"
|
|
|
|
/>
|
|
|
|
<NavBarLink show={signedIn && explore}
|
|
|
|
href="/explore/shared"
|
|
|
|
linkClass={activeClass('shared')}
|
|
|
|
text="Shared With Me"
|
|
|
|
/>
|
|
|
|
<NavBarLink show={signedIn && explore}
|
|
|
|
href="/explore/starred"
|
|
|
|
linkClass={activeClass('starred')}
|
|
|
|
text="Starred By Me"
|
|
|
|
/>
|
|
|
|
<NavBarLink show={!signedIn && explore}
|
|
|
|
href="/explore/featured"
|
|
|
|
linkClass={activeClass('featured')}
|
|
|
|
text="Featured Maps"
|
|
|
|
/>
|
2016-08-31 20:58:49 +00:00
|
|
|
|
2017-10-13 17:58:21 +00:00
|
|
|
{mapper ? (
|
|
|
|
<div className='navBarButton active mapperButton'>
|
|
|
|
{user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
|
|
|
|
{user && <div className='exploreMapperName'>{user.name}’s Maps</div>}
|
|
|
|
<div className='clearfloat'></div>
|
|
|
|
</div>
|
|
|
|
) : null }
|
|
|
|
</NavBar>
|
2016-08-01 19:33:41 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-08-02 01:19:12 +00:00
|
|
|
Header.propTypes = {
|
|
|
|
signedIn: PropTypes.bool.isRequired,
|
|
|
|
section: PropTypes.string.isRequired,
|
2016-08-22 01:02:49 +00:00
|
|
|
user: PropTypes.object
|
2016-08-02 01:19:12 +00:00
|
|
|
}
|
|
|
|
|
2016-08-01 19:33:41 +00:00
|
|
|
export default Header
|