🔧 Moved metadata panels to its own component

src/client/components/Library/Library.tsx

@@ -1,22 +1,13 @@
-import React, {
-  useState,
-  useEffect,
-  useMemo,
-  ReactElement,
-  useCallback,
-} from "react";
+import React, { useMemo, ReactElement, useCallback } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
 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: {
@@ -86,59 +77,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             minWidth: 400,
             accessor: "_source",
             Cell: ({ value }) => {
-              const {
-                rawFileDetails,
-                sourcedMetadata: { comicvine, locg },
-              } = value;
-              const { issueName, url } = determineCoverFile({
-                comicvine,
-                locg,
-                rawFileDetails,
-              });
-
-              return (
-                <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>
-              );
+              return <MetadataPanel data={value} />;
             },
           },
           {