📕 Added recently imported section to dashboard

src/client/actions/fileops.actions.tsx

@@ -8,6 +8,7 @@ import { io } from "socket.io-client";
 import {
   IMS_COMICBOOK_METADATA_FETCHED,
   IMS_SOCKET_CONNECTION_CONNECTED,
+  IMS_RECENT_COMICS_FETCHED,
 } from "../constants/action-types";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
@@ -61,7 +62,6 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
       extractionOptions,
       walkedFolders,
     },
-    opts: { garam: "pasha" },
   });
 
   socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
@@ -72,3 +72,21 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
     });
   });
 };
+
+export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
+  const { paginationOptions } = options;
+  return axios
+    .request({
+      url: "http://localhost:3000/api/import/getRecentlyImportedComicBooks",
+      method: "POST",
+      data: {
+        paginationOptions,
+      },
+    })
+    .then((response) => {
+      dispatch({
+        type: IMS_RECENT_COMICS_FETCHED,
+        data: response.data.docs,
+      });
+    });
+};

src/client/assets/scss/App.css

@@ -16317,7 +16317,7 @@ readers do not read off random characters that represent icons */
 }
 
 .card-container .card {
-  max-width: 500px;
+  max-width: 200px;
   margin: 0 0 15px 0;
 }
 .card-container .card .is-horizontal {

src/client/assets/scss/App.scss

@@ -40,26 +40,26 @@ $border-color: red;
   }
 }
 .card-container {
-  // display: grid;
+  display: grid;
-  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  // column-gap: 0.5em;
+  column-gap: 0.5em;
-  // row-gap: 1.2em;
+  row-gap: 1.2em;
-  //   .card {
-  //     max-width: 200px;
-  //
-  //     .truncate {
-  //       width: 100px;
-  //       white-space: nowrap;
-  //       overflow: hidden;
-  //       text-overflow: ellipsis;
-  //     }
-  //
-  //     img {
-  //       max-width: 200px;
-  //     }
-  // }
   .card {
-    max-width: 500px;
+    max-width: 200px;
+
+    .truncate {
+      width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    img {
+      max-width: 200px;
+    }
+  }
+  .card {
+    max-width: 200px;
     margin: 0 0 15px 0;
     .is-horizontal {
       flex-direction: row;

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[],
+    metadata: IExtractedComicBookCoverFile,
-  ): JSX.Element[] => {
+  ): JSX.Element => {
-    return map(metadata, (item: any, idx: number) => {
+    return (
-      return (
+      <div>
-        <div key={idx}>
+        <div className="card">
-          <div className="card">
+          <div>
-            <div className="is-horizontal">
+            <div className="card-image">
-              <div className="card-image">
+              <figure className="image">
-                <figure className="image">
+                <img
-                  <img
+                  src={
-                    src={
+                    "http://localhost:3000" +
-                      "http://localhost:3000" +
+                    this.removeLeadingPeriod(metadata.path) +
-                      this.removeLeadingPeriod(
+                    "/" +
-                        item.comicBookCoverMetadata.path,
+                    metadata.name
-                      ) +
+                  }
-                      "/" +
+                  alt="Placeholder image"
-                      item.comicBookCoverMetadata.name
+                />
-                    }
+              </figure>
-                    alt="Placeholder image"
+            </div>
-                  />
+            <div className="card-content">
-                </figure>
+              <ul>
-              </div>
+                <li className="has-text-weight-semibold">{metadata.name}</li>
-              <div className="card-content">
+              </ul>
-                <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>
             </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 IProps {
-interface IState {}
+  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">
+          <h2 className="subtitle">Recently Imported</h2>
-            A simple container to divide your page into{" "}
+          {this.props.recentComics ? (
-            <strong>sections</strong>, like the one you're currently reading.
+            <RecentlyImported comicBookCovers={this.props.recentComics} />
-          </h2>
+          ) : (
-          <ZeroState
+            <ZeroState
-            header={"Set the source directory"}
+              header={"Set the source directory"}
-            message={
+              message={
-              "No comics were found! Please point ThreeTwo! to a directory..."
+                "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>
+);

src/client/constants/action-types.ts

@@ -13,3 +13,6 @@ export const IMS_SOCKET_ERROR = "IMS_SOCKET_ERROR";
 
 export const IMS_RAW_IMPORT_SUCCESSFUL = "IMS_RAW_IMPORT_SUCCESSFUL";
 export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
+
+export const IMS_RECENT_COMICS_FETCHED = "IMS_RECENT_COMICS_FETCHED";
+export const IMS_DATA_FETCH_ERROR = "IMS_DATA_FETCH_ERROR";

src/client/reducers/fileops.reducer.ts

@@ -5,6 +5,8 @@ import {
   IMS_SOCKET_ERROR,
   IMS_RAW_IMPORT_SUCCESSFUL,
   IMS_RAW_IMPORT_FAILED,
+  IMS_RECENT_COMICS_FETCHED,
+  IMS_DATA_FETCH_ERROR,
 } from "../constants/action-types";
 const initialState = {
   dataTransferred: false,
@@ -37,6 +39,11 @@ function fileOpsReducer(state = initialState, action) {
         ...state,
         rawImportErorr: action.rawImportError,
       };
+    case IMS_RECENT_COMICS_FETCHED:
+      return {
+        ...state,
+        recentComics: action.data,
+      };
     default:
       return state;
   }