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

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

@ -6,102 +6,128 @@ 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) {
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) { constructor(props) {
super(props); super(props);
this.handleMovieSearch = this.handleMovieSearch.bind(this); this.handleSearch = this.handleSearch.bind(this);
this.handleShowSearch = this.handleShowSearch.bind(this);
} }
handleMovieSearch() { handleSearch() {
this.props.router.push(`/movies/search/${encodeURI(this.props.movieStore.search)}`) this.props.router.push(`${this.props.path}/${encodeURI(this.props.search)}`)
}
handleShowSearch() {
this.props.router.push(`/shows/search/${encodeURI(this.props.showStore.search)}`)
} }
render() { render() {
const username = this.props.userStore.username;
const isLoggedIn = username !== "" ? true : false;
const location = this.props.router.getCurrentLocation().pathname; const location = this.props.router.getCurrentLocation().pathname;
let displayMovieSearch = false; if (location.indexOf(this.props.pathMatch) === -1)
let displayShowSearch = false;
if (isLoggedIn && location.indexOf("movies") > -1)
{ {
displayMovieSearch = true; return null;
} }
if (isLoggedIn && location.indexOf("shows") > -1)
{ return(
displayShowSearch = true; <Navbar.Form pullRight>
} <Form model={this.props.model} className="input-group" onSubmit={this.handleSearch}>
return ( <Control.text
<div> model={this.props.model}
<Navbar fluid fixedTop collapseOnSelect> className="form-control"
<Navbar.Header> placeholder={this.props.placeholder}
<LinkContainer to="/"> updateOn="change"
<Navbar.Brand><a href="#">Canapé</a></Navbar.Brand> />
</LinkContainer> </Form>
<Navbar.Toggle /> </Navbar.Form>
</Navbar.Header> );
<Navbar.Collapse> }
<Nav> }
<LinkContainer to="/movies/popular">
<NavItem>Popular movies</NavItem> function MoviesDropdown(props) {
</LinkContainer> return(
<LinkContainer to="/movies/polochon"> <Nav>
<NavItem>Polochon movies</NavItem> <NavDropdown title="Movies" id="navbar-movies-dropdown">
</LinkContainer> <LinkContainer to="/movies/popular">
<LinkContainer to="/shows/popular"> <MenuItem>Popular</MenuItem>
<NavItem>Polochon shows</NavItem> </LinkContainer>
</LinkContainer> <LinkContainer to="/movies/polochon">
</Nav> <MenuItem>Polochon</MenuItem>
<Nav pullRight> </LinkContainer>
{isLoggedIn || </NavDropdown>
<LinkContainer to="/users/signup"> </Nav>
<NavItem>Sign up</NavItem> );
</LinkContainer> }
}
{isLoggedIn || function ShowsDropdown(props) {
<LinkContainer to="/users/login"> return(
<NavItem>Login</NavItem> <Nav>
</LinkContainer> <NavDropdown title="Shows" id="navbar-shows-dropdown">
} <LinkContainer to="/shows/popular">
{isLoggedIn && <NavItem>Popular</NavItem>
<NavDropdown title={username} id="navbar-dropdown-right"> </LinkContainer>
<LinkContainer to="/users/edit"> </NavDropdown>
<MenuItem>Edit</MenuItem> </Nav>
</LinkContainer> );
<LinkContainer to="/users/logout" onClick={this.props.userLogout}> }
<MenuItem>Logout</MenuItem>
</LinkContainer> function UserDropdown(props) {
</NavDropdown> if (props.username !== "") {
} return (
</Nav> <Nav pullRight>
{displayMovieSearch && <NavDropdown title={props.username} id="navbar-dropdown-right">
<Navbar.Form pullRight> <LinkContainer to="/users/edit">
<Form model="movieStore" className="input-group" onSubmit={() => this.handleMovieSearch()}> <MenuItem>Edit</MenuItem>
<Control.text </LinkContainer>
model="movieStore.search" <LinkContainer to="/users/logout" onClick={props.logout}>
className="form-control" <MenuItem>Logout</MenuItem>
placeholder="Search movies" </LinkContainer>
updateOn="change" </NavDropdown>
/> </Nav>
</Form> );
</Navbar.Form> } else {
} return(
{displayShowSearch && <Nav pullRight>
<Navbar.Form pullRight> <LinkContainer to="/users/signup">
<Form model="showStore" className="input-group" onSubmit={() => this.handleShowSearch()}> <NavItem>Sign up</NavItem>
<Control.text </LinkContainer>
model="showStore.search" <LinkContainer to="/users/login">
className="form-control" <NavItem>Login</NavItem>
placeholder="Search shows" </LinkContainer>
updateOn="change" </Nav>
/>
</Form>
</Navbar.Form>
}
</Navbar.Collapse>
</Navbar>
</div>
); );
} }
} }