🔧 Debugging

src/client/components/ComicDetail.tsx

@@ -15,6 +15,11 @@ import { RawFileDetails } from "./ComicDetail/RawFileDetails";
 import TabControls from "./ComicDetail/TabControls";
 import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
 import { Menu } from "./ComicDetail/ActionMenu/Menu";
+import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations";
+import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML";
+import AcquisitionPanel from "./ComicDetail/AcquisitionPanel";
+import DownloadsPanel from "./ComicDetail/DownloadsPanel";
+import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation";
 
 import { isEmpty, isUndefined, isNil } from "lodash";
 import { RootState } from "threetwo-ui-typings";
@@ -174,6 +179,79 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
     });
   }
 
+  // Tab content and header details
+  const tabGroup = [
+    {
+      id: 1,
+      name: "Volume Information",
+      icon: <i className="fa-solid fa-layer-group"></i>,
+      content: isComicBookMetadataAvailable ? (
+        <VolumeInformation data={comicBookDetailData} key={1} />
+      ) : null,
+      shouldShow: isComicBookMetadataAvailable,
+    },
+    {
+      id: 2,
+      name: "ComicInfo.xml",
+      icon: <i className="fa-solid fa-code"></i>,
+      content: (
+        <div className="columns" key={2}>
+          <div className="column is-three-quarters">
+            {!isNil(comicBookDetailData.sourcedMetadata) &&
+              !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
+                <ComicInfoXML
+                  json={comicBookDetailData.sourcedMetadata.comicInfo}
+                />
+              )}
+          </div>
+        </div>
+      ),
+      shouldShow:
+        !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} />,
+      shouldShow: areRawFileDetailsAvailable,
+    },
+    {
+      id: 4,
+      icon: <i className="fa-solid fa-floppy-disk"></i>,
+      name: "Acquisition",
+      content: (
+        <AcquisitionPanel
+          query={airDCPPQuery}
+          comicObjectid={comicBookDetailData._id}
+          key={4}
+        />
+      ),
+      shouldShow: true,
+    },
+    {
+      id: 5,
+      icon: null,
+      name:
+        !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
+          <span className="download-tab-name">Downloads</span>
+        ) : (
+          "Downloads"
+        ),
+      content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
+        <DownloadsPanel
+          data={comicBookDetailData.acquisition.directconnect}
+          comicObjectId={comicObjectId}
+          key={5}
+        />
+      ),
+      shouldShow: true,
+    },
+  ];
+  // filtered Tabs
+  const filteredTabs = tabGroup.filter((tab) => tab.shouldShow);
+
   // Determine which cover image to use:
   // 1. from the locally imported or
   // 2. from the CV-scraped version
@@ -255,7 +333,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               </div>
             </div>
 
-            {<TabControls comicObjectId={comicObjectId} />}
+            {<TabControls filteredTabs={filteredTabs} />}
 
             <SlidingPane
               isOpen={visible}

src/client/components/ComicDetail/TabControls.tsx

@@ -1,129 +1,20 @@
 import React, { ReactElement, useEffect, useState } from "react";
-import { isEmpty, isNil, isUndefined } from "lodash";
+import { isEmpty, isNil } from "lodash";
 import { useSelector } from "react-redux";
