🎮 Wiring up ComicVine API match call

package.json

@@ -41,7 +41,7 @@
     "react-window-dynamic-list": "^2.3.5",
     "sharp": "^0.28.1",
     "socket.io-client": "^4.1.2",
-    "threetwo-ui-typings": "^1.0.1-0"
+    "threetwo-ui-typings": "^1.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.10",

src/client/actions/fileops.actions.tsx

@@ -7,6 +7,7 @@ import {
   IMS_SOCKET_CONNECTION_CONNECTED,
   IMS_RECENT_COMICS_FETCHED,
 } from "../constants/action-types";
+import { tokenize } from "../shared/utils/nlp.utils";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
@@ -25,7 +26,8 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
     .catch((error) => error);
 }
 /**
- * Renders an entire login page with email and password fields
+ * Fetches comic book covers along with some metadata
+ *
  * using {@link Renderer}.
  *
  * Used by external plugins
@@ -97,3 +99,7 @@ export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
       });
     });
 };
+
+export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => {
+  console.log(searchPayload);
+};

src/client/components/ComicDetail.tsx

@@ -4,6 +4,7 @@ import axios from "axios";
 import Card from "./Card";
 import { isEmpty, isUndefined } from "lodash";
 import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
+import { fetchComicVineMatches } from "../actions/fileops.actions";
 type ComicDetailProps = {};
 
 export const ComicDetail = ({}: ComicDetailProps) => {
@@ -35,7 +36,24 @@ export const ComicDetail = ({}: ComicDetailProps) => {
       {!isEmpty(comicDetail) && !isUndefined(comicDetail) && (
         <>
           <h1 className="title">{comicDetail.rawFileDetails.name}</h1>
-          <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
+          <div className="columns">
+            <div className="column is-narrow">
+              <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
+            </div>
+            <div className="column">
+              <button
+                className="button"
+                onClick={fetchComicVineMatches(comicDetail, {
+                  bastard: "fucking guy",
+                })}
+              >
+                <span className="icon">
+                  <i className="fas fa-magic"></i>
+                </span>
+                <span>Match on Comic Vine</span>
+              </button>
+            </div>
+          </div>
         </>
       )}
     </section>

src/client/components/Dashboard.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { getRecentlyImportedComicBooks } from "../actions/fileops.actions";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty } from "lodash";
 
 interface IProps {
   getRecentComics: Function;
@@ -22,9 +22,13 @@ class Dashboard extends React.Component<IProps, IState> {
       <div className="container">
         <section className="section">
           <h1 className="title">Dashboard</h1>
-          <h2 className="subtitle">Recently Imported</h2>
+
-          {this.props.recentComics ? (
+          {!isEmpty(this.props.recentComics) &&
-            <RecentlyImported comicBookCovers={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"}
@@ -40,7 +44,6 @@ class Dashboard extends React.Component<IProps, IState> {
 }
 
 function mapStateToProps(state: IState) {
-  console.log("state", state);
   return {
     recentComics: state.fileOps.recentComics,
   };