🖼 Added a League of Comic Geeks logo

.gitignore

@@ -16,3 +16,4 @@ yarn-error.log
 environment.list
 .env
 src/client/assets/img/missing-file.pxd
+*.pxd

src/client/assets/img/locglogo.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 2.4.3 -->
+<svg width="624" height="561" viewBox="0 0 624 561" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <text id="LCG" xml:space="preserve"><tspan x="57" y="382" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
+    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 422 C 84.954399 422 76 430.954407 76 442 L 76 446 C 76 457.045593 84.954399 466 96 466 L 193 466 C 204.045593 466 213 457.045593 213 446 L 213 442 C 213 430.954407 204.045593 422 193 422 Z"/>
+    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 422 C 413.954407 422 405 430.954407 405 442 L 405 446 C 405 457.045593 413.954407 466 425 466 L 522 466 C 533.045593 466 542 457.045593 542 446 L 542 442 C 542 430.954407 533.045593 422 522 422 Z"/>
+</svg>

src/client/components/App.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import Dashboard from "./Dashboard/Dashboard";
 
 import Import from "./Import";
-import { ComicDetail } from "./ComicDetail";
+import { ComicDetailContainer } from "./ComicDetail/ComicDetailContainer";
 import LibraryContainer from "./Library/LibraryContainer";
 import LibraryGrid from "./Library/LibraryGrid";
 import Search from "./Search";
@@ -85,7 +85,7 @@ export const App = (): ReactElement => {
           <Route path="/search" element={<Search />} />
           <Route
             path={"/comic/details/:comicObjectId"}
-            element={<ComicDetail />}
+            element={<ComicDetailContainer />}
           />
           <Route
             path={"/volume/details/:comicObjectId"}

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -112,7 +112,6 @@ export const AcquisitionPanel = (
     },
     [],
   );
-
   return (
     <>
       <div className="comic-detail columns">

src/client/components/ComicDetail/ComicDetail.tsx

@@ -7,25 +7,23 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import Card from "./Carda";
+import Card from "../Carda";
-import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
+import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 
-import { RawFileDetails } from "./ComicDetail/RawFileDetails";
+import { RawFileDetails } from "./RawFileDetails";
 
-import TabControls from "./ComicDetail/TabControls";
+import TabControls from "./TabControls";
-import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
+import { EditMetadataPanel } from "./EditMetadataPanel";
-import { Menu } from "./ComicDetail/ActionMenu/Menu";
+import { Menu } from "./ActionMenu/Menu";
-import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations";
+import { ArchiveOperations } from "./Tabs/ArchiveOperations";
-import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML";
+import { ComicInfoXML } from "./Tabs/ComicInfoXML";
-import AcquisitionPanel from "./ComicDetail/AcquisitionPanel";
+import AcquisitionPanel from "./AcquisitionPanel";
-import DownloadsPanel from "./ComicDetail/DownloadsPanel";
+import DownloadsPanel from "./DownloadsPanel";
-import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation";
+import { VolumeInformation } from "./Tabs/VolumeInformation";
 
 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
 
-import { getComicBookDetailById } from "../actions/comicinfo.actions";
-
 import "react-sliding-pane/dist/react-sliding-pane.css";
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "react-loader-spinner";
@@ -33,13 +31,11 @@ import SlidingPane from "react-sliding-pane";
 import Modal from "react-modal";
 import ComicViewer from "react-comic-viewer";
 
-import { escapePoundSymbol } from "../shared/utils/formatting.utils";
+import { getSettings } from "../../actions/settings.actions";
-
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
+import AirDCPPSocket from "../../services/DcppSearchService";
-import { getSettings } from "../actions/settings.actions";
+import { extractComicArchive } from "../../actions/fileops.actions";
-import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";
-import AirDCPPSocket from "../services/DcppSearchService";
-import { extractComicArchive } from "../actions/fileops.actions";
 
 type ComicDetailProps = {};
 /**
@@ -52,9 +48,8 @@ type ComicDetailProps = {};
  * )
  */
 
-export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
+export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
-
   const [visible, setVisible] = useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
   const [modalIsOpen, setIsOpen] = useState(false);
@@ -68,9 +63,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicVineAPICallProgress = useSelector(
     (state: RootState) => state.comicInfo.inProgress,
   );
-  const comicBookDetailData = useSelector(
+
-    (state: RootState) => state.comicInfo.comicBookDetail,
-  );
   const extractedComicBook = useSelector(
     (state: RootState) => state.fileOps.extractedComicBookArchive,
   );
@@ -94,7 +87,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   }, []);
 
   useEffect(() => {
-    dispatch(getComicBookDetailById(comicObjectId));
     dispatch(getSettings());
   }, [page, dispatch]);
 
