134 lines
3.5 KiB
JavaScript
134 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
import { store } from '../store'
|
|
import { isUserLoggedIn } from '../actions/actionCreators'
|
|
|
|
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
|
|
import { LinkContainer } from 'react-router-bootstrap'
|
|
import { Control, Form } from 'react-redux-form';
|
|
|
|
export default function NavBar(props) {
|
|
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>
|
|
<MoviesDropdown />
|
|
<ShowsDropdown />
|
|
<UserDropdown
|
|
username={props.userStore.username}
|
|
logout={props.userLogout}
|
|
/>
|
|
<Search
|
|
model="movieStore"
|
|
model="movieStore.search"
|
|
placeholder="Search movies"
|
|
router={props.router}
|
|
search={props.movieStore.search}
|
|
path='/movies/search'
|
|
pathMatch='movies'
|
|
/>
|
|
<Search
|
|
model="showStore"
|
|
model="showStore.search"
|
|
placeholder="Search shows"
|
|
router={props.router}
|
|
search={props.showStore.search}
|
|
path='/shows/search'
|
|
pathMatch='shows'
|
|
/>
|
|
</Navbar.Collapse>
|
|
</Navbar>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
class Search extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleSearch = this.handleSearch.bind(this);
|
|
}
|
|
handleSearch() {
|
|
this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`)
|
|
}
|
|
render() {
|
|
const location = this.props.router.getCurrentLocation().pathname;
|
|
if (location.indexOf(this.props.pathMatch) === -1)
|
|
{
|
|
return null;
|
|
}
|
|
|
|
return(
|
|
<Navbar.Form pullRight>
|
|
<Form model={this.props.model} className="input-group" onSubmit={this.handleSearch}>
|
|
<Control.text
|
|
model={this.props.model}
|
|
className="form-control"
|
|
placeholder={this.props.placeholder}
|
|
updateOn="change"
|
|
/>
|
|
</Form>
|
|
</Navbar.Form>
|
|
);
|
|
}
|
|
}
|
|
|
|
function MoviesDropdown(props) {
|
|
return(
|
|
<Nav>
|
|
<NavDropdown title="Movies" id="navbar-movies-dropdown">
|
|
<LinkContainer to="/movies/popular">
|
|
<MenuItem>Popular</MenuItem>
|
|
</LinkContainer>
|
|
<LinkContainer to="/movies/polochon">
|
|
<MenuItem>Polochon</MenuItem>
|
|
</LinkContainer>
|
|
</NavDropdown>
|
|
</Nav>
|
|
);
|
|
}
|
|
|
|
function ShowsDropdown(props) {
|
|
return(
|
|
<Nav>
|
|
<NavDropdown title="Shows" id="navbar-shows-dropdown">
|
|
<LinkContainer to="/shows/popular">
|
|
<NavItem>Popular</NavItem>
|
|
</LinkContainer>
|
|
</NavDropdown>
|
|
</Nav>
|
|
);
|
|
}
|
|
|
|
function UserDropdown(props) {
|
|
if (props.username !== "") {
|
|
return (
|
|
<Nav pullRight>
|
|
<NavDropdown title={props.username} id="navbar-dropdown-right">
|
|
<LinkContainer to="/users/edit">
|
|
<MenuItem>Edit</MenuItem>
|
|
</LinkContainer>
|
|
<LinkContainer to="/users/logout" onClick={props.logout}>
|
|
<MenuItem>Logout</MenuItem>
|
|
</LinkContainer>
|
|
</NavDropdown>
|
|
</Nav>
|
|
);
|
|
} else {
|
|
return(
|
|
<Nav pullRight>
|
|
<LinkContainer to="/users/signup">
|
|
<NavItem>Sign up</NavItem>
|
|
</LinkContainer>
|
|
<LinkContainer to="/users/login">
|
|
<NavItem>Login</NavItem>
|
|
</LinkContainer>
|
|
</Nav>
|
|
);
|
|
}
|
|
}
|