Comicvine integration improvements (#109)

* ⚡️ Refactored VolumeDetail page to use react-query

* 🎨 Added some icons to tabs

* 📚 Wired up story arc fetching

* ✅ Added status checks

* 🍇 Added some integration for issues

* 🔍 Improvements to CV search results

* 🔍 Refining CV search UX

* 🌍 Added i18n lib

* 🔍 CV search metadata wrangling

* 🔧 Refactored Wanted component

Included # of issues in a wanted volume

* 🔧 Refactoring DC++ search/download

* 🔧 Refactored AirDC++ init in store

* 🏗️ Automatic downloads WIP

* 🏗️ Modified the Dockerfile

src/client/components/Dashboard/Dashboard.tsx

@@ -21,13 +21,15 @@ export const Dashboard = (): ReactElement => {
             limit: 5,
             sort: { updatedAt: "-1" },
           },
-          predicate: { "acquisition.source.wanted": false },
+          predicate: {
+            wanted: { $exists: false },
+          },
           comicStatus: "recent",
         },
       }),
     queryKey: ["recentComics"],
   });
-
+  // Wanted Comics
   const { data: wantedComics } = useQuery({
     queryFn: async () =>
       await axios({
@@ -39,7 +41,9 @@ export const Dashboard = (): ReactElement => {
             limit: 5,
             sort: { updatedAt: "-1" },
           },
-          predicate: { "acquisition.source.wanted": true },
+          predicate: {
+            wanted: { $exists: true, $ne: null },
+          },
         },
       }),
     queryKey: ["wantedComics"],

src/client/components/Dashboard/RecentlyImported.tsx

@@ -18,6 +18,7 @@ type RecentlyImportedProps = {
 export const RecentlyImported = (
   comics: RecentlyImportedProps,
 ): ReactElement => {
+  console.log(comics);
   return (
     <div>
       <Header
@@ -33,9 +34,7 @@ export const RecentlyImported = (
               rawFileDetails,
               sourcedMetadata: { comicvine, comicInfo, locg },
               inferredMetadata,
-              acquisition: {
-                source: { name },
-              },
+              wanted: { source } = {},
             },
             idx,
           ) => {
@@ -45,11 +44,14 @@ export const RecentlyImported = (
               comicInfo,
               locg,
             });
-            const { issue, coverURL, icon } = determineExternalMetadata(name, {
-              comicvine,
-              comicInfo,
-              locg,
-            });
+            const { issue, coverURL, icon } = determineExternalMetadata(
+              source,
+              {
+                comicvine,
+                comicInfo,
+                locg,
+              },
+            );
             const isComicVineMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);

src/client/components/Dashboard/WantedComicsList.tsx

@@ -31,10 +31,9 @@ export const WantedComicsList = ({
             _id,
             rawFileDetails,
             sourcedMetadata: { comicvine, comicInfo, locg },
+            wanted,
           }) => {
-            const isComicBookMetadataAvailable =
-              !isUndefined(comicvine) &&
-              !isUndefined(comicvine.volumeInformation);
+            const isComicBookMetadataAvailable = !isUndefined(comicvine);
             const consolidatedComicMetadata = {
               rawFileDetails,
               comicvine,
@@ -42,12 +41,15 @@ export const WantedComicsList = ({
               locg,
             };
 
-            const { issueName, url } = determineCoverFile(
-              consolidatedComicMetadata,
-            );
+            const {
+              issueName,
+              url,
+              publisher = null,
+            } = determineCoverFile(consolidatedComicMetadata);
             const titleElement = (
               <Link to={"/comic/details/" + _id}>
                 {ellipsize(issueName, 20)}
+                <p>{publisher}</p>
               </Link>
             );
             return (
@@ -59,28 +61,42 @@ export const WantedComicsList = ({
                 title={issueName ? titleElement : <span>No Name</span>}
               >
                 <div className="pb-1">
-                  {/* Issue type */}
-                  {isComicBookMetadataAvailable &&
-                  !isNil(
-                    detectIssueTypes(comicvine.volumeInformation.description),
-                  ) ? (
-                    <div className="my-2">
-                      <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--book-2-line-duotone] w-5 h-5"></i>
-                        </span>
+                  <div className="flex flex-row gap-2">
+                    {/* Issue type */}
+                    {isComicBookMetadataAvailable &&
+                    !isNil(detectIssueTypes(comicvine.description)) ? (
+                      <div className="my-2">
+                        <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--book-2-line-duotone] w-5 h-5"></i>
+                          </span>
 
-                        <span className="text-md text-slate-500 dark:text-slate-900">
-                          {
-                            detectIssueTypes(
-                              comicvine.volumeInformation.description,
-                            ).displayName
-                          }
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {
+                              detectIssueTypes(comicvine.description)
+                                .displayName
+                            }
+                          </span>
                         </span>
-                      </span>
-                    </div>
-                  ) : null}
+                      </div>
+                    ) : null}
+                    {/* issues marked as wanted, part of this volume */}
+                    {wanted?.markEntireVolumeWanted ? (
+                      <div className="text-sm">sagla volume pahije</div>
+                    ) : (
+                      <div className="my-2">
+                        <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--documents-bold-duotone] w-5 h-5"></i>
+                          </span>
 
+                          <span className="text-md text-slate-500 dark:text-slate-900">
+                            {wanted.issues.length}
+                          </span>
+                        </span>
+                      </div>
+                    )}
+                  </div>
                   {/* comicVine metadata presence */}
                   {isComicBookMetadataAvailable && (
                     <img