🧲 Fixed the auto-population of search box

src/client/components/ComicDetail/ComicDetail.tsx

@@ -351,7 +351,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         </span>
       ),
       name: "Torrent Search",
-      content: <TorrentSearchPanel comicObjectId={_id} />,
+      content: <TorrentSearchPanel comicObjectId={_id} issueName={issueName} />,
       shouldShow: true,
     },
     {

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -46,22 +46,6 @@ export const DownloadsPanel = (
       }),
   });
 
-  const { data: qbittorrentConnectionResult } = useQuery({
-    queryFn: async () =>
-      axios({
-        url: `${QBITTORRENT_SERVICE_BASE_URI}/connect`,
-        method: "POST",
-        data: {
-          hostname: "localhost",
-          protocol: "http",
-          port: "8080",
-          username: "admin",
-          password: "password",
-        },
-      }),
-    queryKey: ["qbittorrentConnection"],
-  });
-
   const {
     data: torrentProperties,
     isSuccess: torrentPropertiesFetched,

src/client/components/ComicDetail/TorrentSearchPanel.tsx

@@ -1,39 +1,23 @@
-import React, { useCallback, ReactElement, useEffect, useState } from "react";
+import React, { useState } from "react";
-
+import { useQuery } from "@tanstack/react-query";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { Form, Field } from "react-final-form";
 import {
   PROWLARR_SERVICE_BASE_URI,
   QBITTORRENT_SERVICE_BASE_URI,
 } from "../../constants/endpoints";
-import { isEmpty, isNil } from "lodash";
+import { isNil } from "lodash";
 
-export const TorrentSearchPanel = (props): ReactElement => {
+export const TorrentSearchPanel = (props) => {
-  const { comicObjectId } = props;
+  const { comicObjectId, issueName } = props;
-  const [prowlarrSettingsData, setProwlarrSettingsData] = useState({});
+  // Initialize searchTerm with issueName from props
-  const [searchTerm, setSearchTerm] = useState("");
+  const [searchTerm, setSearchTerm] = useState({ issueName });
   const [torrentToDownload, setTorrentToDownload] = useState("");
 
-  const { data: qbittorrentConnectionResult } = useQuery({
-    queryFn: async () =>
-      axios({
-        url: `${QBITTORRENT_SERVICE_BASE_URI}/connect`,
-        method: "POST",
-        data: {
-          hostname: "localhost",
-          protocol: "http",
-          port: "8080",
-          username: "admin",
-          password: "password",
-        },
-      }),
-    queryKey: ["qbittorrentConnection"],
-  });
-
   const { data, isSuccess } = useQuery({
-    queryFn: async () =>
+    queryKey: ["searchResults", searchTerm.issueName],
-      axios({
+    queryFn: async () => {
+      return await axios({
         url: `${PROWLARR_SERVICE_BASE_URI}/search`,
         method: "POST",
         data: {
@@ -41,97 +25,76 @@ export const TorrentSearchPanel = (props): ReactElement => {
           apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
           offset: 0,
           categories: [7030],
-          query: searchTerm,
+          query: searchTerm.issueName,
           host: "localhost",
           limit: 100,
           type: "search",
           indexerIds: [2],
         },
-      }),
+      });
-    queryKey: ["prowlarrSettingsData", searchTerm],
+    },
-    enabled: searchTerm !== "",
+    enabled: !isNil(searchTerm.issueName) && searchTerm.issueName.trim() !== "", // Make sure searchTerm is not empty
   });
 
-  const { data: addTorrentResult } = useQuery({
+  const searchIndexer = (values) => {
-    queryFn: async () =>
+    setSearchTerm({ issueName: values.issueName }); // Update searchTerm based on the form submission
-      axios({
-        url: `${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`,
-        method: "POST",
-        data: {
-          torrentToDownload,
-          comicObjectId,
-        },
-      }),
-    queryKey: ["addTorrentResult"],
-    enabled: !isNil(torrentToDownload) && searchTerm !== "",
-  });
-  console.log(torrentToDownload);
-  const searchProwlarrIndexer = (evt) => {
-    setSearchTerm(evt.searchTerm);
-  };
-  const downloadTorrent = (evt) => {
-    console.log(evt);
-    setTorrentToDownload(evt);
   };
+
   return (
     <>
       <div className="mt-5">
         <Form
-          onSubmit={searchProwlarrIndexer}
+          onSubmit={searchIndexer}
-          initialValues={{}}
+          initialValues={searchTerm}
-          render={({ handleSubmit, form, submitting, pristine, values }) => (
+          render={({ handleSubmit }) => (
             <form onSubmit={handleSubmit}>
-              <Field name="searchTerm">
+              <Field name="issueName">
-                {({ input, meta }) => {
+                {({ input, meta }) => (
-                  return (
+                  <div className="max-w-fit">
-                    <div className="max-w-fit">
+                    <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                      <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
+                      <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                        <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
+                        {/* Icon placeholder */}
-                          <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                        <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
-                        </div>
-                        <input
-                          {...input}
-                          className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
-                          placeholder="Enter a search term"
-                        />
-
-                        <button
-                          className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                          type="submit"
-                        >
-                          <div className="flex flex-row">
-                            Search Indexer
-                            <div className="h-5 w-5 ml-1">
-                              <i className="h-6 w-6 icon-[solar--magnet-bold-duotone]" />
-                            </div>
-                          </div>
-                        </button>
                       </div>
+                      <input
+                        {...input}
+                        type="text"
+                        className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                        placeholder="Enter a search term"
+                      />
+                      <button
+                        className="sm:mt-0 min-w-fit rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                        type="submit"
+                      >
+                        <div className="flex flex-row">
+                          Search Indexer
+                          <div className="h-5 w-5 ml-1">
+                            <i className="h-6 w-6 icon-[solar--magnet-bold-duotone]" />
+                          </div>
+                        </div>
+                      </button>
                     </div>
-                  );
+                  </div>
-                }}
+                )}
               </Field>
             </form>
           )}
         />
       </div>
-      {/* results */}
       <ul>
         {isSuccess &&
-          data?.data.map((result, idx) => {
+          data?.data.map((result, idx) => (
-            return (
+            <li key={idx}>
-              <li key={idx}>
+              <p>{result.fileName}</p>
-                <p>{result.fileName}</p>
+              <p>{result.indexer}</p>
-                <p>{result.indexer}</p>
+              <button
-                <button
+                className="sm:mt-0 min-w-fit rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-                  className="sm:mt-0 min-w-fit rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                onClick={() => setTorrentToDownload(result.downloadUrl)}
-                  onClick={() => downloadTorrent(result.downloadUrl)}
+              >
-                >
+                Download
-                  Download
+              </button>
-                </button>
+            </li>
-              </li>
+          ))}
-            );
-          })}
       </ul>
     </>
   );

src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -16,16 +16,7 @@ export const QbittorrentConnectionForm = (): ReactElement => {
   });
   const hostDetails = data?.data?.bittorrent?.client?.host;
   // connect to qbittorrent client
-  const { data: connectionDetails } = useQuery({
+
-    queryKey: [],
-    queryFn: async () =>
-      await axios({
-        url: "http://localhost:3060/api/qbittorrent/connect",
-        method: "POST",
-        data: hostDetails,
-      }),
-    enabled: !!hostDetails,
-  });
   // get qbittorrent client info
   const { data: qbittorrentClientInfo } = useQuery({
     queryKey: ["qbittorrentClientInfo"],
@@ -34,7 +25,6 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         url: "http://localhost:3060/api/qbittorrent/getClientInfo",
         method: "GET",
       }),
-    enabled: !!connectionDetails,
   });
   // Update action using a mutation
   const { mutate } = useMutation({