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 { LinkContainer } from 'react-router-bootstrap'
import { Control, Form } from 'react-redux-form'; import { Control, Form } from 'react-redux-form';
export default class NavBar extends React.Component { export default function NavBar(props) {
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;
}
return ( return (
<div> <div>
<Navbar fluid fixedTop collapseOnSelect> <Navbar fluid fixedTop collapseOnSelect>
@ -42,66 +17,117 @@ export default class NavBar extends React.Component {
<Navbar.Toggle /> <Navbar.Toggle />
</Navbar.Header> </Navbar.Header>
<Navbar.Collapse> <Navbar.Collapse>
<Nav> <MoviesDropdown />
<LinkContainer to="/movies/popular"> <ShowsDropdown />
<NavItem>Popular movies</NavItem> <UserDropdown
</LinkContainer> username={props.userStore.username}
<LinkContainer to="/movies/polochon"> logout={props.userLogout}
<NavItem>Polochon movies</NavItem> />
</LinkContainer> <Search
<LinkContainer to="/shows/popular"> model="movieStore"
<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
model="movieStore.search" model="movieStore.search"
className="form-control"
placeholder="Search movies" placeholder="Search movies"
updateOn="change" router={props.router}
search={props.movieStore.search}
path='/movies/search'
pathMatch='movies'
/> />
</Form> <Search
</Navbar.Form> model="showStore"
}
{displayShowSearch &&
<Navbar.Form pullRight>
<Form model="showStore" className="input-group" onSubmit={() => this.handleShowSearch()}>
<Control.text
model="showStore.search" model="showStore.search"
className="form-control"
placeholder="Search shows" placeholder="Search shows"
updateOn="change" router={props.router}
search={props.showStore.search}
path='/shows/search'
pathMatch='shows'
/> />
</Form>
</Navbar.Form>
}
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>
</div> </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>
);
} }
} }