canape/src/public/js/components/navbar.js

import React from 'react'
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

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 username={props.userStore.username} />
          <ShowsDropdown username={props.userStore.username} />
          <WishlistDropdown username={props.userStore.username} />
          <UserDropdown username={props.userStore.username} />
          <Search
            placeholder="Search movies"
            router={props.router}
            path='/movies/search'
            pathMatch='movies'
          />
          <Search
            placeholder="Search shows"
            router={props.router}
            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(ev) {
    ev.preventDefault();
    this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
  }
  isActive() {
    const location = this.props.router.getCurrentLocation().pathname;
    return (location.indexOf(this.props.pathMatch) !== -1)
  }
  render() {
    if (!this.isActive()) {
      return null;
    }

    return(
      <div className="navbar-form navbar-right">
        <form className="input-group" onSubmit={(ev) => this.handleSearch(ev)}>
          <input
            className="form-control"
            placeholder={this.props.placeholder}
            ref={(input) => this.input = input}
          />
        </form>
      </div>
    );
  }
}

function MoviesDropdown(props) {
  if (props.username === "") {
    return null;
  }
  return(
    <Nav>
      <NavDropdown title="Movies" id="navbar-movies-dropdown">
        <LinkContainer to="/movies/explore/yts/seeds">
          <MenuItem>Discover</MenuItem>
        </LinkContainer>
        <LinkContainer to="/movies/polochon">
          <MenuItem>My movies</MenuItem>
        </LinkContainer>
      </NavDropdown>
    </Nav>
  );
}

function ShowsDropdown(props) {
  if (props.username === "") {
    return null;
  }
  return(
    <Nav>
      <NavDropdown title="Shows" id="navbar-shows-dropdown">
        <LinkContainer to="/shows/explore/eztv/rating">
          <NavItem>Discover</NavItem>
        </LinkContainer>
        <LinkContainer to="/shows/polochon">
          <NavItem>My shows</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">
            <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>
    );
  }
}

function WishlistDropdown(props) {
  if (props.username === "") {
    return null;
  }
  return(
    <Nav>
      <NavDropdown title="Wishlist" id="navbar-wishlit-dropdown">
        <LinkContainer to="/movies/wishlist">
          <MenuItem>Movies</MenuItem>
        </LinkContainer>
        <LinkContainer to="/shows/wishlist">
          <MenuItem>Shows</MenuItem>
        </LinkContainer>
      </NavDropdown>
    </Nav>
  );
}