From 048c7ba6d5a82fc7b69ac9b2bb2da4971ed4c881 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 21 Sep 2021 17:15:58 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9A=20Volume=20groups=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss        | 22 ++++++-
 src/client/components/Dashboard.tsx    | 86 +++++++++++---------------
 src/client/components/LibraryGrid.tsx  |  1 -
 src/client/components/VolumeGroups.tsx |  7 +++
 4 files changed, 63 insertions(+), 53 deletions(-)
 create mode 100644 src/client/components/VolumeGroups.tsx

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 28fb4a1..3a144f7 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -26,6 +26,27 @@ $border-color: red;
   }
 }
 
+// Dashboard 
+.paper {
+  background: #fff;
+  width: 200px;
+  border-radius: 0.3rem;
+  box-shadow:
+    /* The top layer shadow */
+    0 -1px 1px rgba(0,0,0,0.15),
+    /* The second layer */
+    0 -10px 0 -5px #eee,
+    /* The second layer shadow */
+    0 -10px 1px -4px rgba(0,0,0,0.15),
+     /* The third layer */
+    0 -20px 0 -10px #eee,
+    /* The third layer shadow */
+    0 -20px 1px -9px rgba(0,0,0,0.15);
+    /* Padding for demo purposes */
+    padding: 30px;
+}
+
+
 .min {
   overflow: visible;
   margin: auto;
@@ -291,7 +312,6 @@ $border-color: red;
   background-clip: padding-box;
 }
 
-/* Style your items */
 .my-masonry-grid_column > div { /* change div to reference your elements you put in <Masonry> */
   margin-bottom: 20px;
 }
diff --git a/src/client/components/Dashboard.tsx b/src/client/components/Dashboard.tsx
index e5d36ae..a584b02 100644
--- a/src/client/components/Dashboard.tsx
+++ b/src/client/components/Dashboard.tsx
@@ -1,56 +1,13 @@
-import * as React from "react";
-import { connect } from "react-redux";
+import React, { ReactElement, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { getComicBooks } from "../actions/fileops.actions";
 import { isEmpty } from "lodash";
 
-interface IProps {
-  getRecentComics: Function;
-  recentComics: any;
-}
-interface IState {
-  fileOps: any;
-}
-
-class Dashboard extends React.Component<IProps, IState> {
-  componentDidMount() {
-    this.props.getRecentComics();
-  }
-  public render() {
-    return (
-      <div className="container">
-        <section className="section">
-          <h1 className="title">Dashboard</h1>
-
-          {!isEmpty(this.props.recentComics) &&
-          !isEmpty(this.props.recentComics.docs) ? (
-            <>
-              <h2 className="subtitle">Recently Imported</h2>
-              <RecentlyImported comicBookCovers={this.props.recentComics} />
-            </>
-          ) : (
-            <ZeroState
-              header={"Set the source directory"}
-              message={
-                "No comics were found! Please point ThreeTwo! to a directory..."
-              }
-            />
-          )}
-        </section>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state: IState) {
-  return {
-    recentComics: state.fileOps.recentComics,
-  };
-}
-
-const mapDispatchToProps = (dispatch) => ({
-  getRecentComics() {
+export const Dashboard = (): ReactElement => {
+  const dispatch = useDispatch();
+  useEffect(() => {
     dispatch(
       getComicBooks({
         paginationOptions: {
@@ -60,7 +17,34 @@ const mapDispatchToProps = (dispatch) => ({
         },
       }),
     );
-  },
-});
+  }, [dispatch]);
+  const recentComics = useSelector(
+    (state: RootState) => state.fileOps.recentComics,
+  );
+  return (
+    <div className="container">
+      <section className="section">
+        <h1 className="title">Dashboard</h1>
 
-export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
+        {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
+          <>
+            <h2 className="subtitle">Recently Imported</h2>
+            <RecentlyImported comicBookCovers={recentComics} />
+            <section>
+              <div className="paper">asdas</div>
+            </section>
+          </>
+        ) : (
+          <ZeroState
+            header={"Set the source directory"}
+            message={
+              "No comics were found! Please point ThreeTwo! to a directory..."
+            }
+          />
+        )}
+      </section>
+    </div>
+  );
+};
+
+export default Dashboard;
diff --git a/src/client/components/LibraryGrid.tsx b/src/client/components/LibraryGrid.tsx
index b7a4723..5925496 100644
--- a/src/client/components/LibraryGrid.tsx
+++ b/src/client/components/LibraryGrid.tsx
@@ -60,7 +60,6 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
                 {ellipsize(comicName, 18)}
               </Link>
             );
-            console.log(name);
             return (
               <Card
                 key={_id}
diff --git a/src/client/components/VolumeGroups.tsx b/src/client/components/VolumeGroups.tsx
new file mode 100644
index 0000000..03d5728
--- /dev/null
+++ b/src/client/components/VolumeGroups.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react";
+
+export const VolumeGroups = (): ReactElement => {
+  return <div className="paper"></div>;
+};
+
+export default VolumeGroups;