@@ -109,6 +101,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     }
   }, [userSettings]);
 
+  // destructure props
+  console.log(ADCPPSocket)
+
   // sliding panel init
   const contentForSlidingPanel = {
     CVMatches: {
@@ -146,38 +141,35 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       content: () => <EditMetadataPanel />,
     },
   };
+  const {
+    data: {
+      _id,
+      rawFileDetails,
+      inferredMetadata,
+      sourcedMetadata: { comicvine, locg, comicInfo },
+    },
+  } = data;
 
   // check for the availability of CV metadata
   const isComicBookMetadataAvailable =
-    comicBookDetailData.sourcedMetadata &&
+    !isUndefined(comicvine) && !isUndefined(comicvine.volumeInformation);
-    !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) &&
-    !isUndefined(
-      comicBookDetailData.sourcedMetadata.comicvine.volumeInformation,
-    ) &&
-    !isEmpty(comicBookDetailData.sourcedMetadata);
 
   // check for the availability of rawFileDetails
   const areRawFileDetailsAvailable =
-    !isUndefined(comicBookDetailData.rawFileDetails) &&
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails.cover);
-    !isEmpty(comicBookDetailData.rawFileDetails.cover);
+
+  const { issueName, url } = determineCoverFile({
+    rawFileDetails,
+    comicvine,
+    locg,
+  });
 
   // query for airdc++
-  const airDCPPQuery = {};
+  const airDCPPQuery = {
-  if (isComicBookMetadataAvailable) {
+    issue: {
-    Object.assign(airDCPPQuery, {
+      name: issueName,
-      issue: {
+    },
-        name: comicBookDetailData.sourcedMetadata.comicvine.volumeInformation
+  };
-          .name,
-      },
-    });
-  } else if (areRawFileDetailsAvailable) {
-    Object.assign(airDCPPQuery, {
-      issue: {
-        name: comicBookDetailData.inferredMetadata.issue.name,
-        number: comicBookDetailData.inferredMetadata.issue.number,
-      },
-    });
-  }
 
   // Tab content and header details
   const tabGroup = [
@@ -186,7 +178,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       name: "Volume Information",
       icon: <i className="fa-solid fa-layer-group"></i>,
       content: isComicBookMetadataAvailable ? (
-        <VolumeInformation data={comicBookDetailData} key={1} />
+        <VolumeInformation data={data.data} key={1} />
       ) : null,
       shouldShow: isComicBookMetadataAvailable,
     },
@@ -197,24 +189,17 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       content: (
         <div className="columns" key={2}>
           <div className="column is-three-quarters">
-            {!isNil(comicBookDetailData.sourcedMetadata) &&
+            {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
-              !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
-                <ComicInfoXML
-                  json={comicBookDetailData.sourcedMetadata.comicInfo}
-                />
-              )}
           </div>
         </div>
       ),
