🔧 Fixed a long standing issue with CV-sourced comics, which should not be scraped again

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -1,24 +1,44 @@
+import { filter, isEmpty, isNil, isUndefined } from "lodash";
 import React, { ReactElement, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import Select, { components } from "react-select";
 import { fetchComicVineMatches } from "../../../actions/fileops.actions";
+import { refineQuery } from "../../../shared/utils/filenameparser.utils";
 
 export const Menu = (props): ReactElement => {
   const { data } = props;
   const { setSlidingPanelContentId, setVisible } = props.handlers;
   const dispatch = useDispatch();
   const openDrawerWithCVMatches = useCallback(() => {
-    dispatch(fetchComicVineMatches(data));
+    let seriesSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+    let issueSearchQuery: IComicVineSearchQuery = {} as IComicVineSearchQuery;
+
+    if (!isUndefined(data.rawFileDetails)) {
+      issueSearchQuery = refineQuery(data.rawFileDetails.name);
+      if (data.rawFileDetails.containedIn !== "comics") {
+        seriesSearchQuery = refineQuery(
+          data.rawFileDetails.containedIn.split("/").pop(),
+        );
+      }
+    } else if (!isEmpty(data.sourcedMetadata)) {
+      issueSearchQuery = refineQuery(data.sourcedMetadata.comicvine.name);
+    }
+
+    dispatch(fetchComicVineMatches(data, issueSearchQuery, seriesSearchQuery));
     setSlidingPanelContentId("CVMatches");
     setVisible(true);
   }, [dispatch, data]);
+
+  const openEditMetadataPanel = useCallback(() => {
+    setSlidingPanelContentId("editComicBookMetadata");
+    setVisible(true);
+  }, []);
   //  Actions menu options and handler
   const CVMatchLabel = (
     <span>
       <i className="fa-solid fa-wand-magic"></i> Match on ComicVine
     </span>
   );
-
   const editLabel = (
     <span>
       <i className="fa-regular fa-pen-to-square"></i> Edit Metadata
@@ -38,11 +58,20 @@ export const Menu = (props): ReactElement => {
     { value: "delete-comic", label: deleteLabel },
   ];
 
+  const filteredActionOptions = filter(actionOptions, (item) => {
+    if (isUndefined(data.rawFileDetails)) {
+      return item.value !== "match-on-comic-vine";
+    }
+    return item;
+  });
   const handleActionSelection = (action) => {
     switch (action.value) {
       case "match-on-comic-vine":
         openDrawerWithCVMatches();
         break;
+      case "edit-metdata":
+        openEditMetadataPanel();
+        break;
       default:
         console.log("No valid action selected.");
         break;
@@ -61,7 +90,7 @@ export const Menu = (props): ReactElement => {
       }
       name="actions"
       isSearchable={false}
-      options={actionOptions}
+      options={filteredActionOptions}
       onChange={handleActionSelection}
     />
   );

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -14,36 +14,38 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
   console.log(comicVineData);
   return (
     <>
-      <div className="card search-criteria-card">
-        <div className="card-content">
-          <ComicVineSearchForm />
-          <p className="is-size-6">Searching against:</p>
-          <div className="field is-grouped is-grouped-multiline">
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag">Title</span>
-                <span className="tag is-info">
-                  {
-                    comicVineSearchQueryObject.issue.searchParams.searchTerms
-                      .name
-                  }
-                </span>
+      {!isEmpty(comicVineSearchQueryObject) && (
+        <div className="card search-criteria-card">
+          <div className="card-content">
+            <ComicVineSearchForm />
+            <p className="is-size-6">Searching against:</p>
+            <div className="field is-grouped is-grouped-multiline">
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Title</span>
+                  <span className="tag is-info">
+                    {
+                      comicVineSearchQueryObject.issue.searchParams.searchTerms
+                        .name
+                    }
+                  </span>
+                </div>
               </div>
-            </div>
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag">Number</span>
-                <span className="tag is-info">
-                  {
-                    comicVineSearchQueryObject.issue.searchParams.searchTerms
-                      .number
-                  }
-                </span>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Number</span>
+                  <span className="tag is-info">
+                    {
+                      comicVineSearchQueryObject.issue.searchParams.searchTerms
+                        .number
+                    }
+                  </span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
       <div className="search-results-container">
         {!isEmpty(comicVineSearchResults) && (
           <MatchResult

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -124,10 +124,10 @@ export const DownloadsPanel = (
 
   return !isNil(props.data) ? (
     <>
-      {!isNil(downloadProgressTick) ? (
-        <ProgressTick data={downloadProgressTick} />
-      ) : null}
-      <div className="columns">
+      <div className="columns is-multiline">
+        {!isNil(downloadProgressTick) ? (
+          <ProgressTick data={downloadProgressTick} />
+        ) : null}
         {!isEmpty(ADCPPSocket) ? (
           <Bundles data={bundles} />
         ) : (

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react";
+
+export const EditMetadataPanel = (props): ReactElement => {
+  return <>adsasdasd</>;
+};
+
+export default EditMetadataPanel;