🕷 Gnarly tab switch bug regressed

src/client/assets/scss/App.scss

@@ -9,7 +9,7 @@ $border-color: red;
 $volume-color: #fdecd1;
 $issue-color: #f2f1f9;
 $size-8: 0.9rem;
-$size-9: 0.7em;
+$size-9: 0.7rem;
 $flexSize: 4em;
 $boxSpacing: 1em;
 $colorText: #404646;
@@ -22,6 +22,21 @@ $colorText: #404646;
   font-size: $size-9;
 }
 
+.small-tag {
+  align-items: center;
+  background-color: #ddc096;
+  border-radius: 4px;
+  color: #4a4a4a;
+  display: inline-flex;
+  font-size: $size-9;
+  height: 1.5em;
+  justify-content: center;
+  line-height: 1.5;
+  padding-left: 0.55em;
+  padding-right: 0.55em;
+  white-space: nowrap;
+}
+
 // global style overrides
 
 pre {
@@ -245,22 +260,12 @@ pre {
     .card-content {
       align-self: top;
       flex: 1;
-      padding-left: 1em;
-      padding-top: 0.5em;
+      padding-left: 0.7em;
+      padding-top: 0.4em;
       padding-bottom: 0em;
-      .name {
-        font-size: 0.85em;
-      }
-      ul {
-        li.status {
-          margin-top: 10px;
-        }
-      }
-    }
-    .is-divider {
-      margin-top: 1.5rem;
-      margin-bottom: 1rem;
+     
     }
+    
   }
 }
 

src/client/components/ComicDetail.tsx

@@ -9,11 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import Card from "./Carda";
 import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
-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 { RawFileDetails } from "./ComicDetail/RawFileDetails";
 
 import TabControls from "./ComicDetail/TabControls";
@@ -178,86 +174,6 @@ 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);
-  const filteredTabIds = tabGroup
-    .map((tab) => {
-      if (tab.shouldShow) {
-        return tab.id;
-      }
-    })
-    .filter((tab) => !isNil(tab));
-
   // Determine which cover image to use:
   // 1. from the locally imported or
   // 2. from the CV-scraped version
@@ -339,14 +255,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               </div>
             </div>
 
-            {
-              <TabControls
-                comicBookDetailData={comicBookDetailData}
-                comicObjectId={comicObjectId}
-                filteredTabIds={filteredTabIds}
-                filteredTabs={filteredTabs}
-              />
-            }
+            {<TabControls comicObjectId={comicObjectId} />}
 
             <SlidingPane
               isOpen={visible}

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">

src/client/components/Dashboard/RecentlyImported.tsx

@@ -110,18 +110,20 @@ export const RecentlyImported = ({
                   </div>
                 </Card>
                 {/* original reference */}
-                <Card
-                  orientation="horizontal"
-                  hasDetails
-                  imageUrl={sourcedMetadata.comicvine.image.icon_url}
-                >
-                  <dd className="is-size-9">
-                    <dl>Downloaded from:</dl>
-                  </dd>
-                  <dd className="is-size-9">
-                    <dl>Bapacha naav</dl>
-                  </dd>
-                </Card>
+                {!isUndefined(sourcedMetadata.comicvine.image) ? (
+                  <Card
+                    orientation="horizontal"
+                    hasDetails
+                    imageUrl={sourcedMetadata.comicvine.image.icon_url}
+                  >
+                    <dd className="is-size-9">
+                      <dl>
+                        {ellipsize(sourcedMetadata.comicvine.volumeInformation.name, 22)}
+                      </dl>
+                      <dl> <span className="small-tag mt-1">{sourcedMetadata.comicvine.id}</span></dl>
+                    </dd>
+                  </Card>
+                ) : null}
               </>
             );
           },