diff --git a/src/client/components/ComicDetail/AcquisitionPanel.tsx b/src/client/components/ComicDetail/AcquisitionPanel.tsx index 86baf2b..d8fd82c 100644 --- a/src/client/components/ComicDetail/AcquisitionPanel.tsx +++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx @@ -278,9 +278,9 @@ export const AcquisitionPanel = ( )} /> ) : ( -
-
-
+
+
+
AirDC++ is not configured. Please configure it in{" "} Settings > AirDC++ > Connection.
diff --git a/src/client/components/ComicDetail/ComicDetail.tsx b/src/client/components/ComicDetail/ComicDetail.tsx index afa107b..4c52279 100644 --- a/src/client/components/ComicDetail/ComicDetail.tsx +++ b/src/client/components/ComicDetail/ComicDetail.tsx @@ -12,6 +12,7 @@ import { Menu } from "./ActionMenu/Menu"; import { ArchiveOperations } from "./Tabs/ArchiveOperations"; import { ComicInfoXML } from "./Tabs/ComicInfoXML"; import AcquisitionPanel from "./AcquisitionPanel"; +import TorrentSearchPanel from "./TorrentSearchPanel"; import DownloadsPanel from "./DownloadsPanel"; import { VolumeInformation } from "./Tabs/VolumeInformation"; @@ -350,7 +351,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => { ), name: "Torrent Search", - content: <>Torrents, + content: , shouldShow: true, }, { diff --git a/src/client/components/ComicDetail/TorrentSearchPanel.tsx b/src/client/components/ComicDetail/TorrentSearchPanel.tsx new file mode 100644 index 0000000..fc8e835 --- /dev/null +++ b/src/client/components/ComicDetail/TorrentSearchPanel.tsx @@ -0,0 +1,54 @@ +import React, { useCallback, ReactElement, useEffect, useState } from "react"; + +import { useQuery, useQueryClient } from "@tanstack/react-query"; +import axios from "axios"; +import { Form, Field } from "react-final-form"; + +export const TorrentSearchPanel = (props): ReactElement => { + return ( + <> +
+
{}} + initialValues={{}} + render={({ handleSubmit, form, submitting, pristine, values }) => ( + + + {({ input, meta }) => { + return ( +
+
+
+ +
+ + + +
+
+ ); + }} +
+ + )} + /> +
+ + ); +}; + +export default TorrentSearchPanel; diff --git a/src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx b/src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx index 9d7c243..d9f7340 100644 --- a/src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx +++ b/src/client/components/Settings/ProwlarrSettings/ProwlarrSettingsForm.tsx @@ -1,5 +1,6 @@ import React from "react"; import { useQuery } from "@tanstack/react-query"; +import { Form, Field } from "react-final-form"; import { PROWLARR_SERVICE_BASE_URI } from "../../../constants/endpoints"; import axios from "axios"; @@ -19,10 +20,41 @@ export const ProwlarrSettingsForm = (props) => { queryKey: ["prowlarrConnectionResult"], }); console.log(data); + const submitHandler = () => {}; + const initialData = {}; return ( <> Prowlarr Settings. -
+
( + +
+
+

Configure Prowlarr integration here.

+

+ Note that you need a Prowlarr instance hosted and running to + configure the integration. +

+

+ See{" "} + + here + {" "} + for Prowlarr installation instructions for various platforms. +

+
+
+
+ )} + /> ); };