canape/frontend/js/components/navbar.js

import React, { useState } from "react"
import { Route, Link } from "react-router-dom"
import { connect } from "react-redux"
import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from "react-bootstrap"
import { LinkContainer } from "react-router-bootstrap"
import PropTypes from "prop-types"

const mapStateToProps = (state) => {
  let torrentCount = 0;
  if (state.torrentStore.has("torrents") && state.torrentStore.get("torrents") !== undefined) {
    torrentCount = state.torrentStore.get("torrents").size;
  }
  return {
    username: state.userStore.get("username"),
    isAdmin: state.userStore.get("isAdmin"),
    torrentCount: torrentCount,
  }
};

const AppNavBar = (props) => {
  const [expanded, setExpanded] = useState(false);

  return (
    <Navbar
      fluid fixedTop collapseOnSelect
      expanded={expanded} onToggle={() => setExpanded(!expanded)}>
      <Navbar.Header>
        <LinkContainer to="/">
          <Navbar.Brand><Link to="/">Canapé</Link></Navbar.Brand>
        </LinkContainer>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <MoviesDropdown />
        <ShowsDropdown />
        <WishlistDropdown />
        <TorrentsDropdown torrentsCount={props.torrentCount} />
        <UserDropdown
          username={props.username}
          isAdmin={props.isAdmin}
        />
        <Route path="/movies" render={(props) =>
            <Search
              placeholder="Search movies"
              path='/movies/search'
              history={props.history}
            />
        }/>
        <Route path="/shows" render={(props) =>
            <Search
              placeholder="Search shows"
              path='/shows/search'
              history={props.history}
            />
        }/>
      </Navbar.Collapse>
    </Navbar>
  )
}
AppNavBar.propTypes = {
  torrentCount: PropTypes.number.isRequired,
  username: PropTypes.string.isRequired,
  isAdmin: PropTypes.bool.isRequired,
  history: PropTypes.object,
};

export default connect(mapStateToProps)(AppNavBar);

const Search = (props) => {
  const [search, setSearch] = useState("");

  const handleSearch = (ev) => {
    ev.preventDefault();
    props.history.push(`${props.path}/${encodeURI(search)}`);
  }

  return(
    <div className="navbar-form navbar-right">
      <form className="input-group" onSubmit={(ev) => handleSearch(ev)}>
        <input
          className="form-control"
          placeholder={props.placeholder}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </form>
    </div>
  );
}
Search.propTypes = {
  placeholder: PropTypes.string.isRequired,
  path: PropTypes.string.isRequired,
  history: PropTypes.object,
};

const MoviesDropdown = () => (
    <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>
)

const ShowsDropdown = () => (
  <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) {
  return (
    <Nav pullRight>
      <NavDropdown title={props.username} id="navbar-dropdown-right">
        {props.isAdmin &&
            <LinkContainer to="/admin">
              <MenuItem>Admin Panel</MenuItem>
            </LinkContainer>
        }
        <LinkContainer to="/users/profile">
          <MenuItem>Profile</MenuItem>
        </LinkContainer>
        <LinkContainer to="/users/tokens">
          <MenuItem>Tokens</MenuItem>
        </LinkContainer>
        <LinkContainer to="/users/logout">
          <MenuItem>Logout</MenuItem>
        </LinkContainer>
      </NavDropdown>
    </Nav>
  );
}
UserDropdown.propTypes = {
  username: PropTypes.string.isRequired,
  isAdmin: PropTypes.bool.isRequired,
};

const WishlistDropdown = () => (
  <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>
);

const 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>
  );
}
TorrentsDropdown.propTypes = { torrentsCount: PropTypes.number.isRequired };

const TorrentsDropdownTitle = (props) => {
  if (props.torrentsCount === 0) {
    return (
      <span>Torrents</span>
    );
  }

  return (
    <span> Torrents
      <span>
        &nbsp; <span className="label label-info">{props.torrentsCount}</span>
      </span>
    </span>
  );
}
TorrentsDropdownTitle.propTypes = { torrentsCount: PropTypes.number.isRequired };