🔧 Fix for https://github.com/rishighan/threetwo/issues/10

src/client/actions/fileops.actions.tsx

@@ -142,7 +142,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
           score: "0",
         },
       },
-      sourcedMetadata: { comicvine: payload || null },
+      sourcedMetadata: payload || null,
       acquisition: { wanted: true },
     };
     dispatch({

src/client/assets/scss/App.scss

@@ -24,7 +24,7 @@ $colorText: #404646;
 
 .small-tag {
   align-items: center;
-  background-color: #ddc096;
+  background-color: #fff6de;
   border-radius: 4px;
   color: #4a4a4a;
   display: inline-flex;

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -110,7 +110,7 @@ export const AcquisitionPanel = (
         }),
       );
     },
-    [dispatch],
+    [],
   );
 
   return (

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -26,7 +26,6 @@ export const DownloadsPanel = (
     return state.airdcpp.bundles;
   });
 
-  console.log(bundles);
   // AirDCPP Socket initialization
   const userSettings = useSelector((state: RootState) => state.settings.data);
   const { ADCPPSocket } = useContext(AirDCPPSocketContext);

src/client/components/Dashboard/PullList.tsx

@@ -1,9 +1,10 @@
 import { isNil, map } from "lodash";
-import React, { createRef, ReactElement, useEffect } from "react";
+import React, { createRef, ReactElement, useCallback, useEffect } from "react";
 import Card from "../Carda";
 import Masonry from "react-masonry-css";
 import { useDispatch, useSelector } from "react-redux";
 import { getWeeklyPullList } from "../../actions/comicinfo.actions";
+import { importToDB } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
@@ -19,12 +20,27 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-5-17",
+        startDate: "2022-5-1",
         pageSize: "15",
         currentPage: "1",
       }),
     );
   }, []);
+  const addToLibrary = useCallback(
+    (locgMetadata) => dispatch(importToDB({ locg: locgMetadata })),
+    [],
+  );
+  /*
+  const foo = {
+    coverFile: {}, // pointer to which cover file to use
+    rawFileDetails: {}, // #1
+    sourcedMetadata: {
+      comicInfo: {},
+      comicvine: {}, // #2
+      locg: {}, // #2
+    },
+  };
+  */
 
   const pullList = useSelector((state: RootState) => state.comicInfo.pullList);
   let sliderRef = createRef();
@@ -125,6 +141,14 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
                   <div className="control">
                     <span className="tag">{issue.publisher}</span>
                   </div>
+                  <div className="mt-2">
+                    <button
+                      className="button is-small is-warning is-light"
+                      onClick={() => addToLibrary(issue)}
+                    >
+                      <i className="fa-solid fa-plus"></i> Want
+                    </button>
+                  </div>
                 </div>
               </Card>
             );

src/client/components/Dashboard/RecentlyImported.tsx

