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

import React, { useState, useEffect, useCallback } from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } 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";

import { prettySize } from "../../utils";

const TorrentSearch = ({ history, match }) => {
  const dispatch = useDispatch();

  const searching = useSelector((state) => state.torrentStore.get("searching"));
  const results = useSelector((state) =>
    state.torrentStore.get("searchResults")
  );

  const [search, setSearch] = useState(match.params.search || "");
  const [type, setType] = useState(match.params.type || "");

  const url = useCallback(() => {
    if (search === "" || type === "") {
      return "";
    }

    return `/torrents/search/${type}/${encodeURI(search)}`;
  }, [type, search]);

  const searchFunc = useCallback(() => {
    const searchURL = url();
    if (searchURL === "") {
      return;
    }

    dispatch(searchTorrents(searchURL));
    history.push(searchURL);
  }, [dispatch, history, url]);

  useEffect(() => {
    searchFunc();
  }, [searchFunc]);

  return (
    <div className="row">
      <div className="col-12 d-flex flex-row flex-wrap">
        <input
          type="text"
          className="form-control mb-1 w-100 form-control-lg"
          placeholder="Search torrents"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <div className="mb-3 w-100 d-flex">
          <SearchButton
            text="Search movies"
            type="movies"
            typeFromURL={type}
            handleClick={() => {
              setType("movies");
              searchFunc();
            }}
          />
          <SearchButton
            text="Search shows"
            type="shows"
            typeFromURL={type}
            handleClick={() => {
              setType("shows");
              searchFunc();
            }}
          />
        </div>
      </div>
      <div className="col-12">
        <TorrentList
          searching={searching}
          results={results}
          addTorrent={(url) => dispatch(addTorrent(url))}
          searchFromURL={search}
        />
      </div>
    </div>
  );
};
TorrentSearch.propTypes = {
  searchFromURL: PropTypes.string,
  match: PropTypes.object,
  history: PropTypes.object,
};

const SearchButton = ({ type, typeFromURL, text, handleClick }) => {
  const variant = type === typeFromURL ? "primary" : "secondary";
  return (
    <button
      type="button"
      className={`w-50 btn m-1 btn-lg btn-${variant}`}
      onClick={handleClick}
    >
      <i className="fa fa-search" aria-hidden="true"></i> {text}
    </button>
  );
};
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="jumbotron">
        <h2>No results</h2>
      </div>
    );
  }

  return (
    <React.Fragment>
      {props.results.map(function (el, index) {
        return <Torrent key={index} data={el} addTorrent={props.addTorrent} />;
      })}
    </React.Fragment>
  );
};
TorrentList.propTypes = {
  searching: PropTypes.bool.isRequired,
  results: PropTypes.instanceOf(List),
  searchFromURL: PropTypes.string,
  addTorrent: PropTypes.func.isRequired,
};

const Torrent = (props) => (
  <div className="alert d-flex border-bottom border-secondary align-items-center">
    <TorrentHealth
      url={props.data.get("url")}
      seeders={props.data.get("seeders")}
      leechers={props.data.get("leechers")}
    />
    <span className="mx-3 text text-start text-break flex-fill">
      {props.data.get("name")}
    </span>
    <div>
      {props.data.get("size") !== 0 && (
        <span className="mx-1 badge badge-pill badge-warning">
          {prettySize(props.data.get("size"))}
        </span>
      )}

      <span className="mx-1 badge badge-pill badge-warning">
        {props.data.get("quality")}
      </span>
      <span className="mx-1 badge badge-pill badge-success">
        {props.data.get("source")}
      </span>
      <span className="mx-1 badge badge-pill badge-info">
        {props.data.get("upload_user")}
      </span>
    </div>
    <div className="align-self-end ml-3">
      <i
        className="fa fa-cloud-download clickable"
        onClick={() => props.addTorrent(props.data.get("url"))}
      ></i>
    </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 = `align-self-start text text-center 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 TorrentSearch;