📚 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,33 +1,38 @@
-import * as React from "react";
+import React, { ReactElement, useEffect } from "react";
-import { connect } from "react-redux";
+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 {
+export const Dashboard = (): ReactElement => {
-  getRecentComics: Function;
+  const dispatch = useDispatch();
-  recentComics: any;
+  useEffect(() => {
-}
+    dispatch(
-interface IState {
+      getComicBooks({
-  fileOps: any;
+        paginationOptions: {
-}
+          page: 0,
-
+          limit: 5,
-class Dashboard extends React.Component<IProps, IState> {
+          sort: { updatedAt: "-1" },
-  componentDidMount() {
+        },
-    this.props.getRecentComics();
+      }),
-  }
+    );
-  public render() {
+  }, [dispatch]);
+  const recentComics = useSelector(
+    (state: RootState) => state.fileOps.recentComics,
+  );
   return (
     <div className="container">
       <section className="section">
         <h1 className="title">Dashboard</h1>
 
-          {!isEmpty(this.props.recentComics) &&
+        {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
-          !isEmpty(this.props.recentComics.docs) ? (
           <>
             <h2 className="subtitle">Recently Imported</h2>
-              <RecentlyImported comicBookCovers={this.props.recentComics} />
+            <RecentlyImported comicBookCovers={recentComics} />
+            <section>
+              <div className="paper">asdas</div>
+            </section>
           </>
         ) : (
           <ZeroState
@@ -40,27 +45,6 @@ class Dashboard extends React.Component<IProps, IState> {
       </section>
     </div>
   );
-  }
+};
-}
 
-function mapStateToProps(state: IState) {
+export default Dashboard;
-  return {
-    recentComics: state.fileOps.recentComics,
-  };
-}
-
-const mapDispatchToProps = (dispatch) => ({
-  getRecentComics() {
-    dispatch(
-      getComicBooks({
-        paginationOptions: {
-          page: 0,
-          limit: 5,
-          sort: { updatedAt: "-1" },
-        },
-      }),
-    );
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(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;