🧲 Added visual indicators of torrent progress

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,

src/client/components/ComicDetail/TorrentDownloads.tsx

@@ -9,21 +9,52 @@ export const TorrentDownloads = (props) => {
     <>
       {data.map(({ torrent }) => {
         return (
-          <dl>
+          <dl className="mt-5">
             <dt className="text-lg">{torrent.name}</dt>
             <p className="text-sm">{torrent.hash}</p>
             <p className="text-sm">
               Added on {dayjs.unix(torrent.added_on).format("ddd, D MMM, YYYY")}
             </p>
-            <p>{torrent.progress}</p>
+
+            <p className="flex gap-2 mt-1">
+              {torrent.progress > 0 ? (
+                <>
+                  <progress
+                    className="w-80 mt-2 [&::-webkit-progress-bar]:rounded-lg [&::-webkit-progress-value]:rounded-lg [&::-webkit-progress-bar]:bg-slate-300 [&::-webkit-progress-value]:bg-orange-400 [&::-moz-progress-bar]:bg-orange-400 h-2"
+                    value={Math.floor(torrent.progress * 100).toString()}
+                    max="100"
+                  ></progress>
+
+                  <span>{Math.floor(torrent.progress * 100)}%</span>
+
+                  {/* downloaded/left */}
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
+                    </span>
+                    <span className="text-md text-slate-900">
+                      {prettyBytes(torrent.downloaded)}
+                    </span>
+
+                    {/* uploaded */}
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
+                    </span>
+                    <span className="text-md text-slate-900">
+                      {prettyBytes(torrent.uploaded)}
+                    </span>
+                  </span>
+                </>
+              ) : null}
+            </p>
             <div className="flex gap-4 mt-2">
               {/* Peers */}
               <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <span className="pr-1 pt-1">
+                <span className="pr-1">
-                  <i className="icon-[solar--user-hand-up-bold-duotone] h-4 w-4"></i>
+                  <i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
                 </span>
                 <span className="text-md text-slate-900">
-                  {torrent.peers_total}
+                  {torrent.trackers_count}
                 </span>
               </span>
 

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({
+  const mutation = useMutation({
-    queryFn: async () =>
+    mutationFn: async (newTorrent) =>
-      axios({
+      axios.post(`${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`, newTorrent),
-        url: `${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`,
+    onSuccess: async (data) => {
-        method: "POST",
+      console.log(data);
-        data: {
+    },
-          comicObjectId,
-          torrentToDownload,
-        },
-      }),
-    queryKey: ["addTorrentResult", torrentToDownload],
-    enabled: !isEmpty(torrentToDownload),
   });
   const searchIndexer = (values) => {
     setSearchTerm({ issueName: values.issueName }); // Update searchTerm based on the form submission
   };
   const downloadTorrent = (evt) => {
-    console.log(evt);
+    const newTorrent = {
-    setTorrentToDownload(evt);
+      comicObjectId,
+      torrentToDownload: evt,
+    };
+    mutation.mutate(newTorrent);
   };
   return (
     <>

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`,
+});