From 0872aa4d8ac985d89be30f1b0910907c0dc57b73 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 20 Dec 2023 00:08:16 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Cleaned=20the=20table?=
 =?UTF-8?q?=20further?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Library/Library.tsx     | 48 +++++++++-----
 src/client/components/Library/SearchBar.tsx   | 66 ++++++++++---------
 .../components/shared/MetadataPanel.tsx       |  2 +-
 src/client/components/shared/T2Table.tsx      | 59 +++++++----------
 4 files changed, 93 insertions(+), 82 deletions(-)

diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx
index e572978..145b19a 100644
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -7,6 +7,7 @@ import T2Table from "../shared/T2Table";
 import ellipsize from "ellipsize";
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import axios from "axios";
+import { format, fromUnixTime, parseISO } from "date-fns";
 
 /**
  * Component that tabulates the contents of the user's ThreeTwo Library.
@@ -53,7 +54,7 @@ export const Library = (): ReactElement => {
 
   const ComicInfoXML = (value) => {
     return value.data ? (
-      <dl className="flex flex-col text-md p-3 mx-4 my-3 rounded-lg bg-yellow-500 w-max">
+      <dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max">
         {/* Series Name */}
         <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
           <span className="pr-1 pt-1">
@@ -113,9 +114,7 @@ export const Library = (): ReactElement => {
             cell: (info) =>
               !isEmpty(info.getValue()) ? (
                 <ComicInfoXML data={info.getValue()} />
-              ) : (
-                <div className="text-sm mx-4 my-3">No comicinfo.xml</div>
-              ),
+              ) : null,
           },
         ],
       },
@@ -123,24 +122,41 @@ export const Library = (): ReactElement => {
         header: "Additional Metadata",
         columns: [
           {
-            header: "Publisher",
-            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            header: "Date of Import",
+            accessorKey: "_source.createdAt",
             cell: (info) => {
               return !isNil(info.getValue()) ? (
-                <h6>{info.getValue().publisher.name}</h6>
+                <div className="text-xs w-max ml-3 my-3 text-slate-400">
+                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
+                  {format(parseISO(info.getValue()), "h aaaa")}
+                </div>
               ) : null;
             },
           },
           {
-            header: "Something",
-            accessorKey: "_source.acquisition.source.wanted",
-            cell: (info) => {
-              !isUndefined(info.getValue()) ? (
-                <WantedStatus value={info.getValue().toString()} />
-              ) : (
-                "Nothing"
-              );
-            },
+            header: "Downloads",
+            accessorKey: "_source.acquisition",
+            cell: (info) => (
+              <div className="flex flex-col gap-2 ml-3 my-3">
+                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
+                  </span>
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    DC++: {info.getValue().directconnect.downloads.length}
+                  </span>
+                </span>
+
+                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pr-1 pt-1">
+                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
+                  </span>
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    Torrent: {info.getValue().torrent.downloads.length}
+                  </span>
+                </span>
+              </div>
+            ),
           },
         ],
       },
diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx
index 2e3d774..268a025 100644
--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -25,36 +25,42 @@ export const SearchBar = (): ReactElement => {
     // );
   }, []);
   return (
-    <div className="box">
-      <Form
-        onSubmit={handleSubmit}
-        initialValues={{}}
-        render={({ handleSubmit, form, submitting, pristine, values }) => (
-          <form onSubmit={handleSubmit}>
-            <div className="field is-grouped">
-              <div className="control search is-expanded">
-                <Field name="search">
-                  {({ input, meta }) => {
-                    return (
-                      <input
-                        {...input}
-                        className="input main-search-bar is-medium"
-                        placeholder="Type an issue/volume name"
-                      />
-                    );
-                  }}
-                </Field>
-              </div>
-              <div className="control">
-                <button className="button is-medium" type="submit">
-                  Search
-                </button>
-              </div>
-            </div>
-          </form>
-        )}
-      />
-    </div>
+    <Form
+      onSubmit={handleSubmit}
+      initialValues={{}}
+      render={({ handleSubmit, form, submitting, pristine, values }) => (
+        <form onSubmit={handleSubmit}>
+          <Field name="search">
+            {({ input, meta }) => {
+              return (
+                <div className="flex flex-row w-full">
+                  <div className="flex flex-row bg-slate-300 dark:bg-slate-500 rounded-l-lg p-2 min-w-full">
+                    <div className="w-10 text-gray-400">
+                      <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                    </div>
+
+                    <input
+                      {...input}
+                      className="bg-slate-300 dark:bg-slate-500 outline-none text-lg text-gray-700 w-full"
+                      type="text"
+                      id="search"
+                      placeholder="Type an issue/volume name"
+                    />
+                  </div>
+
+                  <button
+                    className="sm:mt-0 rounded-r-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                    type="submit"
+                  >
+                    Search
+                  </button>
+                </div>
+              );
+            }}
+          </Field>
+        </form>
+      )}
+    />
   );
 };
 
diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx
index 7de27e9..ed908c8 100644
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -31,7 +31,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
     {
       name: "rawFileDetails",
       content: () => (
-        <dl className="bg-[#647587] p-3 rounded-lg">
+        <dl className="dark:bg-[#647587] bg-slate-200 p-3 rounded-lg">
           <dt>
             <p className="text-lg">{issueName}</p>
           </dt>
diff --git a/src/client/components/shared/T2Table.tsx b/src/client/components/shared/T2Table.tsx
index 420bc50..00a018e 100644
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -73,43 +73,32 @@ export const T2Table = (tableOptions): ReactElement => {
     <>
       <div>
         {/* Search bar */}
-        <div className="column is-half">
+        <div className="flex flex-row gap-2 justify-between">
           <SearchBar />
-        </div>
-        {/* pagination controls */}
-        <nav className="pagination columns">
-          Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-          <p>{totalPages} comics in all</p>
-          {/* Prev/Next buttons */}
-          <div className="inline-flex flex-row mt-4 mb-4">
-            <button
-              onClick={() => goToPreviousPage()}
-              disabled={pageIndex === 1}
-              className="bg-slate-500 rounded-l border-slate-600 border-r pt-2 px-2"
-            >
-              <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
-            </button>
-            <button
-              className="bg-slate-500 rounded-r pt-2 px-2"
-              onClick={() => goToNextPage()}
-              disabled={pageIndex > Math.floor(totalPages / pageSize)}
-            >
-              <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
-            </button>
+
+          {/* pagination controls */}
+          <div>
+            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
+            <p>{totalPages} comics in all</p>
+            {/* Prev/Next buttons */}
+            <div className="inline-flex flex-row mt-4 mb-4">
+              <button
+                onClick={() => goToPreviousPage()}
+                disabled={pageIndex === 1}
+                className="dark:bg-slate-500 bg-slate-400 rounded-l border-slate-600 border-r pt-2 px-2"
+              >
+                <i className="icon-[solar--arrow-left-linear] h-6 w-6"></i>
+              </button>
+              <button
+                className="dark:bg-slate-500 bg-slate-400 rounded-r pt-2 px-2"
+                onClick={() => goToNextPage()}
+                disabled={pageIndex > Math.floor(totalPages / pageSize)}
+              >
+                <i className="icon-[solar--arrow-right-linear] h-6 w-6"></i>
+              </button>
+            </div>
           </div>
-          <button className="button">
-            <span className="icon is-small">
-              <i className="fa-solid fa-list"></i>
-            </span>
-          </button>
-          <button className="button">
-            <Link to="/library-grid">
-              <span className="icon is-small">
-                <i className="fa-solid fa-image"></i>
-              </span>
-            </Link>
-          </button>
-        </nav>
+        </div>
       </div>
       <table className="table-auto border-collapse overflow-auto">
         <thead className="sticky top-0 bg-slate-200 dark:bg-slate-500">