From f4408cd4930d40e870ad773f6899e0121dee8cc8 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Sat, 16 Mar 2024 18:34:41 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B2=20Fixed=20the=20auto-population=20?= =?UTF-8?q?of=20search=20box?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ComicDetail/ComicDetail.tsx | 2 +- .../components/ComicDetail/DownloadsPanel.tsx | 16 -- .../ComicDetail/TorrentSearchPanel.tsx | 153 +++++++----------- .../QbittorrentConnectionForm.tsx | 12 +- 4 files changed, 60 insertions(+), 123 deletions(-) diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index da1b4a7..be36862 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -351,7 +351,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { ), name: "Torrent Search", - content: , + content: , shouldShow: true, }, { diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index 8d1f796..618e78c 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/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, diff --git a/src/client/components/ComicDetail/TorrentSearchPanel.tsx b/src/client/components/ComicDetail/TorrentSearchPanel.tsx index af3eed9..7a0c657 100644 --- a/src/client/components/ComicDetail/TorrentSearchPanel.tsx +++ b/src/client/components/ComicDetail/TorrentSearchPanel.tsx @@ -1,39 +1,23 @@ -import React, { useCallback, ReactElement, useEffect, useState } from "react"; - -import { useQuery, useQueryClient } from "@tanstack/react-query"; +import React, { useState } from "react"; +import { useQuery } 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 => { - const { comicObjectId } = props; - const [prowlarrSettingsData, setProwlarrSettingsData] = useState({}); - const [searchTerm, setSearchTerm] = useState(""); +export const TorrentSearchPanel = (props) => { + const { comicObjectId, issueName } = props; + // Initialize searchTerm with issueName from props + 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 () => - axios({ + queryKey: ["searchResults", searchTerm.issueName], + 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({ - queryFn: async () => - 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); + const searchIndexer = (values) => { + setSearchTerm({ issueName: values.issueName }); // Update searchTerm based on the form submission }; + return ( <>
( + onSubmit={searchIndexer} + initialValues={searchTerm} + render={({ handleSubmit }) => ( - - {({ input, meta }) => { - return ( -
-
-
- -
- - - + + {({ input, meta }) => ( +
+
+
+ {/* Icon placeholder */} +
+ +
- ); - }} +
+ )} )} />
- {/* results */}
    {isSuccess && - data?.data.map((result, idx) => { - return ( -
  • -

    {result.fileName}

    -

    {result.indexer}

    - -
    • - ); - })} + data?.data.map((result, idx) => ( +
  • +

    {result.fileName}

    +

    {result.indexer}

    + +
    • + ))}
); diff --git a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx b/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx index 8b74121..e75ab4c 100644 --- a/src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx +++ b/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({