From 089078fda03bfcf03f2b006e371297b0f4e0d423 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sun, 20 Mar 2022 23:33:16 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=F0=9F=8F=BD=20react-table=20UI=20p?=
 =?UTF-8?q?olishes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss               | 16 ++++
 src/client/components/Library/Library.tsx     | 31 ++++--
 .../components/Library/RawFileDetails.tsx     | 94 +++++++++++--------
 3 files changed, 92 insertions(+), 49 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 39d990d..fc99877 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -263,6 +263,22 @@ pre {
   border-radius: 0.5rem;
 }
 
+.issue-metadata {
+  background-color: #FBFFEE;
+  padding: 0.8em;
+  border-radius: 0.5rem;
+  .name {
+    font-size: 0.95rem;
+    color: #4A4F50;
+  }
+}
+
+.comicvine-metadata {
+  background-color: #EBFCFF;
+  padding: 0.8rem;
+  border-radius: 0.5rem;
+}
+
 // Comic Detail
 .comic-detail {
   dl {
diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index 46732bb..a0bf7f0 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
-import { useTable, usePagination } from "react-table";
+import { useTable, usePagination, useFlexLayout } from "react-table";
 import { flatten, isEmpty, isNil, isUndefined, map } from "lodash";
 import RawFileDetails from "./RawFileDetails";
 import ComicVineDetails from "./ComicVineDetails";
@@ -38,27 +38,27 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
 
   const ImportStatus = ({ value }) => {
     return value ? (
-      <div className="box">
+      <div className="comicvine-metadata">
         <dl>
           <span className="tags has-addons is-size-7">
-            <span className="tag is-info">Series</span>
-            <span className="tag">{ellipsize(value.series[0], 25)}</span>
+            <span className="tag">Series</span>
+            <span className="tag is-warning is-light">{ellipsize(value.series[0], 25)}</span>
           </span>
         </dl>
         <dl>
           <div className="field is-grouped is-grouped-multiline">
             <div className="control">
-              <span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
-                <span className="tag is-info">Pages</span>
-                <span className="tag">{value.pagecount[0]}</span>
+              <span className="tags has-addons is-size-7  mt-2">
+                <span className="tag">Pages</span>
+                <span className="tag is-info is-light has-text-weight-bold">{value.pagecount[0]}</span>
               </span>
             </div>
 
             <div className="control">
-              <span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
-                <span className="tag is-info">Issue</span>
+              <span className="tags has-addons is-size-7 mt-2">
+                <span className="tag">Issue</span>
                 {!isNil(value.number) && (
-                  <span className="tag">{parseInt(value.number[0], 10)}</span>
+                  <span className="tag has-text-weight-bold is-success is-light">{parseInt(value.number[0], 10)}</span>
                 )}
               </span>
             </div>
@@ -84,6 +84,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             Header: "File Details",
             id: "fileDetails",
+            minWidth: 450,
             accessor: (row) =>
               !isEmpty(row._source.rawFileDetails)
                 ? {
@@ -106,6 +107,8 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           {
             Header: "Import Status",
             accessor: "_source.sourcedMetadata.comicInfo",
+            minWidth: 300,
+            align: "right",
             Cell: ImportStatus,
           },
         ],
@@ -123,6 +126,13 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
               );
             },
           },
+          {
+            Header: "Something",
+            accessor: "_source.acquisition.wanted",
+            Cell: (props) => {
+              return <div>asda</div>
+            },
+          },
         ],
       },
     ],
@@ -159,6 +169,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
       pageCount: searchResults.hits.total.value,
     },
     usePagination,
+    useFlexLayout,
   );
   const dispatch = useDispatch();
   const goToNextPage = useCallback(() => {
diff --git a/src/client/components/Library/RawFileDetails.tsx b/src/client/components/Library/RawFileDetails.tsx
index 9b231c1..cd11e22 100644
--- a/src/client/components/Library/RawFileDetails.tsx
+++ b/src/client/components/Library/RawFileDetails.tsx
@@ -4,6 +4,7 @@ import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 import prettyBytes from "pretty-bytes";
 import ellipsize from "ellipsize";
 import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
+import { Card } from "../Carda";
 
 // raw file details
 export const RawFileDetails = (rawFileData): ReactElement => {
@@ -13,48 +14,63 @@ export const RawFileDetails = (rawFileData): ReactElement => {
   );
   const filePath = escapePoundSymbol(encodedFilePath);
   return (
-    <div className="card-container">
-      <div className="card">
-        <div className="is-horizontal">
-          <div className="card-image">
-            <figure>
-              <img className="image" src={filePath} />
-            </figure>
-          </div>
-          <ul className="card-content">
-            <li className="name has-text-weight-medium">
-              {ellipsize(rawFileDetails.name, 49)}
-            </li>
+    <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={filePath}
+                    orientation={"vertical"}
+                    hasDetails={false}
+                    // cardContainerStyle={{ maxWidth: 200 }}
+                  />
+                </div>
+                <div className="column">
+                  <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>
 
-            <li>
-              <dl className="is-size-7">
-                <dd>
-                  Series:{" "}
-                  <span className="has-text-weight-medium">
-                    {inferredMetadata.issue.name}
-                  </span>
-                </dd>
-              </dl>
-            </li>
-            <li>
-              <div className="mt-1 field is-grouped is-grouped-multiline">
-                <div className="control">
-                  <div className="tags">
-                    <span className="tag is-warning is-light">
-                      {inferredMetadata.issue.number}
-                    </span>
-
-                    <span className="tag is-success is-light">
-                      {rawFileDetails.extension}
-                    </span>
-                    <span className="tag">
-                      {prettyBytes(rawFileDetails.fileSize)}
-                    </span>
-                  </div>
+                    <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>
                 </div>
               </div>
-            </li>
-          </ul>
+            </dd>
+          </dl>
         </div>
       </div>
     </div>