canape/frontend/js/components/buttons/torrents.js

import React, { useState } from "react";
import PropTypes from "prop-types";
import { List } from "immutable";
import { connect } from "react-redux";

import { prettySize } from "../../utils";
import { addTorrent } from "../../actions/torrents";

import Dropdown from "react-bootstrap/Dropdown";

function buildMenuItems(torrents) {
  if (!torrents || torrents.size === 0) {
    return [];
  }

  const t = torrents.groupBy((el) => el.get("source"));

  // Build the array of entries
  let entries = [];
  let dividerCount = t.size - 1;
  for (let [source, torrentList] of t.entrySeq()) {
    // Push the title
    entries.push({
      type: "header",
      value: source,
    });

    // Push the torrents
    for (let torrent of torrentList) {
      entries.push({
        type: "entry",
        quality: torrent.get("quality"),
        url: torrent.get("url"),
        size: torrent.get("size"),
      });
    }

    // Push the divider
    if (dividerCount > 0) {
      dividerCount--;
      entries.push({ type: "divider" });
    }
  }

  return entries;
}

const torrentsButton = ({ torrents, search, searching, addTorrent, url }) => {
  /* eslint-disable */
  const [show, setShow] = useState(false);
  /* eslint-enable */
  const entries = buildMenuItems(torrents);
  const count = torrents && torrents.size !== 0 ? torrents.size : 0;

  const onSelect = (eventKey) => {
    // Close the dropdown if the eventkey is not specified
    if (eventKey === null) {
      setShow(false);
    }
  };

  const onToggle = (isOpen, event, metadata) => {
    // Don't close on select
    if (metadata && metadata.source !== "select") {
      setShow(isOpen);
    }
  };

  return (
    <span className="mr-1 mb-1">
      <Dropdown drop="up" show={show} onToggle={onToggle} onSelect={onSelect}>
        <Dropdown.Toggle variant="secondary" bsPrefix="btn-sm w-md-100">
          <i className="fa fa-magnet mr-1" />
          Torrents
          <span className="ml-1 badge badge-pill badge-info">{count}</span>
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey={1} onClick={search}>
            <i className={`fa ${searching ? "fa-spin" : ""} fa-refresh mr-1`} />
            Automatic search
          </Dropdown.Item>
          <Dropdown.Item href={url}>
            <i className="fa fa-search mr-1" />
            Manual search
          </Dropdown.Item>
          {entries.length > 0 && <Dropdown.Divider />}
          {entries.map((e, index) => {
            switch (e.type) {
              case "header":
                return (
                  <Dropdown.Header key={index}>
                    <span className="text-warning">{e.value}</span>
                  </Dropdown.Header>
                );
              case "divider":
                return <Dropdown.Divider key={index} />;
              case "entry":
                return (
                  <Dropdown.Item key={index} onClick={() => addTorrent(e.url)}>
                    {e.quality}
                    {e.size !== 0 && (
                      <small className="ml-1">({prettySize(e.size)})</small>
                    )}
                  </Dropdown.Item>
                );
            }
          })}
        </Dropdown.Menu>
      </Dropdown>
    </span>
  );
};
torrentsButton.propTypes = {
  torrents: PropTypes.instanceOf(List),
  searching: PropTypes.bool,
  search: PropTypes.func.isRequired,
  addTorrent: PropTypes.func.isRequired,
  url: PropTypes.string,
};
torrentsButton.defaultProps = {
  torrents: List(),
};

export const TorrentsButton = connect(null, { addTorrent })(torrentsButton);