-import { ArchiveOperations } from "../ComicDetail/Tabs/ArchiveOperations";
-import { ComicInfoXML } from "../ComicDetail/Tabs/ComicInfoXML";
-import AcquisitionPanel from "../ComicDetail/AcquisitionPanel";
-import DownloadsPanel from "../ComicDetail/DownloadsPanel";
-import { VolumeInformation } from "../ComicDetail/Tabs/VolumeInformation";
 
 export const TabControls = (props): ReactElement => {
   const comicBookDetailData = useSelector(
     (state: RootState) => state.comicInfo.comicBookDetail,
   );
-
+  const { filteredTabs } = props;
-  const libraryServiceCallInProgress = useSelector(
-    (state: RootState) => state.fileOps.IMSCallInProgress,
-  );
-  const { comicObjectId } = props;
-
-  // check for the availability of CV metadata
-  const isComicBookMetadataAvailable =
-    comicBookDetailData.sourcedMetadata &&
-    !isUndefined(comicBookDetailData.sourcedMetadata.comicvine) &&
-    !isUndefined(
-      comicBookDetailData.sourcedMetadata.comicvine.volumeInformation,
-    ) &&
-    !isEmpty(comicBookDetailData.sourcedMetadata);
-
-  // check for the availability of rawFileDetails
-  const areRawFileDetailsAvailable =
-    !isUndefined(comicBookDetailData.rawFileDetails) &&
-    !isEmpty(comicBookDetailData.rawFileDetails.cover);
-
-  // query for airdc++
-  const airDCPPQuery = {};
-  if (isComicBookMetadataAvailable) {
-    Object.assign(airDCPPQuery, {
-      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 = [
-    {
-      id: 1,
-      name: "Volume Information",
-      icon: <i className="fa-solid fa-layer-group"></i>,
-      content: isComicBookMetadataAvailable ? (
-        <VolumeInformation data={comicBookDetailData} key={1} />
-      ) : null,
-      shouldShow: isComicBookMetadataAvailable,
-    },
-    {
-      id: 2,
-      name: "ComicInfo.xml",
-      icon: <i className="fa-solid fa-code"></i>,
-      content: (
-        <div className="columns" key={2}>
-          <div className="column is-three-quarters">
-            {!isNil(comicBookDetailData.sourcedMetadata) &&
-              !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
-                <ComicInfoXML
-                  json={comicBookDetailData.sourcedMetadata.comicInfo}
-                />
-              )}
-          </div>
-        </div>
-      ),
-      shouldShow:
-        !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} />,
-      shouldShow: areRawFileDetailsAvailable,
-    },
-    {
-      id: 4,
-      icon: <i className="fa-solid fa-floppy-disk"></i>,
-      name: "Acquisition",
-      content: (
-        <AcquisitionPanel
-          query={airDCPPQuery}
-          comicObjectid={comicBookDetailData._id}
-          key={4}
-        />
-      ),
-      shouldShow: true,
-    },
-    {
-      id: 5,
-      icon: null,
-      name:
-        !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
-          <span className="download-tab-name">Downloads</span>
-        ) : (
-          "Downloads"
-        ),
-      content: !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) && (
-        <DownloadsPanel
-          data={comicBookDetailData.acquisition.directconnect}
-          comicObjectId={comicObjectId}
-          key={5}
-        />
-      ),
-      shouldShow: true,
-    },
-  ];
-  // filtered Tabs
-  const filteredTabs = tabGroup.filter((tab) => tab.shouldShow);
 
   const [active, setActive] = useState(filteredTabs[0].id);
+  useEffect(() => {
+    console.log("changed");
+    setActive(filteredTabs[0].id);
+  }, [filteredTabs[0]]);
 
-  return !libraryServiceCallInProgress ? (
+  return (
     <>
       <div className="tabs">
         <ul>
@@ -157,8 +48,6 @@ export const TabControls = (props): ReactElement => {
         return active === id ? content : null;
       })}
     </>
-  ) : (
-    <>ANNA</>
   );
 };
 

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useCallback, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { DnD } from "../../DnD";
-import { isEmpty, isNil, isUndefined } from "lodash";
+import { isEmpty } from "lodash";
 import Sticky from "react-stickynode";
 import SlidingPane from "react-sliding-pane";
 import { extractComicArchive } from "../../../actions/fileops.actions";
@@ -24,7 +24,7 @@ export const ArchiveOperations = (props): ReactElement => {
   const dispatch = useDispatch();
   const unpackComicArchive = useCallback(() => {
     dispatch(extractComicArchive(data.rawFileDetails.filePath));
-  }, [dispatch, data]);
+  }, []);
 
   // sliding panel config
   const [visible, setVisible] = useState(false);
@@ -55,7 +55,6 @@ export const ArchiveOperations = (props): ReactElement => {
 
   // sliding panel handlers
   const openImageAnalysisPanel = useCallback((imageFilePath) => {
-    console.log(imageFilePath);
     setSlidingPanelContentId("imageAnalysis");
     dispatch(analyzeImage(imageFilePath));
     setCurrentImage(imageFilePath);

src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx

@@ -1,3 +1,4 @@
+import { isUndefined } from "lodash";
 import React, { ReactElement } from "react";
 
 export const ComicInfoXML = (data): ReactElement => {
@@ -20,7 +21,7 @@ export const ComicInfoXML = (data): ReactElement => {
               <span className="tags has-addons">
                 <span className="tag">Issue #</span>
                 <span className="tag is-warning is-light">
-                  {parseInt(json.number[0], 10)}
+                  {!isUndefined(json.number) && parseInt(json.number[0], 10)}
                 </span>
               </span>
             </div>