📕 Added recently imported section to dashboard

src/client/components/Card.tsx

@@ -3,7 +3,7 @@ import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.int
 import { map, isUndefined, isEmpty } from "lodash";
 
 interface IProps {
-  comicBookCoversMetadata: IExtractedComicBookCoverFile[];
+  comicBookCoversMetadata: IExtractedComicBookCoverFile;
 }
 interface IState {}
 
@@ -20,58 +20,38 @@ class Card extends React.Component<IProps, IState> {
     return input;
   };
   public drawCoverCard = (
-    metadata: IExtractedComicBookCoverFile[],
-  ): JSX.Element[] => {
-    return map(metadata, (item: any, idx: number) => {
-      return (
-        <div key={idx}>
-          <div className="card">
-            <div className="is-horizontal">
-              <div className="card-image">
-                <figure className="image">
-                  <img
-                    src={
-                      "http://localhost:3000" +
-                      this.removeLeadingPeriod(
-                        item.comicBookCoverMetadata.path,
-                      ) +
-                      "/" +
-                      item.comicBookCoverMetadata.name
-                    }
-                    alt="Placeholder image"
-                  />
-                </figure>
-              </div>
-              <div className="card-content">
-                <ul>
-                  <li className="has-text-weight-semibold">
-                    {item.comicBookCoverMetadata.name}
-                  </li>
-                  <li className="truncate">
-                    {item.comicBookCoverMetadata.path}
-                  </li>
-                  <li className="status">
-                    {item.dbImportResult.importStatus.isImported && (
-                      <div className="tags has-addons">
-                        <a className="tag">
-                          <span className="icon has-text-success-dark">
-                            <i className="fas fa-file-import"></i>
-                          </span>
-                        </a>
-                        <span className="tag is-success">Imported</span>
-                      </div>
-                    )}
-                  </li>
-                </ul>
-              </div>
+    metadata: IExtractedComicBookCoverFile,
+  ): JSX.Element => {
+    return (
+      <div>
+        <div className="card">
+          <div>
+            <div className="card-image">
+              <figure className="image">
+                <img
+                  src={
+                    "http://localhost:3000" +
+                    this.removeLeadingPeriod(metadata.path) +
+                    "/" +
+                    metadata.name
+                  }
+                  alt="Placeholder image"
+                />
+              </figure>
+            </div>
+            <div className="card-content">
+              <ul>
+                <li className="has-text-weight-semibold">{metadata.name}</li>
+              </ul>
             </div>
           </div>
         </div>
-      );
-    });
+      </div>
+    );
   };
 
   public render() {
+    console.log(this.props.comicBookCoversMetadata);
     return (
       <>
         {!isUndefined(this.props.comicBookCoversMetadata) &&

src/client/components/Dashboard.tsx

@@ -1,29 +1,65 @@
 import * as React from "react";
+import { connect } from "react-redux";
 import ZeroState from "./ZeroState";
+import { RecentlyImported } from "./RecentlyImported";
+import { getRecentlyImportedComicBooks } from "../actions/fileops.actions";
+import { isUndefined } from "lodash";
 
-interface IProps {}
-interface IState {}
+interface IProps {
+  getRecentComics: Function;
+  recentComics: any;
+}
+interface IState {
+  fileOps: any;
+}
 
 class Dashboard extends React.Component<IProps, IState> {
+  componentDidMount() {
+    if (!isUndefined(this.props.recentComics)) {
+      console.log("asd");
+    }
+    this.props.getRecentComics();
+  }
   public render() {
     return (
       <div className="container">
         <section className="section">
           <h1 className="title">Dashboard</h1>
-          <h2 className="subtitle">
-            A simple container to divide your page into{" "}
-            <strong>sections</strong>, like the one you're currently reading.
-          </h2>
-          <ZeroState
-            header={"Set the source directory"}
-            message={
-              "No comics were found! Please point ThreeTwo! to a directory..."
-            }
-          />
+          <h2 className="subtitle">Recently Imported</h2>
+          {this.props.recentComics ? (
+            <RecentlyImported comicBookCovers={this.props.recentComics} />
+          ) : (
+            <ZeroState
+              header={"Set the source directory"}
+              message={
+                "No comics were found! Please point ThreeTwo! to a directory..."
+              }
+            />
+          )}
         </section>
       </div>
     );
   }
 }
 
-export default Dashboard;
+function mapStateToProps(state: IState) {
+  console.log("state", state);
+  return {
+    recentComics: state.fileOps.recentComics,
+  };
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  getRecentComics() {
+    dispatch(
+      getRecentlyImportedComicBooks({
+        paginationOptions: {
+          page: 0,
+          limit: 5,
+        },
+      }),
+    );
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

src/client/components/Import.tsx

@@ -3,8 +3,6 @@ import { isUndefined } from "lodash";
 import { connect } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
-import Card from "./Card";
-import { Collapse } from "react-collapse";
 import { io, Socket } from "socket.io-client";
 import { SOCKET_BASE_URI } from "../constants/endpoints";
 import DynamicList, { createCache } from "react-window-dynamic-list";
@@ -56,14 +54,14 @@ class Import extends React.Component<IProps, IState> {
       <span className="tag is-light">{index}</span>
       <div className="tags has-addons">
         <span className="tag is-success">cover</span>
-        <span className="tag is-success is-light">
+        <span className="tag is-success is-light has-text-weight-medium">
           {this.props.covers[index].comicBookCoverMetadata.name}
         </span>
       </div>
       imported from
       <div className="tags has-addons">
         <span className="tag is-success">path</span>
-        <span className="tag is-success is-light">
+        <span className="tag is-success is-light has-text-weight-medium">
           {this.props.covers[index].comicBookCoverMetadata.path}
         </span>
       </div>

src/client/components/RecentlyImported.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Card from "./Card";
+import { map } from "lodash";
+
+type RecentlyImportedProps = {
+  comicBookCovers: any;
+};
+
+export const RecentlyImported = ({
+  comicBookCovers,
+}: RecentlyImportedProps) => (
+  <section className="card-container">
+    {map(comicBookCovers, (cover) => {
+      return <Card comicBookCoversMetadata={cover.rawFileDetails} />;
+    })}
+  </section>
+);