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

2022-05-19 22:57:26 -07:00
parent 9be9750d7b
commit 3173cbf873
9 changed files with 128 additions and 46 deletions
--- a/src/client/actions/fileops.actions.tsx
+++ b/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({
--- a/src/client/assets/scss/App.scss
+++ b/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;
--- a/src/client/components/ComicDetail/AcquisitionPanel.tsx
+++ b/src/client/components/ComicDetail/AcquisitionPanel.tsx
@@ -110,7 +110,7 @@ export const AcquisitionPanel = (
        }),
      );
    },
-    [dispatch],
+    [],
  );

  return (
--- a/src/client/components/ComicDetail/DownloadsPanel.tsx
+++ b/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);
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/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>
            );
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/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(sourcedMetadata.comicvine) &&
-              !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;
-            }
+              !isUndefined(comicvine) &&
+              !isUndefined(comicvine.volumeInformation);
+
            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) &&
-                      !isEmpty(sourcedMetadata.comicInfo) && (
-                        <span className="icon custom-icon is-small has-text-danger">
-                          <img
-                            src="/img/comicinfoxml.svg"
-                            alt={"ComicInfo.xml file detected."}
-                          />
-                        </span>
-                      )}
+                    {!isNil(comicInfo) && !isEmpty(comicInfo) && (
+                      <span className="icon custom-icon is-small has-text-danger">
+                        <img
+                          src="/img/comicinfoxml.svg"
+                          alt={"ComicInfo.xml file detected."}
+                        />
+                      </span>
+                    )}
                    {/* Issue type */}
                    {isComicBookMetadataAvailable &&
                    !isNil(
-                      detectIssueTypes(
-                        sourcedMetadata.comicvine.volumeInformation.description,
-                      ),
+                      detectIssueTypes(comicvine.volumeInformation.description),
                    ) ? (
                      <span className="tag is-warning">
                        {
                          detectIssueTypes(
-                            sourcedMetadata.comicvine.volumeInformation
-                              .description,
+                            comicvine.volumeInformation.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}
--- a/src/client/components/PullList/PullList.tsx
+++ b/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",
      }),
--- a/src/client/components/Search.tsx
+++ b/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 })),
    [],
  );

--- a/src/client/shared/utils/metadata.utils.ts
+++ b/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];
+  }
+};