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/shared/utils/i18n.util.ts

@@ -0,0 +1,25 @@
+// i18n.js
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import HttpBackend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+i18n
+  // Learn more about options: https://www.i18next.com/overview/configuration-options
+  .use(HttpBackend) // Load translations over http
+  .use(LanguageDetector) // Detect language automatically
+  .use(initReactI18next) // Pass i18n instance to react-i18next
+  .init({
+    lng: "en", // Specify the language
+    fallbackLng: "en",
+    debug: true,
+    interpolation: {
+      escapeValue: false, // Not needed for React
+    },
+    backend: {
+      // path where resources get loaded from
+      loadPath: "./src/client/locales/en/translation.json",
+    },
+  });
+
+export default i18n;

src/client/shared/utils/metadata.utils.ts

@@ -1,11 +1,12 @@
-import { filter, isEmpty, isUndefined, min, minBy } from "lodash";
+import { filter, isEmpty, isNil, isUndefined, min, minBy } from "lodash";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { escapePoundSymbol } from "./formatting.utils";
 
-export const determineCoverFile = (data) => {
+export const determineCoverFile = (data): any => {
   /* For a payload like this:
   const foo = {
     rawFileDetails: {}, // #1
+    wanted: {}, 
     comicInfo: {},
     comicvine: {}, // #2
     locg: {}, // #3
@@ -19,36 +20,44 @@ export const determineCoverFile = (data) => {
       issueName: "",
       publisher: "",
     },
+    wanted: {
+      objectReference: "wanted",
+      priority: 2,
+      url: "",
+      issueName: "",
+      publisher: "",
+    },
     comicvine: {
       objectReference: "comicvine",
-      priority: 2,
+      priority: 3,
       url: "",
       issueName: "",
       publisher: "",
     },
     locg: {
       objectReference: "locg",
-      priority: 3,
+      priority: 4,
       url: "",
       issueName: "",
       publisher: "",
     },
   };
-  if (
-    !isUndefined(data.comicvine) &&
-    !isUndefined(data.comicvine.volumeInformation)
-  ) {
-    coverFile.comicvine.url = data.comicvine.image.small_url;
+  // comicvine
+  if (!isEmpty(data.comicvine)) {
+    coverFile.comicvine.url = data?.comicvine?.image.small_url;
     coverFile.comicvine.issueName = data.comicvine.name;
-    coverFile.comicvine.publisher = data.comicvine.volumeInformation.publisher;
+    coverFile.comicvine.publisher = data.comicvine.publisher.name;
   }
-  if (!isEmpty(data.rawFileDetails.cover)) {
+  // rawFileDetails
+  if (!isEmpty(data.rawFileDetails)) {
     const encodedFilePath = encodeURI(
       `${LIBRARY_SERVICE_HOST}/${data.rawFileDetails.cover.filePath}`,
     );
     coverFile.rawFile.url = escapePoundSymbol(encodedFilePath);
     coverFile.rawFile.issueName = data.rawFileDetails.name;
   }
+  // wanted
+
   if (!isUndefined(data.locg)) {
     coverFile.locg.url = data.locg.cover;
     coverFile.locg.issueName = data.locg.name;
@@ -69,25 +78,30 @@ export const determineCoverFile = (data) => {
 
 export const determineExternalMetadata = (
   metadataSource: string,
-  source: any
-) => {
-  switch (metadataSource) {
-    case "comicvine":
-      return {
-        coverURL: source.comicvine.image.small_url,
-        issue: source.comicvine.name,
-        icon: "cvlogo.svg",
-      };
-    case "locg":
-      return {
-        coverURL: source.locg.cover,
-        issue: source.locg.name,
-        icon: "locglogo.svg",
-      };
-    case undefined:
-      return {};
+  source: any,
+): any => {
+  if (!isNil(source)) {
+    switch (metadataSource) {
+      case "comicvine":
+        return {
+          coverURL:
+            source.comicvine?.image.small_url ||
+            source.comicvine.volumeInformation?.image.small_url,
+          issue: source.comicvine.name,
+          icon: "cvlogo.svg",
+        };
+      case "locg":
+        return {
+          coverURL: source.locg.cover,
+          issue: source.locg.name,
+          icon: "locglogo.svg",
+        };
+      case undefined:
+        return {};
 
-    default:
-      break;
+      default:
+        break;
+    }
   }
-};
+  return null;
+};

src/client/shared/utils/tradepaperback.utils.ts

@@ -16,6 +16,7 @@ export const detectIssueTypes = (deck: string): any => {
   const matches = map(issueTypeMatchers, (matcher) => {
     return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName);
   });
+
   return compact(matches)[0];
 };