Use redux hooks on buttons components

frontend/js/components/buttons/torrents.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { List } from "immutable";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { prettySize } from "../../utils";
 import { addTorrent } from "../../actions/torrents";
@@ -45,10 +45,10 @@ function buildMenuItems(torrents) {
   return entries;
 }
 
-const torrentsButton = ({ torrents, search, searching, addTorrent, url }) => {
-  /* eslint-disable */
+export const TorrentsButton = ({ torrents, search, searching, url }) => {
+  const dispatch = useDispatch();
+
   const [show, setShow] = useState(false);
-  /* eslint-enable */
   const entries = buildMenuItems(torrents);
   const count = torrents && torrents.size !== 0 ? torrents.size : 0;
 
@@ -97,7 +97,10 @@ const torrentsButton = ({ torrents, search, searching, addTorrent, url }) => {
                 return <Dropdown.Divider key={index} />;
               case "entry":
                 return (
-                  <Dropdown.Item key={index} onClick={() => addTorrent(e.url)}>
+                  <Dropdown.Item
+                    key={index}
+                    onClick={() => dispatch(addTorrent(e.url))}
+                  >
                     {e.quality}
                     {e.size !== 0 && (
                       <small className="ml-1">({prettySize(e.size)})</small>
@@ -111,15 +114,12 @@ const torrentsButton = ({ torrents, search, searching, addTorrent, url }) => {
     </span>
   );
 };
-torrentsButton.propTypes = {
+TorrentsButton.propTypes = {
   torrents: PropTypes.instanceOf(List),
   searching: PropTypes.bool,
   search: PropTypes.func.isRequired,
-  addTorrent: PropTypes.func.isRequired,
   url: PropTypes.string,
 };
-torrentsButton.defaultProps = {
+TorrentsButton.defaultProps = {
   torrents: List(),
 };
-
-export const TorrentsButton = connect(null, { addTorrent })(torrentsButton);