canape/frontend/js/components/navbar.js

import React, { useState } from "react"
import { Route } from "react-router-dom"
import { connect } from "react-redux"
import { LinkContainer } from "react-router-bootstrap"
import PropTypes from "prop-types"

import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"

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 fixed="top" collapseOnSelect bg="dark" variant="dark"
      expanded={expanded} expand="sm" onToggle={() => setExpanded(!expanded)}>
      <LinkContainer to="/">
        <Navbar.Brand>Canapé</Navbar.Brand>
      </LinkContainer>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Nav className="mr-auto">
          <MoviesDropdown />
          <ShowsDropdown />
          <WishlistDropdown />
          <TorrentsDropdown torrentsCount={props.torrentCount} />
        </Nav>
        <Nav>
          <Route path="/movies" render={(props) =>
              <Search
                placeholder="Search movies"
                path='/movies/search'
                history={props.history}
                setExpanded={setExpanded}
              />
          }/>
          <Route path="/shows" render={(props) =>
              <Search
                placeholder="Search shows"
                path='/shows/search'
                history={props.history}
                setExpanded={setExpanded}
              />
          }/>
          <UserDropdown
            username={props.username}
            isAdmin={props.isAdmin}
          />
        </Nav>
      </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 = ({ path, placeholder, setExpanded, history }) => {
  const [search, setSearch] = useState("");

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

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

const MoviesDropdown = () => (
  <NavDropdown title="Movies" id="navbar-movies-dropdown">
    <LinkContainer to="/movies/explore/yts/seeds">
      <NavDropdown.Item>Discover</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/movies/polochon">
      <NavDropdown.Item>My movies</NavDropdown.Item>
    </LinkContainer>
  </NavDropdown>
)

const ShowsDropdown = () => (
  <NavDropdown title="Shows" id="navbar-shows-dropdown">
    <LinkContainer to="/shows/explore/eztv/rating">
      <NavDropdown.Item>Discover</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/shows/polochon">
      <NavDropdown.Item>My shows</NavDropdown.Item>
    </LinkContainer>
  </NavDropdown>
);

const UserDropdown = (props) => (
  <Nav>
    <NavDropdown title={props.username} alignRight>
      {props.isAdmin &&
          <LinkContainer to="/admin">
            <NavDropdown.Item>Admin Panel</NavDropdown.Item>
          </LinkContainer>
      }
      <LinkContainer to="/users/profile">
        <NavDropdown.Item>Profile</NavDropdown.Item>
      </LinkContainer>
      <LinkContainer to="/users/tokens">
        <NavDropdown.Item>Tokens</NavDropdown.Item>
      </LinkContainer>
      <LinkContainer to="/users/logout">
        <NavDropdown.Item>Logout</NavDropdown.Item>
      </LinkContainer>
    </NavDropdown>
  </Nav>
)
UserDropdown.propTypes = {
  username: PropTypes.string.isRequired,
  isAdmin: PropTypes.bool.isRequired,
};

const WishlistDropdown = () => (
  <NavDropdown title="Wishlist" id="navbar-wishlit-dropdown">
    <LinkContainer to="/movies/wishlist">
      <NavDropdown.Item>Movies</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/shows/wishlist">
      <NavDropdown.Item>Shows</NavDropdown.Item>
    </LinkContainer>
  </NavDropdown>
);

const TorrentsDropdown = (props) => {
  const title = (<TorrentsDropdownTitle torrentsCount={props.torrentsCount} />)
  return(
    <NavDropdown title={title} id="navbar-wishlit-dropdown">
      <LinkContainer to="/torrents/list">
        <NavDropdown.Item>Downloads</NavDropdown.Item>
      </LinkContainer>
      <LinkContainer to="/torrents/search">
        <NavDropdown.Item>Search</NavDropdown.Item>
      </LinkContainer>
    </NavDropdown>
  );
}
TorrentsDropdown.propTypes = { torrentsCount: PropTypes.number.isRequired };

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

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