canape/frontend/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 class AppNavBar extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      userLoggedIn: (props.username !== ""),
      displayMoviesSearch: this.shouldDisplayMoviesSearch(props.router),
      displayShowsSearch: this.shouldDisplayShowsSearch(props.router),
      expanded: false,
    };
    this.setExpanded = this.setExpanded.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    // Update the state based on the next props
    const shouldDisplayMoviesSearch = this.shouldDisplayMoviesSearch(nextProps.router);
    const shouldDisplayShowsSearch = this.shouldDisplayShowsSearch(nextProps.router);
    if ((this.state.displayMoviesSearch !== shouldDisplayMoviesSearch)
      || (this.state.displayShowsSearch !== shouldDisplayShowsSearch)) {
        this.setState({
          userLoggedIn: (nextProps.username !== ""),
          displayMoviesSearch: shouldDisplayMoviesSearch,
          displayShowsSearch: shouldDisplayShowsSearch,
        });
    }
  }
  shouldDisplayMoviesSearch(router) {
    return this.matchPath(router, "movies");
  }
  shouldDisplayShowsSearch(router) {
    return this.matchPath(router, "shows");
  }
  matchPath(router, keyword) {
    const location = router.getCurrentLocation().pathname;
    return (location.indexOf(keyword) !== -1)
  }
  setExpanded(value) {
    if (this.state.expanded === value) { return }
    this.setState({ expanded: value });
  }
  render() {
    const loggedAndActivated = (this.state.userLoggedIn && this.props.isActivated);
    const displayShowsSearch = (this.state.displayShowsSearch && loggedAndActivated);
    const displayMoviesSearch = (this.state.displayMoviesSearch && loggedAndActivated);
    return (
      <div>
        <Navbar fluid fixedTop collapseOnSelect expanded={this.state.expanded} onToggle={this.setExpanded}>
          <Navbar.Header>
            <LinkContainer to="/">
              <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            {loggedAndActivated &&
              <MoviesDropdown />
            }
            {loggedAndActivated &&
              <ShowsDropdown />
            }
            {loggedAndActivated &&
              <WishlistDropdown />
            }
            {loggedAndActivated &&
              <TorrentsDropdown torrentsCount={this.props.torrentCount} />
            }
            <UserDropdown
              username={this.props.username}
              isAdmin={this.props.isAdmin}
              isActivated={this.props.isActivated}
            />
            {displayMoviesSearch &&
              <Search
                placeholder="Search movies"
                router={this.props.router}
                path='/movies/search'
                setExpanded={this.setExpanded}
              />
            }
            {displayShowsSearch &&
              <Search
                placeholder="Search shows"
                router={this.props.router}
                path='/shows/search'
                setExpanded={this.setExpanded}
              />
            }
          </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.setExpanded(false);
    this.props.router.push(`${this.props.path}/${encodeURI(this.input.value)}`);
  }
  render() {
    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() {
  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() {
  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">
          {props.isAdmin &&
              <LinkContainer to="/admin">
                <MenuItem>Admin Panel</MenuItem>
              </LinkContainer>
          }
          {props.isActivated &&
              <LinkContainer to="/users/profile">
                <MenuItem>Profile</MenuItem>
              </LinkContainer>
          }
          {props.isActivated &&
              <LinkContainer to="/users/tokens">
                <MenuItem>Tokens</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() {
  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>
  );
}

function TorrentsDropdown(props) {
  const title = (<TorrentsDropdownTitle torrentsCount={props.torrentsCount} />)
  return(
    <Nav>
      <NavDropdown title={title} id="navbar-wishlit-dropdown">
        <LinkContainer to="/torrents/list">
          <MenuItem>Downloads</MenuItem>
        </LinkContainer>
        <LinkContainer to="/torrents/search">
          <MenuItem>Search</MenuItem>
        </LinkContainer>
      </NavDropdown>
    </Nav>
  );
}

function TorrentsDropdownTitle(props) {
  return (
    <span>
      Torrents
      {props.torrentsCount > 0 &&
          <span>
            &nbsp; <span className="label label-info">{props.torrentsCount}</span>
          </span>
      }
    </span>
  );
}