From ffb5d73ab81327fb78b59fa28175967c3c8cbf8e Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 28 Feb 2022 13:42:02 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Added=20visibility=20filters=20t?=
 =?UTF-8?q?o=20the=20metadata=20tabs=20on=20comic=20details=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/ComicDetail.tsx         | 63 ++++++++++++-------
 .../components/ComicDetail/RawFileDetails.tsx |  4 +-
 src/client/components/Dashboard/Dashboard.tsx |  6 +-
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index 43bf883..2132a62 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -134,23 +134,50 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       content: isComicBookMetadataAvailable ? (
         <VolumeInformation data={comicBookDetailData} key={1} />
       ) : null,
+      include: isComicBookMetadataAvailable,
     },
     {
       id: 2,
-      icon: <i className="fa-regular fa-file-archive"></i>,
-      name: "Archive Operations",
-      content: <ArchiveOperations data={comicBookDetailData} key={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) && (
+                <pre className="has-text-size-7">
+                  {JSON.stringify(
+                    comicBookDetailData.sourcedMetadata.comicInfo,
+                    null,
+                    2,
+                  )}
+                </pre>
+              )}
+          </div>
+        </div>
+      ),
+      include:
+        !isNil(comicBookDetailData.sourcedMetadata) &&
+        !isEmpty(comicBookDetailData.sourcedMetadata.comicInfo),
     },
     {
       id: 3,
-      icon: <i className="fa-solid fa-floppy-disk"></i>,
-      name: "Acquisition",
-      content: (
-        <AcquisitionPanel comicBookMetadata={comicBookDetailData} key={3} />
-      ),
+      icon: <i className="fa-regular fa-file-archive"></i>,
+      name: "Archive Operations",
+      content: <ArchiveOperations data={comicBookDetailData} key={3} />,
+      include: !isNil(comicBookDetailData.rawFileDetails),
     },
     {
       id: 4,
+      icon: <i className="fa-solid fa-floppy-disk"></i>,
+      name: "Acquisition",
+      content: (
+        <AcquisitionPanel comicBookMetadata={comicBookDetailData} key={4} />
+      ),
+      include: !isNil(comicBookDetailData.rawFileDetails),
+    },
+    {
+      id: 5,
       icon: null,
       name:
         !isNil(comicBookDetailData) && !isEmpty(comicBookDetailData) ? (
@@ -162,18 +189,21 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
         <DownloadsPanel
           data={comicBookDetailData.acquisition.directconnect}
           comicObjectId={comicObjectId}
-          key={4}
+          key={5}
         />
       ),
+      include: !isNil(comicBookDetailData.rawFileDetails),
     },
   ];
   // Tabs
   const MetadataTabGroup = () => {
+    const filteredTabs = tabGroup.filter((tab) => tab.include);
+    console.log("filter:m", filteredTabs);
     return (
       <>
         <div className="tabs">
           <ul>
-            {tabGroup.map(({ id, name, icon }) => (
+            {filteredTabs.map(({ id, name, icon }) => (
               <li
                 key={id}
                 className={id === active ? "is-active" : ""}
@@ -199,7 +229,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
             ))}
           </ul>
         </div>
-        {tabGroup.map(({ id, content }) => {
+        {filteredTabs.map(({ id, content }) => {
           return active === id ? content : null;
         })}
       </>
@@ -254,15 +284,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
                         inferredMetadata: comicBookDetailData.inferredMetadata,
                       }}
                     />
-                    {!isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
-                      <div className="box">
-                        <pre className="has-text-size-7">
-                          {JSON.stringify(
-                            comicBookDetailData.sourcedMetadata, null, 2
-                          )}
-                        </pre>
-                      </div>
-                    )}
                   </>
                 )}
                 {/* comic vine scraped metadata */}
@@ -275,7 +296,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
               </div>
             </div>
 
-            {isComicBookMetadataAvailable ? <MetadataTabGroup /> : null}
+            {<MetadataTabGroup />}
 
             <SlidingPane
               isOpen={visible}
diff --git a/src/client/components/ComicDetail/RawFileDetails.tsx b/src/client/components/ComicDetail/RawFileDetails.tsx
index 8a61d32..db48844 100644
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -37,8 +37,8 @@ export const RawFileDetails = (props): ReactElement => {
           </div>
         </dd>
         {/* inferred metadata */}
-        <dd className="mt-3">
-          <dt>Inferred Issue Metadata</dt>
+        <dt className="mt-3">Inferred Issue Metadata</dt>
+        <dd>
           <div className="field is-grouped mt-2">
             <div className="control">
               <div className="tags has-addons">
diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx
index bf842ef..5b3a19c 100644
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -92,16 +92,16 @@ export const Dashboard = (): ReactElement => {
                       !isEmpty(libraryStatistics.statistics[0].fileTypes) &&
                       map(
                         libraryStatistics.statistics[0].fileTypes,
-                        (fileType) => {
+                        (fileType, idx) => {
                           return (
-                            <>
+                            <span key={idx}>
                               <span className="has-text-weight-bold">
                                 {fileType.data.length}
                               </span>
                               <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
                                 {fileType._id}
                               </span>
-                            </>
+                            </span>
                           );
                         },
                       )}