From 8df48ea6ae771105fefc5b3a33c4c375d53c0d30 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Thu, 5 Aug 2021 09:17:56 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20Scaffold=20for=20CV=20metadata?=
 =?UTF-8?q?=20import?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/comicinfo.actions.tsx |  5 ++++
 src/client/components/Library.tsx        |  5 +++-
 src/client/components/MatchResult.tsx    | 31 ++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx
index b93433e..7d196da 100644
--- a/src/client/actions/comicinfo.actions.tsx
+++ b/src/client/actions/comicinfo.actions.tsx
@@ -53,3 +53,8 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
     });
   }
 };
+
+export const applyComicVineMatch = options => async (dispatch) => {
+  console.log(options)
+
+}
diff --git a/src/client/components/Library.tsx b/src/client/components/Library.tsx
index 8f3899e..27f0a4c 100644
--- a/src/client/components/Library.tsx
+++ b/src/client/components/Library.tsx
@@ -23,6 +23,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
   const data = useSelector(
     (state: RootState) => state.fileOps.recentComics.docs,
   );
+
   const columns = useMemo(
     () => [
       {
@@ -48,7 +49,9 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
                         </figure>
                       </div>
                       <ul className="card-content">
-                        <li className="name has-text-weight-medium">{ellipsize(props.cell.value.name, 18)}</li>
+                        <li className="name has-text-weight-medium">
+                          {ellipsize(props.cell.value.name, 18)}
+                        </li>
                         <li>
                           <div className="control">
                             <div className="tags has-addons">
diff --git a/src/client/components/MatchResult.tsx b/src/client/components/MatchResult.tsx
index 4ca2871..8f0a5f4 100644
--- a/src/client/components/MatchResult.tsx
+++ b/src/client/components/MatchResult.tsx
@@ -1,11 +1,24 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
+import { useDispatch } from "react-redux";
 import { map } from "lodash";
+import { applyComicVineMatch } from "../actions/comicinfo.actions";
 
 interface MatchResultProps {
   matchData: any;
 }
 
+const handleBrokenImage = (e) => {
+  e.target.src = "http://localhost:3050/dist/img/noimage.svg";
+};
+
 export const MatchResult = (props: MatchResultProps) => {
+  const dispatch = useDispatch();
+  const applyCVMatch = useCallback(
+    (match) => {
+      dispatch(applyComicVineMatch(match));
+    },
+    [dispatch],
+  );
   return (
     <>
       <table>
@@ -19,7 +32,11 @@ export const MatchResult = (props: MatchResultProps) => {
             return (
               <tr className="search-result" key={idx}>
                 <td>
-                  <img className="cover-image" src={match.image.thumb_url} />
+                  <img
+                    className="cover-image"
+                    src={match.image.thumb_url}
+                    onError={handleBrokenImage}
+                  />
                 </td>
                 <td className="search-result-details">
                   <div className="tag score is-primary is-medium is-pulled-right">
@@ -46,6 +63,16 @@ export const MatchResult = (props: MatchResultProps) => {
                       </div>
                     </div>
                   </div>
+
+                  <button
+                    className="button is-small is-outlined is-primary is-light is-pulled-right"
+                    onClick={() => applyCVMatch(match)}
+                  >
+                    <span className="icon is-size-5">
+                      <i className="fas fa-clipboard-check"></i>
+                    </span>
+                    <span>Apply Match</span>
+                  </button>
                 </td>
               </tr>
             );