🕷 Gnarly tab switch bug regressed

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -5,7 +5,6 @@ import { isUndefined } from "lodash";
 
 export const RawFileDetails = (props): ReactElement => {
   const { rawFileDetails, inferredMetadata } = props.data;
-  console.log(props);
   return (
     <>
       <div className="comic-detail raw-file-details">

src/client/components/ComicDetail/TabControls.tsx

@@ -1,14 +1,129 @@
 import React, { ReactElement, useEffect, useState } from "react";
-import { isEmpty, isNil } from "lodash";
+import { isEmpty, isNil, isUndefined } 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, filteredTabIds, filteredTabs } = props;
-  const [active, setActive] = useState(filteredTabIds[0]);
-  console.log(filteredTabIds);
-  useEffect(() => {
-    setActive(filteredTabIds[0]);
-  }, [filteredTabIds]);
-  return (
+  const comicBookDetailData = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
+
+  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);
+
+  return !libraryServiceCallInProgress ? (
     <>
       <div className="tabs">
         <ul>
@@ -42,6 +157,8 @@ export const TabControls = (props): ReactElement => {
         return active === id ? content : null;
       })}
     </>
+  ) : (
+    <>ANNA</>
   );
 };
 

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

@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
 
 export const ComicInfoXML = (data): ReactElement => {
   const { json } = data;
-  console.log(data);
   return (
     <div className="comicInfo-metadata">
       <dl className="has-text-size-7">