ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Refactor navbar in modules

Browse Source
This commit is contained in:
Grégoire Delattre 2017-01-21 00:13:45 +01:00
parent 4e3613c1c8
commit 041c656c67
1 changed files with 114 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/public/js/components/navbar.js
View File

@ -6,32 +6,7 @@ import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import { Control, Form } from 'react-redux-form';
export default class NavBar extends React.Component {
constructor(props) {
super(props);
this.handleMovieSearch = this.handleMovieSearch.bind(this);
this.handleShowSearch = this.handleShowSearch.bind(this);
}
handleMovieSearch() {
this.props.router.push(`/movies/search/${encodeURI(this.props.movieStore.search)}`)
}
handleShowSearch() {
this.props.router.push(`/shows/search/${encodeURI(this.props.showStore.search)}`)
}
render() {
const username = this.props.userStore.username;
const isLoggedIn = username !== "" ? true : false;
const location = this.props.router.getCurrentLocation().pathname;
let displayMovieSearch = false;
let displayShowSearch = false;
if (isLoggedIn && location.indexOf("movies") > -1)
{
displayMovieSearch = true;
}
if (isLoggedIn && location.indexOf("shows") > -1)
{
displayShowSearch = true;
}
export default function NavBar(props) {
return (
<div>
<Navbar fluid fixedTop collapseOnSelect>
@ -42,66 +17,117 @@ export default class NavBar extends React.Component {
<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>
{displayMovieSearch &&
<Navbar.Form pullRight>
<Form model="movieStore" className="input-group" onSubmit={() => this.handleMovieSearch()}>
<Control.text
<MoviesDropdown />
<ShowsDropdown />
<UserDropdown
username={props.userStore.username}
logout={props.userLogout}
/>
<Search
model="movieStore"
model="movieStore.search"
className="form-control"
placeholder="Search movies"
updateOn="change"
router={props.router}
search={props.movieStore.search}
path='/movies/search'
pathMatch='movies'
/>
</Form>
</Navbar.Form>
}
{displayShowSearch &&
<Navbar.Form pullRight>
<Form model="showStore" className="input-group" onSubmit={() => this.handleShowSearch()}>
<Control.text
<Search
model="showStore"
model="showStore.search"
className="form-control"
placeholder="Search shows"
updateOn="change"
router={props.router}
search={props.showStore.search}
path='/shows/search'
pathMatch='shows'
/>
</Form>
</Navbar.Form>
}
</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>
);
}
}