🌊 qBittorrent Settings Scaffold (#90)

* 🌊 qBittorrent settings scaffold

* 🔧 Added scaffold for the qBittorrent connection form

* 🔧 Some refactoring

* 🔧 Cleaned up folder structure

* 🔧 Fixed broken paths

* 🔧 Cleaned up Search and Import component hierarchy

* 🔧 More path fixes

* 🔧 Tooling changes

* 📝 Qbittorrent form scaffold

* ⬆️ Bumped @dnd-kit deps

* 🧑🏼‍🔧 Fixed the hostname regex

* 🏗️ Adding fields to the settings form

* 🔧 Formatting and more layout changes

* 🔧 Added Prowlarr settings items in JSON

* 📝 Purified Card Component

* 📝 Abstracted connection form into a component

* 🏗️ Reorganized tabs

* Migrating from Redux to RTK-query

* ⬇️ Fetched qBittorrent settings

* 🏗️ Trying out react-query

* 🧩 Added react-query query to qBittorrentSettings page

* 📝 qbittorrent form RU actions first draft

* 🏗️ Added loading state check

* 🏗 Added error check state

* 🏗️ Refactored AirDCPP context using react-query

* 🏗️ Refactoring AirDCPP Settings Form with react-query

* 🔧 Removed context

* 🔧 Removing context from AirDCPP settings page

* 🔧 Fixed early init error on the store

* 🐛 Debugging AirDCPP Settings Form page

* 🧸 Zustand-ified AirDCPP Form

* ❌ AirDCPP code cleaned up from App.tsx

* ➕ Re-added yarn.lock

src/client/components/ComicDetail/ComicDetail.tsx

@@ -1,11 +1,11 @@
 import React, { useState, ReactElement, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import Card from "../Carda";
+import Card from "../shared/Carda";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 
 import { RawFileDetails } from "./RawFileDetails";
-import { ComicVineSearchForm } from "../ComicVineSearchForm";
+import { ComicVineSearchForm } from "./ComicVineSearchForm";
 
 import TabControls from "./TabControls";
 import { EditMetadataPanel } from "./EditMetadataPanel";
@@ -198,8 +198,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 4,
-      icon: <i className="fa-solid fa-floppy-disk"></i>,
-      name: "Acquisition",
+      icon: <i className="fa-solid fa-circle-nodes"></i>,
+      name: "DC++ Search",
       content: (
         <AcquisitionPanel
           query={airDCPPQuery}
@@ -213,6 +213,13 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
     },
     {
       id: 5,
+      icon: <i className="fa-solid fa-droplet"></i>,
+      name: "Torrent Search",
+      content: <>Torrents</>,
+      shouldShow: true,
+    },
+    {
+      id: 6,
       icon: null,
       name: !isEmpty(data.data) ? (
         <span className="download-tab-name">Downloads</span>
@@ -290,7 +297,9 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                           <ComicViewer
                             pages={extractedComicBook}
                             direction="ltr"
-                            className={{closeButton: "border: 1px solid red;"}}
+                            className={{
+                              closeButton: "border: 1px solid red;",
+                            }}
                           />
                         )}
                       </Modal>
@@ -317,4 +326,4 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 };
 
-export default ComicDetail;
+export default ComicDetail;

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import dayjs from "dayjs";
 import { isUndefined } from "lodash";
-import Card from "../Carda";
+import Card from "../shared/Carda";
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
-import MatchResult from "../MatchResult";
+import MatchResult from "./MatchResult";
 import { isEmpty } from "lodash";
 
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {

src/client/components/ComicDetail/ComicVineSearchForm.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback } from "react";
+import { Form, Field } from "react-final-form";
+import Collapsible from "react-collapsible";
+import { fetchComicVineMatches } from "../../actions/fileops.actions";
+import { useDispatch } from "react-redux";
+
+/**
+ * Component for performing search against ComicVine
+ *
+ * @component
+ * @example
+ * return (
+ *   <ComicVineSearchForm data={rawFileDetails} />
+ * )
+ */
+export const ComicVineSearchForm = (data) => {
+  const dispatch = useDispatch();
+  const onSubmit = useCallback((value) => {
+    const userInititatedQuery = {
+      inferredIssueDetails: {
+        name: value.issueName,
+        number: value.issueNumber,
+        subtitle: "",
+        year: value.issueYear,
+      },
+    };
+    dispatch(fetchComicVineMatches(data, userInititatedQuery));
+  }, []);
+  const validate = () => {
+    return true;
+  };
+
+  const MyForm = () => (
+    <Form
+      onSubmit={onSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <span className="field is-normal">
+            <label className="label mb-2 is-size-5">Search Manually</label>
+          </span>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <Field name="issueName">
+                  {(props) => (
+                    <p className="control is-expanded has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue name"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-journal-whills"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+            </div>
+          </div>
+
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <Field name="issueNumber">
+                  {(props) => (
+                    <p className="control has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue number"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-hashtag"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+
+              <div className="field">
+                <Field name="issueYear">
+                  {(props) => (
+                    <p className="control has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue year"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-hashtag"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+            </div>
+          </div>
+
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <div className="control">
+                  <button
+                    type="submit"
+                    className="button is-success is-light is-outlined is-small"
+                  >
+                    <span className="icon">
+                      <i className="fas fa-search"></i>
+                    </span>
+                    <span>Search</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      )}
+    />
+  );
+
+  return <MyForm />;
+};
+
+export default ComicVineSearchForm;

src/client/components/ComicDetail/MatchResult.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { isNil, map } from "lodash";
+import { applyComicVineMatch } from "../../actions/comicinfo.actions";
+import { convert } from "html-to-text";
+import ellipsize from "ellipsize";
+
+interface MatchResultProps {
+  matchData: any;
+  comicObjectId: string;
+}
+
+const handleBrokenImage = (e) => {
+  e.target.src = "http://localhost:3050/dist/img/noimage.svg";
+};
+
+export const MatchResult = (props: MatchResultProps) => {
+  const dispatch = useDispatch();
+  const applyCVMatch = useCallback(
+    (match, comicObjectId) => {
+      dispatch(applyComicVineMatch(match, comicObjectId));
+    },
+    [dispatch],
+  );
+  return (
+    <>
+      {map(props.matchData, (match, idx) => {
+        let issueDescription = "";
+        if (!isNil(match.description)) {
+          issueDescription = convert(match.description, {
+            baseElements: {
+              selectors: ["p"],
+            },
+          });
+        }
+        return (
+          <div className="search-result mb-4" key={idx}>
+            <div className="columns">
+              <div className="column is-one-fifth">
+                <img
+                  className="cover-image"
+                  src={match.image.thumb_url}
+                  onError={handleBrokenImage}
+                />
+              </div>
+
+              <div className="search-result-details column">
+                <div className="is-size-5">{match.name}</div>
+
+                <div className="field is-grouped is-grouped-multiline mt-1">
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Number</span>
+                      <span className="tag is-primary">
+                        {match.issue_number}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Cover Date</span>
+                      <span className="tag is-warning">{match.cover_date}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="is-size-7">
+                  {ellipsize(issueDescription, 300)}
+                </div>
+              </div>
+            </div>
+
+            <div className="vertical-line"></div>
+
+            <div className="columns ml-6 volume-information">
+              <div className="column is-one-fifth">
+                <img
+                  src={match.volumeInformation.results.image.icon_url}
+                  className="cover-image"
+                  onError={handleBrokenImage}
+                />
+              </div>
+
+              <div className="column">
+                <div className="is-size-6">{match.volume.name}</div>
+                <div className="field is-grouped is-grouped-multiline mt-2">
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Total Issues</span>
+                      <span className="tag is-warning">
+                        {match.volumeInformation.results.count_of_issues}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Publisher</span>
+                      <span className="tag is-warning">
+                        {match.volumeInformation.results.publisher.name}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="columns">
+              <div className="column">
+                <button
+                  className="button is-normal is-outlined is-primary is-light is-pulled-right"
+                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+                >
+                  <span className="icon is-size-5">
+                    <i className="fas fa-clipboard-check"></i>
+                  </span>
+                  <span>Apply Match</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default MatchResult;

src/client/components/ComicDetail/TabControls.tsx

@@ -25,12 +25,15 @@ export const TabControls = (props): ReactElement => {
             >
               {/* Downloads tab and count badge */}
               <a>
-                {id === 5 &&
+                {id === 6 &&
                 !isNil(comicBookDetailData.acquisition.directconnect) ? (
                   <span className="download-icon-labels">
                     <i className="fa-solid fa-download"></i>
                     <span className="tag downloads-count is-info is-light">
-                      {comicBookDetailData.acquisition.directconnect.downloads.length}
+                      {
+                        comicBookDetailData.acquisition.directconnect.downloads
+                          .length
+                      }
                     </span>
                   </span>
                 ) : (

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, useCallback, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { DnD } from "../../DnD";
+import { DnD } from "../../shared/Draggable/DnD";
 import { isEmpty } from "lodash";
 import Sticky from "react-stickynode";
 import SlidingPane from "react-sliding-pane";