From aa3192bc1aff27ab67656efb6dc95f93f0a1d1c0 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Fri, 29 Mar 2024 19:35:57 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B2=20Added=20visual=20indicators=20of?= =?UTF-8?q?=20torrent=20progress?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ComicDetail/DownloadsPanel.tsx | 18 +------- .../ComicDetail/TorrentDownloads.tsx | 41 ++++++++++++++++--- .../ComicDetail/TorrentSearchPanel.tsx | 27 ++++++------ src/client/constants/endpoints.ts | 7 ++++ 4 files changed, 57 insertions(+), 36 deletions(-) diff --git a/src/client/components/ComicDetail/DownloadsPanel.tsx b/src/client/components/ComicDetail/DownloadsPanel.tsx index 75d93e0..8eb5d28 100644 --- a/src/client/components/ComicDetail/DownloadsPanel.tsx +++ b/src/client/components/ComicDetail/DownloadsPanel.tsx @@ -8,7 +8,7 @@ import axios from "axios"; import { LIBRARY_SERVICE_BASE_URI, QBITTORRENT_SERVICE_BASE_URI, - JOB_QUEUE_SERVICE_BASE_URI, + TORRENT_JOB_SERVICE_BASE_URI, } from "../../constants/endpoints"; import { useStore } from "../../store"; import { useShallow } from "zustand/react/shallow"; @@ -60,20 +60,6 @@ export const DownloadsPanel = ( }), }); - // const { - // data: torrentProperties, - // isSuccess: torrentPropertiesFetched, - // isFetching: torrentPropertiesFetching, - // } = useQuery({ - // queryFn: async () => - // await axios({ - // url: `${QBITTORRENT_SERVICE_BASE_URI}/getTorrentProperties`, - // method: "POST", - // data: { infoHashes }, - // }), - // queryKey: ["torrentProperties", infoHashes], - // }); - const getBundles = async (comicObject) => { if (comicObject?.data.acquisition.directconnect) { const filteredBundles = @@ -91,7 +77,7 @@ export const DownloadsPanel = ( const { data: torrentData } = useQuery({ queryFn: () => axios({ - url: `${JOB_QUEUE_SERVICE_BASE_URI}/getTorrentData`, + url: `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`, method: "GET", params: { trigger: activeTab, diff --git a/src/client/components/ComicDetail/TorrentDownloads.tsx b/src/client/components/ComicDetail/TorrentDownloads.tsx index b5aa0fe..d6e4b89 100644 --- a/src/client/components/ComicDetail/TorrentDownloads.tsx +++ b/src/client/components/ComicDetail/TorrentDownloads.tsx @@ -9,21 +9,52 @@ export const TorrentDownloads = (props) => { <> {data.map(({ torrent }) => { return ( -
+
{torrent.name}

{torrent.hash}

Added on {dayjs.unix(torrent.added_on).format("ddd, D MMM, YYYY")}

-

{torrent.progress}

+ +

+ {torrent.progress > 0 ? ( + <> + + + {Math.floor(torrent.progress * 100)}% + + {/* downloaded/left */} + + + + + + {prettyBytes(torrent.downloaded)} + + + {/* uploaded */} + + + + + {prettyBytes(torrent.uploaded)} + + + + ) : null} +

{/* Peers */} - - + + - {torrent.peers_total} + {torrent.trackers_count} diff --git a/src/client/components/ComicDetail/TorrentSearchPanel.tsx b/src/client/components/ComicDetail/TorrentSearchPanel.tsx index 96579a8..f296e6a 100644 --- a/src/client/components/ComicDetail/TorrentSearchPanel.tsx +++ b/src/client/components/ComicDetail/TorrentSearchPanel.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery } from "@tanstack/react-query"; import axios from "axios"; import { Form, Field } from "react-final-form"; import { @@ -37,25 +37,22 @@ export const TorrentSearchPanel = (props) => { }, 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: { - comicObjectId, - torrentToDownload, - }, - }), - queryKey: ["addTorrentResult", torrentToDownload], - enabled: !isEmpty(torrentToDownload), + const mutation = useMutation({ + mutationFn: async (newTorrent) => + axios.post(`${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`, newTorrent), + onSuccess: async (data) => { + console.log(data); + }, }); const searchIndexer = (values) => { setSearchTerm({ issueName: values.issueName }); // Update searchTerm based on the form submission }; const downloadTorrent = (evt) => { - console.log(evt); - setTorrentToDownload(evt); + const newTorrent = { + comicObjectId, + torrentToDownload: evt, + }; + mutation.mutate(newTorrent); }; return ( <> diff --git a/src/client/constants/endpoints.ts b/src/client/constants/endpoints.ts index 30600fa..2fc2125 100644 --- a/src/client/constants/endpoints.ts +++ b/src/client/constants/endpoints.ts @@ -97,3 +97,10 @@ export const PROWLARR_SERVICE_BASE_URI = hostURIBuilder({ port: "3060", apiPath: `/api/prowlarr`, }); + +export const TORRENT_JOB_SERVICE_BASE_URI = hostURIBuilder({ + protocol: "http", + host: import.meta.env.UNDERLYING_HOSTNAME || "localhost", + port: "3000", + apiPath: `/api/torrentjobs`, +});