From 24eaeff9bcfe1ec87c5b946216c5ccf9924ff6d3 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 3 Aug 2021 13:16:45 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=93=20Library=20page=20scaffold?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |   1 +
 src/client/assets/scss/App.scss       |   2 +-
 src/client/components/App.tsx         |   4 +
 src/client/components/ComicDetail.tsx |   7 +-
 src/client/components/Dashboard.tsx   |   2 +-
 src/client/components/Library.tsx     | 115 ++++++++++++++++++++++++++
 src/client/components/Navbar.tsx      |   3 +
 yarn.lock                             |   5 ++
 8 files changed, 133 insertions(+), 6 deletions(-)
 create mode 100644 src/client/components/Library.tsx

diff --git a/package.json b/package.json
index ca7f602..b90fdbd 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "react-fast-compare": "^3.2.0",
     "react-final-form": "^6.5.3",
     "react-spinners": "^0.11.0",
+    "react-table": "^7.7.0",
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",
     "socket.io-client": "^4.1.2",
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 257ef1b..b76db6f 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -61,7 +61,7 @@ $border-color: red;
   row-gap: 1.2em;
 
   .card {
-    max-width: 200px;
+    max-width: 500px;
     margin: 0 0 15px 0;
     .is-horizontal {
       flex-direction: row;
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index f905595..cb622b3 100644
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -4,6 +4,7 @@ import Dashboard from "./Dashboard";
 
 import Import from "./Import";
 import { ComicDetail } from "./ComicDetail";
+import Library from "./Library";
 
 import { Switch, Route } from "react-router";
 import Navbar from "./Navbar";
@@ -21,6 +22,9 @@ class App extends React.Component {
           <Route path="/import">
             <Import path={"./comics"} />
           </Route>
+          <Route path="/library">
+            <Library />
+          </Route>
           <Route
             path={"/comic/details/:comicObjectId"}
             component={ComicDetail}
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index 357bf54..2b50fe5 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -7,7 +7,7 @@ import ComicVineSearchForm from "./ComicVineSearchForm";
 
 import { css } from "@emotion/react";
 import PuffLoader from "react-spinners/PuffLoader";
-import { isEmpty, isUndefined, isEqual } from "lodash";
+import { isEmpty, isUndefined } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
 import { Drawer, Divider } from "antd";
@@ -27,7 +27,6 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
 
   const comicVineSearchResults = useSelector(
     (state: RootState) => state.comicInfo.searchResults,
-
   );
   const comicVineSearchQueryObject = useSelector(
     (state: RootState) => state.comicInfo.searchQuery,
@@ -136,8 +135,8 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
 
             <div className="search-results-container">
               {!isEmpty(comicVineSearchResults) && (
-                  <MatchResult matchData={comicVineSearchResults} />
-                )}
+                <MatchResult matchData={comicVineSearchResults} />
+              )}
             </div>
           </Drawer>
         </>
diff --git a/src/client/components/Dashboard.tsx b/src/client/components/Dashboard.tsx
index f9afb72..74f6a97 100644
--- a/src/client/components/Dashboard.tsx
+++ b/src/client/components/Dashboard.tsx
@@ -55,7 +55,7 @@ const mapDispatchToProps = (dispatch) => ({
       getRecentlyImportedComicBooks({
         paginationOptions: {
           page: 0,
-          limit: 31,
+          limit: 5,
         },
       }),
     );
diff --git a/src/client/components/Library.tsx b/src/client/components/Library.tsx
new file mode 100644
index 0000000..162eed2
--- /dev/null
+++ b/src/client/components/Library.tsx
@@ -0,0 +1,115 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  ReactElement,
+} from "react";
+import {
+  removeLeadingPeriod,
+  escapePoundSymbol,
+} from "../shared/utils/formatting.utils";
+import { useTable } from "react-table";
+
+import { useDispatch, useSelector } from "react-redux";
+
+interface IComicBookLibraryProps {
+  matches: unknown;
+}
+
+export const Library = ({}: IComicBookLibraryProps): ReactElement => {
+  const data = useSelector(
+    (state: RootState) => state.fileOps.recentComics.docs,
+  );
+  const columns = useMemo(
+    () => [
+      {
+        Header: "Comic Metadata",
+        columns: [
+          {
+            Header: "Name",
+            accessor: "rawFileDetails",
+            Cell: (props) => {
+              const encodedFilePath = encodeURI(
+                "http://localhost:3000" +
+                  removeLeadingPeriod(props.cell.value.path),
+              );
+              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>
+                    <div className="card-content">
+                        <p>{props.cell.value.name}</p>
+                        {props.cell.value.containedIn}
+                    </div>
+                  </div>
+                </div>
+                </div>
+              );
+            },
+          },
+          {
+            Header: "Import Status",
+            accessor: "",
+          },
+        ],
+      },
+    ],
+    [],
+  );
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable({ columns, data });
+
+  const comicBookLibraryItems = React.useMemo(() => {});
+
+  return (
+    <section className="container">
+      <div className="section">
+        <h1 className="title">Library</h1>
+        <div className="columns">
+          <div className="column">
+            <table {...getTableProps()}>
+              <thead>
+                {headerGroups.map((headerGroup, idx) => (
+                  <tr key={idx} {...headerGroup.getHeaderGroupProps()}>
+                    {headerGroup.headers.map((column, idx) => (
+                      <th key={idx} {...column.getHeaderProps()}>
+                        {column.render("Header")}
+                      </th>
+                    ))}
+                  </tr>
+                ))}
+              </thead>
+
+              <tbody {...getTableBodyProps()}>
+                {rows.map((row, idx) => {
+                  prepareRow(row);
+                  return (
+                    <tr key={idx} {...row.getRowProps()}>
+                      {row.cells.map((cell, idx) => {
+                        console.log(cell);
+                        return (
+                          <td key={idx} {...cell.getCellProps()}>
+                            {cell.render("Cell")}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Library;
diff --git a/src/client/components/Navbar.tsx b/src/client/components/Navbar.tsx
index 2439b71..e73df50 100644
--- a/src/client/components/Navbar.tsx
+++ b/src/client/components/Navbar.tsx
@@ -47,6 +47,9 @@ const Navbar: React.FunctionComponent = (props) => {
             Import
           </Link>
 
+          <Link to="/library" className="navbar-item">
+            Library
+          </Link>
           <div className="navbar-item has-dropdown is-hoverable">
             <a
               className="navbar-link  is-active"
diff --git a/yarn.lock b/yarn.lock
index a258c40..b6fb197 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11340,6 +11340,11 @@ react-spinners@^0.11.0:
   dependencies:
     "@emotion/react" "^11.1.4"
 
+react-table@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
+  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
+
 react-window-dynamic-list@^2.3.5:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/react-window-dynamic-list/-/react-window-dynamic-list-2.4.2.tgz#e9cabcd067cb066619613af00f5dd42bca9f4b19"