Use redux hooks on torrent components

frontend/js/components/torrents/list.js

@@ -1,39 +1,28 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Map, List } from "immutable";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { prettySize } from "../../utils";
-import {
-  fetchTorrents,
-  addTorrent,
-  removeTorrent,
-} from "../../actions/torrents";
+import { addTorrent, removeTorrent } from "../../actions/torrents";
 
-const mapStateToProps = (state) => ({
-  torrents: state.torrentStore.get("torrents"),
-});
-const mapDispatchToProps = {
-  fetchTorrents,
-  addTorrent,
-  removeTorrent,
-};
+const TorrentList = () => {
+  const torrents = useSelector((state) => state.torrentStore.get("torrents"));
+  const dispatch = useDispatch();
 
-const TorrentList = (props) => (
-  <div className="row">
-    <div className="col-12">
-      <AddTorrent addTorrent={props.addTorrent} />
-      <Torrents torrents={props.torrents} removeTorrent={props.removeTorrent} />
+  return (
+    <div className="row">
+      <div className="col-12">
+        <AddTorrent addTorrent={(url) => dispatch(addTorrent(url))} />
+        <Torrents
+          torrents={torrents}
+          removeTorrent={(id) => dispatch(removeTorrent(id))}
+        />
+      </div>
     </div>
-  </div>
-);
-TorrentList.propTypes = {
-  fetchTorrents: PropTypes.func.isRequired,
-  addTorrent: PropTypes.func.isRequired,
-  removeTorrent: PropTypes.func.isRequired,
-  torrents: PropTypes.instanceOf(List),
+  );
 };
-export default connect(mapStateToProps, mapDispatchToProps)(TorrentList);
+export default TorrentList;
 
 const AddTorrent = (props) => {
   const [url, setUrl] = useState("");

frontend/js/components/torrents/search.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { addTorrent, searchTorrents } from "../../actions/torrents";
 import { Map, List } from "immutable";
 import Loader from "../loader/loader";
@@ -9,40 +9,38 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 import { prettySize } from "../../utils";
 
-const mapStateToProps = (state) => ({
-  searching: state.torrentStore.get("searching"),
-  results: state.torrentStore.get("searchResults"),
-});
-const mapDispatchToProps = { addTorrent, searchTorrents };
+const TorrentSearch = ({ history, match }) => {
+  const dispatch = useDispatch();
+
+  const searching = useSelector((state) => state.torrentStore.get("searching"));
+  const results = useSelector((state) =>
+    state.torrentStore.get("searchResults")
+  );
 
-const TorrentSearch = ({
-  searching,
-  searchTorrents,
-  results,
-  addTorrent,
-  history,
-  match,
-}) => {
   const [search, setSearch] = useState(match.params.search || "");
   const [type, setType] = useState(match.params.type || "");
-  const [url, setUrl] = useState("");
 
-  const getUrl = useCallback(() => {
+  const url = useCallback(() => {
+    if (search === "" || type === "") {
+      return "";
+    }
+
     return `/torrents/search/${type}/${encodeURI(search)}`;
   }, [type, search]);
 
-  useEffect(() => {
-    if (search === "") {
-      return;
-    }
-    if (type === "") {
+  const searchFunc = useCallback(() => {
+    const searchURL = url();
+    if (searchURL === "") {
       return;
     }
 
-    const url = getUrl();
-    searchTorrents(url);
-    history.push(url);
-  }, [url, getUrl, searchTorrents, history, search, type]);
+    dispatch(searchTorrents(searchURL));
+    history.push(searchURL);
+  }, [dispatch, history, url]);
+
+  useEffect(() => {
+    searchFunc();
+  }, [searchFunc]);
 
   return (
     <div className="row">
@@ -61,7 +59,7 @@ const TorrentSearch = ({
             typeFromURL={type}
             handleClick={() => {
               setType("movies");
-              setUrl(getUrl());
+              searchFunc();
             }}
           />
           <SearchButton
@@ -70,7 +68,7 @@ const TorrentSearch = ({
             typeFromURL={type}
             handleClick={() => {
               setType("shows");
-              setUrl(getUrl());
+              searchFunc();
             }}
           />
         </div>
@@ -79,7 +77,7 @@ const TorrentSearch = ({
         <TorrentList
           searching={searching}
           results={results}
-          addTorrent={addTorrent}
+          addTorrent={(url) => dispatch(addTorrent(url))}
           searchFromURL={search}
         />
       </div>
@@ -87,24 +85,20 @@ const TorrentSearch = ({
   );
 };
 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 variant = props.type === props.typeFromURL ? "primary" : "secondary";
+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={props.handleClick}
+      onClick={handleClick}
     >
-      <i className="fa fa-search" aria-hidden="true"></i> {props.text}
+      <i className="fa fa-search" aria-hidden="true"></i> {text}
     </button>
   );
 };
@@ -233,4 +227,4 @@ TorrentHealth.propTypes = {
   leechers: PropTypes.number,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(TorrentSearch);
+export default TorrentSearch;