🔧 Debugging

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 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 { filteredTabs } = props;
 
   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</>
   );
 };