Fix torrent search on every keystroke

Cleanup the search results when leaving the page.

frontend/js/actions/torrents.js

@@ -22,6 +22,12 @@ export function searchTorrents(url) {
   return request("TORRENTS_SEARCH", configureAxios().get(url));
 }
 
+export function clearTorrentSearch() {
+  return {
+    type: "TORRENTS_SEARCH_CLEAR",
+  };
+}
+
 export function setFetchedTorrents(torrents) {
   return {
     type: "TORRENTS_FETCH_FULFILLED",

frontend/js/components/torrents/search.js

@@ -1,40 +1,39 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
-import { addTorrent, searchTorrents } from "../../actions/torrents";
 import Loader from "../loader/loader";
 
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 import { prettySize } from "../../utils";
 
+import {
+  addTorrent,
+  searchTorrents,
+  clearTorrentSearch,
+} from "../../actions/torrents";
+
 export const TorrentSearch = ({ history, match }) => {
   const dispatch = useDispatch();
 
   const [search, setSearch] = useState(match.params.search || "");
   const [type, setType] = useState(match.params.type || "");
 
-  const url = useCallback(() => {
+  const searchFunc = (type = "") => {
     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]);
+    const url = `/torrents/search/${type}/${encodeURI(search)}`;
+    setType(type);
+    dispatch(searchTorrents(url));
+    history.push(url);
+  };
 
   useEffect(() => {
-    searchFunc();
-  }, [searchFunc]);
+    searchFunc(type);
+    return () => dispatch(clearTorrentSearch());
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <div className="row">
@@ -52,8 +51,7 @@ export const TorrentSearch = ({ history, match }) => {
             type="movies"
             typeFromURL={type}
             handleClick={() => {
-              setType("movies");
-              searchFunc();
+              searchFunc("movies");
             }}
           />
           <SearchButton
@@ -61,14 +59,13 @@ export const TorrentSearch = ({ history, match }) => {
             type="shows"
             typeFromURL={type}
             handleClick={() => {
-              setType("shows");
-              searchFunc();
+              searchFunc("shows");
             }}
           />
         </div>
       </div>
       <div className="col-12">
-        <TorrentList search={search} />
+        <TorrentList />
       </div>
     </div>
   );
@@ -98,7 +95,7 @@ SearchButton.propTypes = {
   handleClick: PropTypes.func.isRequired,
 };
 
-const TorrentList = ({ search }) => {
+const TorrentList = () => {
   const searching = useSelector((state) => state.torrents.searching);
   const results = useSelector((state) => state.torrents.searchResults);
 
@@ -106,10 +103,6 @@ const TorrentList = ({ search }) => {
     return <Loader />;
   }
 
-  if (search === "") {
-    return null;
-  }
-
   if (results.size === 0) {
     return (
       <div className="jumbotron">
@@ -126,9 +119,6 @@ const TorrentList = ({ search }) => {
     </React.Fragment>
   );
 };
-TorrentList.propTypes = {
-  search: PropTypes.string,
-};
 
 const Torrent = ({ torrent }) => {
   const dispatch = useDispatch();

frontend/js/reducers/torrents.js

@@ -28,6 +28,10 @@ export default (state = defaultState, action) =>
         draft.searchResults = action.payload.response.data;
         break;
 
+      case "TORRENTS_SEARCH_CLEAR":
+        draft.searchResults = [];
+        break;
+
       default:
         return draft;
     }