canape/frontend/js/components/torrents/search.js

import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"
import { connect } from "react-redux"
import { addTorrent, searchTorrents } from "../../actions/torrents"
import { Map, List } from "immutable"
import Loader from "../loader/loader"

import { OverlayTrigger, Tooltip } from "react-bootstrap"

const mapStateToProps = (state) => ({
    searching: state.torrentStore.get("searching"),
    results: state.torrentStore.get("searchResults"),
});
const mapDispatchToProps = { addTorrent, searchTorrents };

const TorrentSearch = (props) => {
  const [search, setSearch] = useState(props.match.params.search || "");
  const [type, setType] = useState(props.match.params.type || "");
  const [url, setUrl] = useState("");

  const getUrl = () =>
    `/torrents/search/${type}/${encodeURI(search)}`;

  useEffect(() => {
    if (search === "") { return }
    if (type === "") { return }

    const url = getUrl();
    props.searchTorrents(url)
    props.history.push(url);
  }, [url]);

  return (
    <div>
      <div className="col-xs-12">
        <form className="form-horizontal" onSubmit={(e) => e.preventDefault()}>
          <div className="form-group">
            <input
              type="text"
              className="form-control"
              placeholder="Search torrents"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </form>
      </div>
      <div className="row">
        <SearchButton
          text="Search movies"
          type="movies"
          typeFromURL={type}
          handleClick={() => {
            setType("movies");
            setUrl(getUrl());
        }}/>
        <SearchButton
          text="Search shows"
          type="shows"
          typeFromURL={type}
          handleClick={() => {
            setType("shows");
            setUrl(getUrl());
        }}/>
      </div>
      <hr />
      <div className="row">
        <TorrentList
          searching={props.searching}
          results={props.results}
          addTorrent={props.addTorrent}
          searchFromURL={search}
        />
      </div>
    </div>
  );
}
TorrentSearch.propTypes = {
  searching: PropTypes.bool.isRequired,
  results: PropTypes.instanceOf(List),
  searchFromURL: PropTypes.string,
  match: PropTypes.object,
  history: PropTypes.object,
  addTorrent: PropTypes.func.isRequired,
  searchTorrents: PropTypes.func.isRequired,
};


const SearchButton = (props) => {
  const color = (props.type === props.typeFromURL) ? "primary" : "default";
  return (
    <div className="col-xs-6">
      <button
        className={`btn btn-${color} full-width`}
        type="button"
        onClick={props.handleClick}
      >
        <i className="fa fa-search" aria-hidden="true"></i> {props.text}
      </button>
    </div>

  );
}
SearchButton.propTypes = {
  type: PropTypes.string,
  typeFromURL: PropTypes.string,
  text: PropTypes.string,
  handleClick: PropTypes.func.isRequired,
};

const TorrentList = (props) => {
  if (props.searching) {
    return (<Loader />);
  }

  if (props.searchFromURL === "") {
    return null;
  }

  if (props.results.size === 0) {
    return (
      <div className="col-xs-12">
        <div className="well well-lg">
          <h2>No results</h2>
        </div>
      </div>
    );
  }

  return (
    <div className="col-xs-12">
      {props.results.map(function(el, index) {
        return (
          <Torrent
            key={index}
            data={el}
            addTorrent={props.addTorrent}
          />);
      })}
    </div>
  );
}
TorrentList.propTypes = {
  searching: PropTypes.bool.isRequired,
  results: PropTypes.instanceOf(List),
  searchFromURL: PropTypes.string,
  addTorrent: PropTypes.func.isRequired,
};

const Torrent = (props) => (
  <div className="row">
    <div className="col-xs-12">
      <table className="table responsive table-align-middle torrent-search-result">
        <tbody>
          <tr>
            <td rowSpan="2" className="col-xs-1 torrent-small-width">
              <h4>
                <TorrentHealth
                  url={props.data.get("url")}
                  seeders={props.data.get("seeders")}
                  leechers={props.data.get("leechers")}
                />
              </h4>
            </td>
            <td colSpan="4" className="col-xs-9 title">
              <span className="torrent-title">{props.data.get("name")}</span>
            </td>
            <td rowSpan="2" className="col-xs-1 torrent-small-width">
              <h4 className="pull-right clickable" onClick={() => props.addTorrent(props.data.get("url"))}>
                <i className="fa fa-cloud-download" aria-hidden="true"></i>
              </h4>
            </td>
          </tr>
          <tr>
            <td className="col-xs-1 torrent-label">
              <span className="label label-warning">{props.data.get("quality")}</span>
            </td>
            <td className="col-xs-1 torrent-label">
              <span className="label label-success">{props.data.get("source")}</span>
            </td>
            <td className="col-xs-1 torrent-label">
              <span className="label label-info">{props.data.get("upload_user")}</span>
            </td>
            <td className="col-xs-7 torrent-label"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
);
Torrent.propTypes = {
  data: PropTypes.instanceOf(Map),
  addTorrent: PropTypes.func.isRequired,
};

const TorrentHealth = (props) => {
  const seeders = props.seeders || 0;
  const leechers = props.leechers || 1;

  let color;
  let health;
  let ratio = seeders/leechers;

  if (seeders > 20) {
    health = "good";
    color = "success";
  } else {
    if (ratio > 1) {
      health = "medium";
      color = "warning";
    } else {
      health = "bad";
      color = "danger";
    }
  }

  const className = `text text-${color}`;
  const tooltip = (
    <Tooltip id={`tooltip-health-${props.url}`}>
      <p><span className={className}>Health: {health}</span></p>
      <p>Seeders: {seeders}</p>
      <p>Leechers: {props.leechers}</p>
    </Tooltip>
  );

  return (
    <OverlayTrigger placement="right" overlay={tooltip}>
      <span className={className}>
        <i className="fa fa-circle" aria-hidden="true"></i>
      </span>
    </OverlayTrigger>
  );
}
TorrentHealth.propTypes = {
  url: PropTypes.string,
  seeders: PropTypes.number,
  leechers: PropTypes.number,
};

export default connect(mapStateToProps, mapDispatchToProps)(TorrentSearch);