📚 Volume groups component

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;
 }

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;

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}

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;