🐯 Mocked a prowlarr call

README.md

@@ -6,25 +6,14 @@ ThreeTwo! _aims to be_ a comic book curation app.
 
 ### Screenshots
 
-#### Dashboard
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Dashboard.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Dashboard.jpg)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/Library.png)
 
-#### Issue View
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/DC%2B%2B%20integration.png)
 
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/ComicDetail.jpg)
+![](https://github.com/rishighan/threetwo-visual-updates/raw/67e56878eb0381c73c1dea746a45253d3dcaa184/update_december_2022/ComicVine%20Matching.png)
 
-#### DC++ Search
-
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/DC%2B%2BSearching.jpg)
-
-#### Import
-
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Import.jpg)
-
-#### Comic Vine Matching, Metadata Scraping
-
-![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/CVMatching.jpg)
 
 ### 🦄 Early Development Support Channel
 
@@ -39,8 +28,7 @@ ThreeTwo! currently is set up as:
 1. The UI, this repo.
 2. [threetwo-core-service](https://github.com/rishighan/threetwo-core-service)
 3. [threetwo-metadata-service](https://github.com/rishighan/threetwo-metadata-service)
-4. [threetwo-acquisition-service](https://github.com/rishighan/threetwo-acquisition-service)
+4. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
-5. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
 
 ## Docker Instructions
 
@@ -55,18 +43,20 @@ For debugging and troubleshooting, you can run this app locally using these step
 3. This will open `http://localhost:5173` in your default browser
 4. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
 
-## Troubleshooting
 
+## Troubleshooting
 ### Docker
 
 1. `docker-compose up` is taking a long time
-
+   
    This is primarily because `threetwo-import-service` pulls `calibre` from the CDN and it has been known to be extremely slow. I can't find a more reliable alternative, so give it some time to finish downloading.
 
 2. What folder do my comics go in?
-
+   
    Your comics go in the `comics` directory at the root of this project.
+   
 
 ## Contribution Guidelines
 
 See [contribution guidelines](https://github.com/rishighan/threetwo/blob/master/contributing.md)
+

src/client/components/ComicDetail/AirDCPPBundles.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import prettyBytes from "pretty-bytes";
-import dayjs from "dayjs";
-import ellipsize from "ellipsize";
-import { map } from "lodash";
-
-export const AirDCPPBundles = (props) => {
-  return (
-    <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
-      <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
-        <thead>
-          <tr>
-            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              Filename
-            </th>
-            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              Size
-            </th>
-            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              Download Time
-            </th>
-            <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
-              Bundle ID
-            </th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-gray-200">
-          {map(props.data, (bundle) => (
-            <tr key={bundle.id} className="text-sm">
-              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                <h5>{ellipsize(bundle.name, 58)}</h5>
-                <span className="text-xs">{ellipsize(bundle.target, 88)}</span>
-              </td>
-              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                {prettyBytes(bundle.size)}
-              </td>
-              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                {dayjs
-                  .unix(bundle.time_finished)
-                  .format("h:mm on ddd, D MMM, YYYY")}
-              </td>
-              <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
-                <span className="tag is-warning">{bundle.id}</span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};

src/client/components/ComicDetail/ComicDetail.tsx

@@ -351,18 +351,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
         </span>
       ),
       name: "Torrent Search",
-      content: <TorrentSearchPanel comicObjectId={_id} issueName={issueName} />,
+      content: <TorrentSearchPanel />,
       shouldShow: true,
     },
     {
       id: 6,
       name: "Downloads",
-      icon: (
+      icon: <>{acquisition?.directconnect?.downloads?.length}</>,
-        <>
-          {acquisition?.directconnect?.downloads?.length +
-            acquisition?.torrent.length}
-        </>
-      ),
       content:
         !isNil(data.data) && !isEmpty(data.data) ? (
           <DownloadsPanel key={5} />

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -1,5 +1,7 @@
-import React, { ReactElement } from "react";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import React, { ReactElement, useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { getComicBookDetailById } from "../../actions/comicinfo.actions";
 import { ComicDetail } from "../ComicDetail/ComicDetail";
 import { useQuery } from "@tanstack/react-query";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -1,15 +1,12 @@
 import React, { useEffect, useContext, ReactElement, useState } from "react";
 import { RootState } from "threetwo-ui-typings";
 import { isEmpty, map } from "lodash";
-import { AirDCPPBundles } from "./AirDCPPBundles";
+import prettyBytes from "pretty-bytes";
-import { TorrentDownloads } from "./TorrentDownloads";
+import dayjs from "dayjs";
+import ellipsize from "ellipsize";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import {
+import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
-  LIBRARY_SERVICE_BASE_URI,
-  QBITTORRENT_SERVICE_BASE_URI,
-  TORRENT_JOB_SERVICE_BASE_URI,
-} from "../../constants/endpoints";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useParams } from "react-router-dom";
@@ -23,27 +20,12 @@ export const DownloadsPanel = (
 ): ReactElement | null => {
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
   const [bundles, setBundles] = useState([]);
-  const [infoHashes, setInfoHashes] = useState<string[]>([]);
+  const { airDCPPSocketInstance } = useStore(
-  const [torrentDetails, setTorrentDetails] = useState([]);
+    useShallow((state) => ({
-  const [activeTab, setActiveTab] = useState("torrents");
-  const { airDCPPSocketInstance, socketIOInstance } = useStore(
-    useShallow((state: any) => ({
       airDCPPSocketInstance: state.airDCPPSocketInstance,
-      socketIOInstance: state.socketIOInstance,
     })),
   );
 
-  // React to torrent progress data sent over websockets
-  socketIOInstance.on("AS_TORRENT_DATA", (data) => {
-    const torrents = data.torrents
-      .flatMap(({ _id, details }) => {
-        if (_id === comicObjectId) {
-          return details;
-        }
-      })
-      .filter((item) => item !== undefined);
-    setTorrentDetails(torrents);
-  });
   // Fetch the downloaded files and currently-downloading file(s) from AirDC++
   const { data: comicObject, isSuccess } = useQuery({
     queryKey: ["bundles"],
@@ -72,75 +54,65 @@ export const DownloadsPanel = (
     }
   };
 
-  // Call the scheduled job for fetching torrent data
-  // triggered by the active tab been set to "torrents"
-  const { data: torrentData } = useQuery({
-    queryFn: () =>
-      axios({
-        url: `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
-        method: "GET",
-        params: {
-          trigger: activeTab,
-        },
-      }),
-    queryKey: [activeTab],
-  });
-
   useEffect(() => {
     getBundles(comicObject).then((result) => {
       setBundles(result);
     });
   }, [comicObject]);
 
+  const Bundles = (props) => {
+    return (
+      <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
+        <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
+          <thead>
+            <tr>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Filename
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Size
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Download Time
+              </th>
+              <th className="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-slate-200">
+                Bundle ID
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200">
+            {map(props.data, (bundle) => (
+              <tr key={bundle.id} className="text-sm">
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                  <h5>{ellipsize(bundle.name, 58)}</h5>
+                  <span className="text-xs">
+                    {ellipsize(bundle.target, 88)}
+                  </span>
+                </td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                  {prettyBytes(bundle.size)}
+                </td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                  {dayjs
+                    .unix(bundle.time_finished)
+                    .format("h:mm on ddd, D MMM, YYYY")}
+                </td>
+                <td className="whitespace-nowrap px-2 py-2 text-gray-700 dark:text-slate-300">
+                  <span className="tag is-warning">{bundle.id}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  };
+
   return (
     <div className="columns is-multiline">
-      {!isEmpty(airDCPPSocketInstance) &&
+      {!isEmpty(airDCPPSocketInstance) && !isEmpty(bundles) && (
-        !isEmpty(bundles) &&
+        <Bundles data={bundles} />
-        activeTab === "directconnect" && <AirDCPPBundles data={bundles} />}
+      )}
-
-      <div>
-        <div className="sm:hidden">
-          <label htmlFor="Download Type" className="sr-only">
-            Download Type
-          </label>
-
-          <select id="Tab" className="w-full rounded-md border-gray-200">
-            <option>DC++ Downloads</option>
-            <option>Torrents</option>
-          </select>
-        </div>
-
-        <div className="hidden sm:block">
-          <nav className="flex gap-6" aria-label="Tabs">
-            <a
-              href="#"
-              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
-                activeTab === "directconnect"
-                  ? "bg-slate-200 dark:text-slate-200 dark:bg-slate-400 text-slate-800"
-                  : "dark:text-slate-400 text-slate-800"
-              }`}
-              aria-current="page"
-              onClick={() => setActiveTab("directconnect")}
-            >
-              DC++ Downloads
-            </a>
-
-            <a
-              href="#"
-              className={`shrink-0 rounded-lg p-2 text-sm font-medium hover:bg-gray-50 hover:text-gray-700 ${
-                activeTab === "torrents"
-                  ? "bg-slate-200 text-slate-800"
-                  : "dark:text-slate-400 text-slate-800"
-              }`}
-              onClick={() => setActiveTab("torrents")}
-            >
-              Torrents
-            </a>
-          </nav>
-        </div>
-      </div>
-
-      {activeTab === "torrents" && <TorrentDownloads data={torrentDetails} />}
     </div>
   );
 };

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -48,7 +48,7 @@ export const RawFileDetails = (props): ReactElement => {
               <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
                 {/* File extension */}
                 <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                  <span className="pt-1">
+                  <span className="pr-1 pt-1">
                     <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
                   </span>
 

src/client/components/ComicDetail/TabControls.tsx

@@ -1,9 +1,15 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
 import { isNil } from "lodash";
 
 export const TabControls = (props): ReactElement => {
+  // const comicBookDetailData = useSelector(
+  //   (state: RootState) => state.comicInfo.comicBookDetail,
+  // );
   const { filteredTabs, downloadCount } = props;
   const [active, setActive] = useState(filteredTabs[0].id);
+  // useEffect(() => {
+  //   setActive(filteredTabs[0].id);
+  // }, [filteredTabs]);
 
   return (
     <>
@@ -13,11 +19,7 @@ export const TabControls = (props): ReactElement => {
             {filteredTabs.map(({ id, name, icon }) => (
               <a
                 key={id}
-                className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
+                className="inline-flex shrink-0 items-center gap-2 border-b border-transparent px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700"
-                  active === id
-                    ? "border-b border-cyan-50 dark:text-slate-200"
-                    : "border-b border-transparent"
-                }`}
                 aria-current="page"
                 onClick={() => setActive(id)}
               >
@@ -26,7 +28,7 @@ export const TabControls = (props): ReactElement => {
                   {id === 6 && !isNil(downloadCount) ? (
                     <span className="inline-flex flex-row">
                       {/* download count */}
-                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-orange-400">
+                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                         <span className="text-md text-slate-500 dark:text-slate-900">
                           {icon}
                         </span>

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -30,8 +30,6 @@ export const ArchiveOperations = (props): ReactElement => {
   const [currentImage, setCurrentImage] = useState([]);
   const [uncompressedArchive, setUncompressedArchive] = useState([]);
   const [imageAnalysisResult, setImageAnalysisResult] = useState({});
-  const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
-    useState(false);
   const constructImagePaths = (data): Array<string> => {
     return data?.map((path: string) =>
       escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
@@ -65,7 +63,6 @@ export const ArchiveOperations = (props): ReactElement => {
 
               if (isMounted) {
                 setUncompressedArchive(uncompressedArchive);
-                setShouldRefetchComicBookData(true);
               }
             },
           });
@@ -125,9 +122,8 @@ export const ArchiveOperations = (props): ReactElement => {
     enabled: false,
   });
 
-  if (isSuccess && shouldRefetchComicBookData) {
+  if (isSuccess) {
     queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
-    setShouldRefetchComicBookData(false);
   }
 
   // sliding panel init
@@ -175,8 +171,7 @@ export const ArchiveOperations = (props): ReactElement => {
         </div>
       </article>
       <div className="mt-5">
-        {data.rawFileDetails.archive?.uncompressed &&
+        {data.rawFileDetails.archive?.uncompressed ? (
-        !isEmpty(uncompressedArchive) ? (
           <article
             role="alert"
             className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
@@ -192,7 +187,7 @@ export const ArchiveOperations = (props): ReactElement => {
         ) : null}
 
         <div className="flex flex-row gap-2 mt-4">
-          {isEmpty(uncompressedArchive) ? (
+          {!data.rawFileDetails?.archive?.uncompressed ? (
             <button
               className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
               onClick={() => refetch()}

src/client/components/ComicDetail/TorrentDownloads.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import dayjs from "dayjs";
-import prettyBytes from "pretty-bytes";
-
-export const TorrentDownloads = (props) => {
-  const { data } = props;
-  console.log(Object.values(data));
-  return (
-    <>
-      {data.map(({ torrent }) => {
-        return (
-          <dl className="mt-5 dark:text-slate-200 text-slate-600">
-            <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 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-green-400 [&::-moz-progress-bar]:bg-green-400 h-2"
-                    value={Math.floor(torrent.progress * 100).toString()}
-                    max="100"
-                  ></progress>
-
-                  <span>{Math.floor(torrent.progress * 100)}%</span>
-
-                  {/* downloaded/left */}
-                  <p className="inline-flex items-center bg-slate-200 text-green-800 dark:text-green-900 text-xs font-medium px-2.5 py-1 rounded-md dark:bg-slate-400">
-                    <span className="pr-1">
-                      <i className="icon-[solar--arrow-to-down-left-outline] h-4 w-4"></i>
-                    </span>
-                    <span className="text-md">
-                      {prettyBytes(torrent.downloaded)}
-                    </span>
-                    {/* uploaded */}
-                    <span className="pr-1 text-orange-800 dark:text-orange-900 ml-2">
-                      <i className="icon-[solar--arrow-to-top-left-outline] h-4 w-4"></i>
-                    </span>
-                    <span className="text-md text-orange-800 dark:text-orange-900">
-                      {prettyBytes(torrent.uploaded)}
-                    </span>
-                  </p>
-                </>
-              ) : null}
-            </p>
-            <div className="flex gap-4 mt-2">
-              {/* Peers */}
-              <span className="inline-flex items-center bg-slate-200 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">
-                  <i className="icon-[solar--station-minimalistic-line-duotone] h-5 w-5"></i>
-                </span>
-                <span className="text-md text-slate-900">
-                  {torrent.trackers_count}
-                </span>
-              </span>
-
-              {/* Size */}
-              <span className="inline-flex items-center bg-slate-200 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--mirror-right-bold-duotone] h-4 w-4"></i>
-                </span>
-                <span className="text-md text-slate-900">
-                  {prettyBytes(torrent.total_size)}
-                </span>
-              </span>
-            </div>
-          </dl>
-        );
-      })}
-    </>
-  );
-};
-
-export default TorrentDownloads;

src/client/components/ComicDetail/TorrentSearchPanel.tsx

@@ -1,25 +1,16 @@
-import React, { useState } from "react";
+import React, { useCallback, ReactElement, useEffect, useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
 import { Form, Field } from "react-final-form";
-import {
+import { PROWLARR_SERVICE_BASE_URI } from "../../constants/endpoints";
-  PROWLARR_SERVICE_BASE_URI,
-  QBITTORRENT_SERVICE_BASE_URI,
-} from "../../constants/endpoints";
-import { isEmpty, isNil } from "lodash";
-import ellipsize from "ellipsize";
-import prettyBytes from "pretty-bytes";
 
-export const TorrentSearchPanel = (props) => {
+export const TorrentSearchPanel = (props): ReactElement => {
-  const { issueName, comicObjectId } = props;
+  const [prowlarrSettingsData, setProwlarrSettingsData] = useState({});
-  // Initialize searchTerm with issueName from props
-  const [searchTerm, setSearchTerm] = useState({ issueName });
-  const [torrentToDownload, setTorrentToDownload] = useState("");
 
-  const { data, isSuccess, isLoading } = useQuery({
+  const { data } = useQuery({
-    queryKey: ["searchResults", searchTerm.issueName],
+    queryFn: async () =>
-    queryFn: async () => {
+      axios({
-      return await axios({
         url: `${PROWLARR_SERVICE_BASE_URI}/search`,
         method: "POST",
         data: {
@@ -27,172 +18,58 @@ export const TorrentSearchPanel = (props) => {
           apiKey: "c4f42e265fb044dc81f7e88bd41c3367",
           offset: 0,
           categories: [7030],
-          query: searchTerm.issueName,
+          query: "the darkness",
           host: "localhost",
           limit: 100,
           type: "search",
           indexerIds: [2],
         },
-      });
+      }),
-    },
+    queryKey: ["prowlarrSettingsData"],
-    enabled: !isNil(searchTerm.issueName) && searchTerm.issueName.trim() !== "", // Make sure searchTerm is not empty
   });
-  const mutation = useMutation({
+  console.log(data?.data);
-    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) => {
-    const newTorrent = {
-      comicObjectId,
-      torrentToDownload: evt,
-    };
-    mutation.mutate(newTorrent);
-  };
   return (
     <>
       <div className="mt-5">
         <Form
-          onSubmit={searchIndexer}
+          onSubmit={() => {}}
-          initialValues={searchTerm}
+          initialValues={{}}
-          render={({ handleSubmit }) => (
+          render={({ handleSubmit, form, submitting, pristine, values }) => (
             <form onSubmit={handleSubmit}>
               <Field name="issueName">
-                {({ input, meta }) => (
+                {({ input, meta }) => {
-                  <div className="max-w-fit">
+                  return (
-                    <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
+                    <div className="max-w-fit">
-                      <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
+                      <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
-                        {/* Icon placeholder */}
+                        <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
-                        <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}
-                        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>
+                        <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>
                     </div>
-                  </div>
+                  );
-                )}
+                }}
               </Field>
             </form>
           )}
         />
       </div>
-
-      <article
-        role="alert"
-        className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
-      >
-        <div>
-          The default search term is an auto-detected title; you may need to
-          change it to get better matches if the auto-detected one doesn't work.
-        </div>
-      </article>
-      {!isEmpty(data?.data) ? (
-        <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200 dark:border-gray-500">
-          <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-500 text-md">
-            <thead>
-              <tr>
-                <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
-                  Name
-                </th>
-                <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
-                  Indexer
-                </th>
-
-                <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
-                  Action
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-slate-100 dark:divide-gray-500">
-              {data?.data.map((result, idx) => (
-                <tr key={idx}>
-                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-md">
-                    <p>{ellipsize(result.fileName, 90)}</p>
-                    {/* Seeders/Leechers */}
-                    <div className="flex gap-3 mt-2">
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--archive-up-minimlistic-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {result.seeders} seeders
-                        </span>
-                      </span>
-
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--archive-down-minimlistic-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {result.leechers} leechers
-                        </span>
-                      </span>
-                      {/* Size */}
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {prettyBytes(result.size)}
-                        </span>
-                      </span>
-
-                      {/* Files */}
-                      <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                        <span className="pr-1 pt-1">
-                          <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
-                        </span>
-
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {result.files} files
-                        </span>
-                      </span>
-                    </div>
-                  </td>
-
-                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-sm">
-                    {result.indexer}
-                  </td>
-
-                  <td className="px-3 py-3 text-gray-700 dark:text-slate-300 text-sm">
-                    <button
-                      className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center 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={() => downloadTorrent(result.downloadUrl)}
-                    >
-                      <span className="text-xs">Download</span>
-                      <span className="w-5 h-5">
-                        <i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
-                      </span>
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ) : null}
     </>
   );
 };

src/client/components/Library/Library.tsx

@@ -178,7 +178,7 @@ export const Library = (): ReactElement => {
                     <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
                   </span>
                   <span className="text-md text-slate-900 dark:text-slate-900">
-                    Torrent: {info.getValue().torrent.length}
+                    Torrent: {info.getValue().torrent.downloads.length}
                   </span>
                 </span>
               </div>

src/client/components/Search/Search.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, ReactElement, useState } from "react";
 import { isNil, isEmpty } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
-
+import { importToDB } from "../../actions/fileops.actions";
+import { comicinfoAPICall } from "../../actions/comicinfo.actions";
+import { search } from "../../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
 import Card from "../shared/Carda";
 import ellipsize from "ellipsize";
@@ -25,6 +27,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
   const [comicVineMetadata, setComicVineMetadata] = useState({});
   const getCVSearchResults = (searchQuery) => {
     setSearchQuery(searchQuery.search);
+    // queryClient.invalidateQueries({ queryKey: ["comicvineSearchResults"] });
   };
 
   const {
@@ -143,7 +146,6 @@ export const Search = ({}: ISearchProps): ReactElement => {
             )}
           />
         </div>
-        {isLoading && <>Loading kaka...</>}
         {!isNil(comicVineSearchResults?.data.results) &&
         !isEmpty(comicVineSearchResults?.data.results) ? (
           <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">

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

@@ -16,7 +16,16 @@ 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"],
@@ -25,6 +34,7 @@ export const QbittorrentConnectionForm = (): ReactElement => {
         url: "http://localhost:3060/api/qbittorrent/getClientInfo",
         method: "GET",
       }),
+    enabled: !!connectionDetails,
   });
   // Update action using a mutation
   const { mutate } = useMutation({

src/client/components/WantedComics/WantedComics.tsx

@@ -10,7 +10,6 @@ export const WantedComics = (props): ReactElement => {
   const {
     data: wantedComics,
     isSuccess,
-    isFetched,
     isError,
     isLoading,
   } = useQuery({
@@ -42,7 +41,6 @@ export const WantedComics = (props): ReactElement => {
           minWidth: 350,
           accessorFn: (data) => data,
           cell: (value) => {
-            console.log("ASDASd", value);
             const row = value.getValue()._source;
             return row && <MetadataPanel data={row} />;
           },
@@ -174,7 +172,7 @@ export const WantedComics = (props): ReactElement => {
             </div>
           </div>
         </header>
-        {isSuccess && wantedComics?.data.hits?.hits ? (
+        {isSuccess ? (
           <div>
             <div className="library">
               <T2Table

src/client/components/shared/DatePicker.tsx

@@ -6,6 +6,7 @@ import { DayPicker, SelectSingleEventHandler } from "react-day-picker";
 import { usePopper } from "react-popper";
 
 export const DatePickerDialog = (props) => {
+  console.log(props);
   const { setter, apiAction } = props;
   const [selected, setSelected] = useState<Date>();
   const [isPopperOpen, setIsPopperOpen] = useState(false);

src/client/components/shared/MetadataPanel.tsx

@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
   containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
+  console.log(props);
   const {
     rawFileDetails,
     inferredMetadata,

src/client/constants/endpoints.ts

@@ -97,10 +97,3 @@ 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`,
-});

yarn.lock

@@ -6614,9 +6614,9 @@ invariant@^2.2.4:
     loose-envify "^1.0.0"
 
 ip@^2.0.0:
-  version "2.0.1"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.1.tgz#e8f3595d33a3ea66490204234b77636965307105"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
-  integrity sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==
+  integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
 
 ipaddr.js@1.9.1:
   version "1.9.1"