🎨 UX improvements

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -7,7 +7,7 @@ import { isUndefined } from "lodash";
 export const ComicVineDetails = (props): ReactElement => {
   const { data, updatedAt } = props;
   return (
-    <div className="content comic-detail">
+    <div className="content comic-detail comicvine-metadata">
       <dl>
         <dt>ComicVine Metadata</dt>
         <dd className="is-size-7">
@@ -40,14 +40,14 @@ export const ComicVineDetails = (props): ReactElement => {
                   </span>
                 </div>
               </div>
-            ) : (
+            ) : data.resource_type ? (
               <div className="control">
                 <div className="tags has-addons">
                   <span className="tag is-light">Type</span>
                   <span className="tag is-warning">{data.resource_type}</span>
                 </div>
               </div>
-            )}
+            ) : null}
             <div className="control">
               <div className="tags has-addons">
                 <span className="tag is-light">ComicVine Issue ID</span>

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -1,15 +1,20 @@
 import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import prettyBytes from "pretty-bytes";
+import { isUndefined } from "lodash";
 
 export const RawFileDetails = (props): ReactElement => {
-  const { data } = props;
+  const { rawFileDetails, inferredMetadata } = props.data;
+  console.log(props);
   return (
-    <div className="content comic-detail">
+    <div className="content comic-detail raw-file-details">
       <dl>
         <dt>Raw File Details</dt>
         <dd className="is-size-7">
-          {data.containedIn + "/" + data.name + data.extension}
+          {rawFileDetails.containedIn +
+            "/" +
+            rawFileDetails.name +
+            rawFileDetails.extension}
         </dd>
         <dd>
           <div className="field is-grouped mt-2">
@@ -17,7 +22,7 @@ export const RawFileDetails = (props): ReactElement => {
               <div className="tags has-addons">
                 <span className="tag">Size</span>
                 <span className="tag is-info is-light">
-                  {prettyBytes(data.fileSize)}
+                  {prettyBytes(rawFileDetails.fileSize)}
                 </span>
               </div>
             </div>
@@ -25,12 +30,36 @@ export const RawFileDetails = (props): ReactElement => {
               <div className="tags has-addons">
                 <span className="tag">Extension</span>
                 <span className="tag is-primary is-light">
-                  {data.extension}
+                  {rawFileDetails.extension}
                 </span>
               </div>
             </div>
           </div>
         </dd>
+        {/* inferred metadata */}
+        <dd className="mt-3">
+          <dt>Inferred Issue Metadata</dt>
+          <div className="field is-grouped mt-2">
+            <div className="control">
+              <div className="tags has-addons">
+                <span className="tag">Name</span>
+                <span className="tag is-info is-light">
+                  {inferredMetadata.issue.name}
+                </span>
+              </div>
+            </div>
+            {!isUndefined(inferredMetadata.issue.number) ? (
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag">Number</span>
+                  <span className="tag is-primary is-light">
+                    {inferredMetadata.issue.number}
+                  </span>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </dd>
       </dl>
     </div>
   );
@@ -40,13 +69,23 @@ export default RawFileDetails;
 
 RawFileDetails.propTypes = {
   data: PropTypes.shape({
-    containedIn: PropTypes.string,
-    name: PropTypes.string,
-    fileSize: PropTypes.number,
-    path: PropTypes.string,
-    extension: PropTypes.string,
-    cover: PropTypes.shape({
-      filePath: PropTypes.string,
+    rawFileDetails: PropTypes.shape({
+      containedIn: PropTypes.string,
+      name: PropTypes.string,
+      fileSize: PropTypes.number,
+      path: PropTypes.string,
+      extension: PropTypes.string,
+      cover: PropTypes.shape({
+        filePath: PropTypes.string,
+      }),
+    }),
+    inferredMetadata: PropTypes.shape({
+      issue: PropTypes.shape({
+        year: PropTypes.string,
+        name: PropTypes.string,
+        number: PropTypes.number,
+        subtitle: PropTypes.string,
+      }),
     }),
   }),
 };