2017-01-03 15:39:12 +01:00

62 lines
2.1 KiB
JavaScript

import React from 'react'
import { Link } from 'react-router'
import { store } from '../store'
import { isUserLoggedIn } from '../actions/actionCreators'
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
export default class NavBar extends React.Component {
render() {
const username = this.props.userStore.username;
const isLoggedIn = username !== "" ? true : false;
return (
<div>
<Navbar fluid fixedTop collapseOnSelect>
<Navbar.Header>
<LinkContainer to="/">
<Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
</LinkContainer>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to="/movies/popular">
<NavItem>Popular movies</NavItem>
</LinkContainer>
<LinkContainer to="/movies/polochon">
<NavItem>Polochon movies</NavItem>
</LinkContainer>
<LinkContainer to="/shows/popular">
<NavItem>Polochon shows</NavItem>
</LinkContainer>
</Nav>
<Nav pullRight>
{isLoggedIn ||
<LinkContainer to="/users/signup">
<NavItem>Sign up</NavItem>
</LinkContainer>
}
{isLoggedIn ||
<LinkContainer to="/users/login">
<NavItem>Login</NavItem>
</LinkContainer>
}
{isLoggedIn &&
<NavDropdown title={username} id="navbar-dropdown-right">
<LinkContainer to="/users/edit">
<MenuItem>Edit</MenuItem>
</LinkContainer>
<LinkContainer to="/users/logout" onClick={this.props.userLogout}>
<MenuItem>Logout</MenuItem>
</LinkContainer>
</NavDropdown>
}
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}