@@ -7,6 +7,7 @@ import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";
 
 type RecentlyImportedProps = {
   comicBookCovers: any;
@@ -37,27 +38,29 @@ export const RecentlyImported = ({
       >
         {map(
           comicBookCovers.docs,
-          ({ _id, rawFileDetails, sourcedMetadata }) => {
+          ({
+            _id,
+            rawFileDetails,
+            sourcedMetadata: { comicvine, comicInfo, locg },
+          }) => {
+            const consolidatedComicMetadata = {
+              rawFileDetails,
+              comicvine,
+              comicInfo,
+              locg,
+            };
+
+            const { issueName, url } = determineCoverFile(
+              consolidatedComicMetadata,
+            );
+
             const isComicBookMetadataAvailable =
-              sourcedMetadata &&
+              !isUndefined(comicvine) &&
-              !isUndefined(sourcedMetadata.comicvine) &&
+              !isUndefined(comicvine.volumeInformation);
-              !isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
+
-              !isEmpty(sourcedMetadata);
-            let imagePath = "";
-            let comicName = "";
-            if (!isEmpty(rawFileDetails.cover)) {
-              const encodedFilePath = encodeURI(
-                `${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
-              );
-              imagePath = escapePoundSymbol(encodedFilePath);
-              comicName = rawFileDetails.name;
-            } else if (!isEmpty(sourcedMetadata.comicvine)) {
-              imagePath = sourcedMetadata.comicvine.image.small_url;
-              comicName = sourcedMetadata.comicvine.name;
-            }
             const titleElement = (
               <Link to={"/comic/details/" + _id}>
-                {ellipsize(comicName, 20)}
+                {ellipsize(issueName, 20)}
               </Link>
             );
             return (
@@ -65,9 +68,9 @@ export const RecentlyImported = ({
                 <Card
                   key={_id}
                   orientation={"vertical"}
-                  imageUrl={imagePath}
+                  imageUrl={url}
                   hasDetails
-                  title={comicName ? titleElement : null}
+                  title={issueName ? titleElement : null}
                 >
                   <div className="content is-flex is-flex-direction-row">
                     {isComicBookMetadataAvailable && (
@@ -82,27 +85,23 @@ export const RecentlyImported = ({
                       </span>
                     )}
                     {/* ComicInfo.xml presence */}
-                    {!isNil(sourcedMetadata.comicInfo) &&
+                    {!isNil(comicInfo) && !isEmpty(comicInfo) && (
-                      !isEmpty(sourcedMetadata.comicInfo) && (
+                      <span className="icon custom-icon is-small has-text-danger">
-                        <span className="icon custom-icon is-small has-text-danger">
+                        <img
-                          <img
+                          src="/img/comicinfoxml.svg"
-                            src="/img/comicinfoxml.svg"
+                          alt={"ComicInfo.xml file detected."}
-                            alt={"ComicInfo.xml file detected."}
+                        />
-                          />
+                      </span>
-                        </span>
+                    )}
-                      )}
                     {/* Issue type */}
                     {isComicBookMetadataAvailable &&
                     !isNil(
-                      detectIssueTypes(
+                      detectIssueTypes(comicvine.volumeInformation.description),
-                        sourcedMetadata.comicvine.volumeInformation.description,
-                      ),
                     ) ? (
                       <span className="tag is-warning">
                         {
                           detectIssueTypes(
-                            sourcedMetadata.comicvine.volumeInformation
+                            comicvine.volumeInformation.description,
-                              .description,
                           ).displayName
                         }
                       </span>
@@ -110,17 +109,17 @@ export const RecentlyImported = ({
                   </div>
                 </Card>
                 {/* original reference */}
-                {!isUndefined(sourcedMetadata.comicvine.image) ? (
+                {!isUndefined(comicvine.image) ? (
                   <Card
                     orientation="horizontal"
                     hasDetails
-                    imageUrl={sourcedMetadata.comicvine.image.icon_url}
+                    imageUrl={comicvine.image.icon_url}
                   >
                     <dd className="is-size-9">
+                      <dl>{ellipsize(comicvine.volumeInformation.name, 22)}</dl>
                       <dl>
-                        {ellipsize(sourcedMetadata.comicvine.volumeInformation.name, 22)}
+                        <span className="small-tag mt-1">{comicvine.id}</span>
                       </dl>
-                      <dl> <span className="small-tag mt-1">{sourcedMetadata.comicvine.id}</span></dl>
                     </dd>
                   </Card>
                 ) : null}

src/client/components/PullList/PullList.tsx

@@ -14,7 +14,7 @@ export const PullList = (): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-4-12",
+        startDate: "2022-5-15",
         pageSize: "100",
         currentPage: "1",
       }),

src/client/components/Search.tsx

@@ -37,7 +37,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
   );
 
   const addToLibrary = useCallback(
-    (comicData) => dispatch(importToDB(comicData)),
+    (comicData) => dispatch(importToDB({ comicvine: comicData })),
     [],
   );
 

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

@@ -0,0 +1,60 @@
+import { filter, isEmpty, isUndefined, min, minBy } from "lodash";
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import { escapePoundSymbol } from "./formatting.utils";
+
+export const determineCoverFile = (data) => {
+  /* For a payload like this:
+  const foo = {
+    rawFileDetails: {}, // #1
+    comicInfo: {},
+    comicvine: {}, // #2
+    locg: {}, // #3
+  };
+  */
+  const coverFile = {
+    rawFile: {
+      priority: 1,
+      url: "",
+      issueName: "",
+    },
+    comicvine: {
+      priority: 2,
+      url: "",
+      issueName: "",
+    },
+    locg: {
+      priority: 3,
+      url: "",
+      issueName: "",
+    },
+  };
+  if (
+    !isUndefined(data.comicvine) &&
+    !isUndefined(data.comicvine.volumeInformation)
+  ) {
+    coverFile.comicvine.url = data.comicvine.image.small_url;
+    coverFile.comicvine.issueName = data.comicvine.name;
+  }
+  if (!isEmpty(data.rawFileDetails.cover)) {
+    const encodedFilePath = encodeURI(
+      `${LIBRARY_SERVICE_HOST}/${data.rawFileDetails.cover.filePath}`,
+    );
+    coverFile.rawFile.url = escapePoundSymbol(encodedFilePath);
+    coverFile.rawFile.issueName = data.rawFileDetails.name;
+  }
+  if (!isUndefined(data.locg)) {
+    coverFile.locg.url = data.locg.cover;
+    coverFile.locg.issueName = data.locg.name;
+  }
+
+  const result = filter(coverFile, (item) => item.url !== "");
+
+  if (result.length > 1) {
+    const highestPriorityCoverFile = minBy(result, (item) => item.priority);
+    if (!isUndefined(highestPriorityCoverFile)) {
+      return highestPriorityCoverFile;
+    }
+  } else {
+    return result[0];
+  }
+};