🔧 Metadata Panel WIP 2

src/client/components/Library/Library.tsx

@@ -11,10 +11,12 @@ import T2Table from "../shared/T2Table";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import RawFileDetails from "./RawFileDetails";
 import ComicVineDetails from "./ComicVineDetails";
+import MetadataPanel from "../shared/MetadataPanel";
 import SearchBar from "./SearchBar";
 import { useDispatch } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
+import { determineCoverFile } from "../../shared/utils/metadata.utils";
 
 interface IComicBookLibraryProps {
   data: {
@@ -82,26 +84,61 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             Header: "File Details",
             id: "fileDetails",
             minWidth: 400,
-            accessor: (row) =>
+            accessor: "_source",
-              !isEmpty(row._source.rawFileDetails)
-                ? {
-                    rawFileDetails: row._source.rawFileDetails,
-                    inferredMetadata: row._source.inferredMetadata,
-                  }
-                : row._source.sourcedMetadata,
             Cell: ({ value }) => {
-              // If no CV info available, use raw file metadata
+              const {
-              if (
+                rawFileDetails,
-                !isUndefined(value.rawFileDetails) &&
+                sourcedMetadata: { comicvine, locg },
-                !isEmpty(value.rawFileDetails.cover)
+              } = value;
-              ) {
+              const { issueName, url } = determineCoverFile({
-                return <RawFileDetails data={value} />;
+                comicvine,
-              }
+                locg,
-              // If CV metadata available, show it
+                rawFileDetails,
-              if (!isNil(value.comicvine)) {
+              });
-                return <ComicVineDetails data={value} />;
+
-              }
+              return (
-              return <div>null</div>;
+                <MetadataPanel props={value}>
+                  <div></div>
+                  {/* <dl>
+                  <dt>
+                    <h6 className="name has-text-weight-medium mb-1">
+                      {rawFileDetails.name}
+                    </h6>
+                  </dt>
+                  <dd className="is-size-7">
+                    Is a part of{" "}
+                    <span className="has-text-weight-semibold">
+                      {inferredMetadata.issue.name}
+                    </span>
+                  </dd>
+
+                  <dd className="is-size-7 mt-2">
+                    <div className="field is-grouped is-grouped-multiline">
+                      <div className="control">
+                        <span className="tags">
+                          <span className="tag is-success is-light has-text-weight-semibold">
+                            {rawFileDetails.extension}
+                          </span>
+                          <span className="tag is-success is-light">
+                            {prettyBytes(rawFileDetails.fileSize)}
+                          </span>
+                        </span>
+                      </div>
+                      <div className="control">
+                        {inferredMetadata.issue.number && (
+                          <div className="tags has-addons">
+                            <span className="tag is-light">Issue #</span>
+                            <span className="tag is-warning">
+                              {inferredMetadata.issue.number}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </dd>
+                </dl> */}
+                </MetadataPanel>
+              );
             },
           },
           {

src/client/components/shared/MetadataPanel.tsx

@@ -1,3 +1,4 @@
+import React, { ReactElement } from "react";
 import PropTypes from "prop-types";
 import ellipsize from "ellipsize";
 import convert from "html-to-text";
@@ -7,11 +8,35 @@ import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { Card } from "../Carda";
 
 interface IMetadatPanelProps {
-    
+  value: any;
-  }
+  children: any;
+}
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
 
-    
+  console.log(props)
+  return (
+    <div className="columns">
+      <div className="column">
+        <div className="comic-detail issue-metadata">
+          <dl>
+            <dd>
+              <div className="columns mt-2">
+                <div className="column is-3">
+                  <Card
+                    imageUrl={"asd"}
+                    orientation={"vertical"}
+                    hasDetails={false}
+                    // cardContainerStyle={{ maxWidth: 200 }}
+                  />
+                </div>
+                <div className="column">{props.children}</div>
+              </div>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default MetadataPanel;