-      shouldShow:
+      shouldShow: !isEmpty(comicInfo),
-        !isUndefined(comicBookDetailData.sourcedMetadata) &&
-        !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo),
     },
     {
       id: 3,
       icon: <i className="fa-regular fa-file-archive"></i>,
       name: "Archive Operations",
-      content: <ArchiveOperations data={comicBookDetailData} key={3} />,
+      content: <ArchiveOperations data={data.data} key={3} />,
       shouldShow: areRawFileDetailsAvailable,
     },
     {
@@ -222,26 +207,21 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       icon: <i className="fa-solid fa-floppy-disk"></i>,
       name: "Acquisition",
       content: (
-        <AcquisitionPanel
+        <AcquisitionPanel query={airDCPPQuery} comicObjectid={_id} key={4} />
-          query={airDCPPQuery}
-          comicObjectid={comicBookDetailData._id}
-          key={4}
-        />
       ),
       shouldShow: true,
     },
     {
       id: 5,
       icon: null,
-      name:
+      name: !isEmpty(data.data) ? (
-        !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
+        <span className="download-tab-name">Downloads</span>
-          <span className="download-tab-name">Downloads</span>
+      ) : (
-        ) : (
+        "Downloads"
-          "Downloads"
+      ),
-        ),
+      content: !isNil(data.data) && !isEmpty(data.data) && (
-      content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
         <DownloadsPanel
-          data={comicBookDetailData.acquisition.directconnect}
+          data={data.data.acquisition.directconnect}
           comicObjectId={comicObjectId}
           key={5}
         />
@@ -255,29 +235,17 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   // Determine which cover image to use:
   // 1. from the locally imported or
   // 2. from the CV-scraped version
-  let imagePath = "";
-  let comicBookTitle = "";
-  if (areRawFileDetailsAvailable) {
-    const encodedFilePath = encodeURI(
-      `${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
-    );
-    imagePath = escapePoundSymbol(encodedFilePath);
-    comicBookTitle = comicBookDetailData.rawFileDetails.name;
-  } else if (isComicBookMetadataAvailable) {
-    imagePath = comicBookDetailData.sourcedMetadata.comicvine.image.small_url;
-    comicBookTitle = comicBookDetailData.sourcedMetadata.comicvine.name;
-  }
 
   return (
     <section className="container">
       <div className="section">
-        {!isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
+        {!isNil(data) && !isEmpty(data) && (
           <>
-            <h1 className="title">{comicBookTitle}</h1>
+            <h1 className="title">{issueName}</h1>
             <div className="columns is-multiline">
               <div className="column is-narrow">
                 <Card
-                  imageUrl={imagePath}
+                  imageUrl={url}
                   orientation={"vertical"}
                   hasDetails={false}
                   cardContainerStyle={{ maxWidth: 275 }}
@@ -285,29 +253,26 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                 {/* action dropdown */}
                 <div className="mt-4 is-size-7">
                   <Menu
-                    data={comicBookDetailData}
+                    data={data.data}
                     handlers={{ setSlidingPanelContentId, setVisible }}
                   />
                 </div>
               </div>
               {/* raw file details */}
               <div className="column is-three-fifths">
-                {!isUndefined(comicBookDetailData.rawFileDetails) &&
+                {!isUndefined(rawFileDetails) &&
-                  !isEmpty(comicBookDetailData.rawFileDetails.cover) && (
+                  !isEmpty(rawFileDetails.cover) && (
                     <>
                       <RawFileDetails
                         data={{
-                          rawFileDetails: comicBookDetailData.rawFileDetails,
+                          rawFileDetails: rawFileDetails,
-                          inferredMetadata:
+                          inferredMetadata: inferredMetadata,
-                            comicBookDetailData.inferredMetadata,
                         }}
                       />
                       {/* Read comic button */}
                       <button
                         className="button is-success is-light"
-                        onClick={() =>
+                        onClick={() => openModal(rawFileDetails.filePath)}
-                          openModal(comicBookDetailData.rawFileDetails.filePath)
-                        }
                       >
                         <i className="fa-solid fa-book-open mr-2"></i>
                         Read

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -0,0 +1,26 @@
+import { isEmpty, isUndefined } from "lodash";
+import React, { ReactElement, useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import { getComicBookDetailById } from "../../actions/comicinfo.actions";
+import { ComicDetail } from "../ComicDetail/ComicDetail";
+import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
+
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import { getSettings } from "../../actions/settings.actions";
+
+
+export const ComicDetailContainer = (): ReactElement | null => {
+  const comicBookDetailData = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
+  const dispatch = useDispatch();
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  useEffect(() => {
+    dispatch(getComicBookDetailById(comicObjectId));
+    // dispatch(getSettings());
+  }, [dispatch]);
+  return !isEmpty(comicBookDetailData) ? (
+    <ComicDetail data={comicBookDetailData} />
+  ) : null;
+};

src/client/components/Dashboard/WantedComicsList.tsx

@@ -5,6 +5,7 @@ import ellipsize from "ellipsize";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";
 
 type WantedComicsListProps = {
   comics: any;
@@ -44,60 +45,69 @@ export const WantedComicsList = ({
         className="recent-comics-container"
         columnClassName="recent-comics-column"
       >
-        {map(comics, ({ _id, rawFileDetails, sourcedMetadata }) => {
+        {map(
-          const isComicBookMetadataAvailable =
+          comics,
-            sourcedMetadata &&
+          ({
-            !isUndefined(sourcedMetadata.comicvine) &&
+            _id,
-            !isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
+            rawFileDetails,
-            !isEmpty(sourcedMetadata);
+            sourcedMetadata: { comicvine, comicInfo, locg },
-          let imagePath = "";
+          }) => {
-          let comicName = "";
+            const isComicBookMetadataAvailable =
-          if (isComicBookMetadataAvailable) {
+              !isUndefined(comicvine) &&
-            imagePath = sourcedMetadata.comicvine.image.small_url;
+              !isUndefined(comicvine.volumeInformation);
-            comicName = sourcedMetadata.comicvine.name;
+            const consolidatedComicMetadata = {
-          }
+              rawFileDetails,
-          const titleElement = (
+              comicvine,
-            <Link to={"/comic/details/" + _id}>{ellipsize(comicName, 20)}</Link>
+              comicInfo,
-          );
+              locg,
-          return (
+            };
-            <Card
+
-              key={_id}
+            const { issueName, url } = determineCoverFile(
-              orientation={"vertical"}
+              consolidatedComicMetadata,
-              imageUrl={imagePath}
+            );
-              hasDetails
+            const titleElement = (
-              title={comicName ? titleElement : <span>No Name</span>}
+              <Link to={"/comic/details/" + _id}>
-            >
+                {ellipsize(issueName, 20)}
-              <div className="content is-flex is-flex-direction-row">
+              </Link>
-                {isComicBookMetadataAvailable && (
+            );
-                  <span className="icon custom-icon is-small">
+            return (
-                    <img src="/img/cvlogo.svg" />
+              <Card
-                  </span>
+                key={_id}
-                )}
+                orientation={"vertical"}
-                {/* Raw file presence  */}
+                imageUrl={url}
-                {isEmpty(rawFileDetails.cover) && (
+                hasDetails
-                  <span className="icon custom-icon is-small has-text-danger mr-2">
+                title={issueName ? titleElement : <span>No Name</span>}
-                    <img src="/img/missing-file.svg" />
+              >
-                  </span>
+                <div className="content is-flex is-flex-direction-row">
-                )}
+                  {/* comicVine metadata presence */}
-                {/* Issue type */}
+                  {isComicBookMetadataAvailable && (
-                {isComicBookMetadataAvailable &&
+                    <span className="icon custom-icon is-small">
-                !isNil(
+                      <img src="/img/cvlogo.svg" />
-                  detectIssueTypes(
+                    </span>
-                    sourcedMetadata.comicvine.volumeInformation.description,
+                  )}
-                  ),
+                  {!isEmpty(locg) && (
-                ) ? (
+                    <span className="icon custom-icon">
-                  <span className="tag is-warning">
+                      <img src="/img/locglogo.svg" />
-                    {
+                    </span>
-                      detectIssueTypes(
+                  )}
-                        sourcedMetadata.comicvine.volumeInformation.description,
+                  {/* Issue type */}
-                      ).displayName
+                  {isComicBookMetadataAvailable &&
-                    }
+                  !isNil(
-                  </span>
+                    detectIssueTypes(comicvine.volumeInformation.description),
-                ) : null}
+                  ) ? (
-              </div>
+                    <span className="tag is-warning">
-            </Card>
+                      {
-          );
+                        detectIssueTypes(
-        })}
+                          comicvine.volumeInformation.description,
+                        ).displayName
+                      }
+                    </span>
+                  ) : null}
+                </div>
+              </Card>
+            );
+          },
+        )}
       </Masonry>
     </>
   );