🏗 Scaffold for CV metadata import

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)
+
+}

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">

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>
             );