🧪 Starting the matching algo

src/client/components/ComicDetail.tsx

@@ -4,13 +4,14 @@ import axios from "axios";
 import Card from "./Card";
 import MatchResult from "./MatchResult";
 import ComicVineSearchForm from "./ComicVineSearchForm";
-import { Divider } from "antd";
+
 import { css } from "@emotion/react";
 import PuffLoader from "react-spinners/PuffLoader";
 import { isEmpty, isUndefined } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
-import { Drawer } from "antd";
+import { Drawer, Divider } from "antd";
+const prettyBytes = require("pretty-bytes");
 import "antd/dist/antd.css";
 
 import { useDispatch, useSelector } from "react-redux";
@@ -72,7 +73,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
             </div>
             <div className="column">
               <p>{comicDetail.rawFileDetails.containedIn}</p>
-              <p>{comicDetail.rawFileDetails.fileSize}</p>
+              <p>{prettyBytes(comicDetail.rawFileDetails.fileSize)}</p>
               <button className="button" onClick={openDrawerWithCVMatches}>
                 <span className="icon">
                   <i className="fas fa-magic"></i>

src/client/components/ComicVineSearchForm.tsx

@@ -71,8 +71,14 @@ export const ComicVineSearchForm = () => {
             <div className="field-body">
               <div className="field">
                 <div className="control">
-                  <button type="submit" className="button is-info is-small">
-                    Apply Criteria
+                  <button
+                    type="submit"
+                    className="button is-info is-light is-outlined is-small"
+                  >
+                    <span className="icon">
+                      <i className="fas fa-hand-sparkles"></i>
+                    </span>
+                    <span>Search</span>
                   </button>
                 </div>
               </div>
@@ -85,7 +91,7 @@ export const ComicVineSearchForm = () => {
 
   return (
     <Collapsible
-      trigger={"Search Manually"}
+      trigger={"Match Manually"}
       triggerTagName="a"
       triggerClassName={"is-size-6"}
       triggerOpenedClassName={"is-size-6"}

src/client/components/Dashboard.tsx

@@ -55,7 +55,7 @@ const mapDispatchToProps = (dispatch) => ({
       getRecentlyImportedComicBooks({
         paginationOptions: {
           page: 0,
-          limit: 5,
+          limit: 17,
         },
       }),
     );

src/client/components/MatchResult.tsx

@@ -6,10 +6,6 @@ interface MatchResultProps {
 }
 
 export const MatchResult = (props: MatchResultProps) => {
-  useEffect(() => {
-    console.log("match", props.matchData);
-  }, [props.matchData]);
-
   return (
     <>
       <table>
@@ -26,8 +22,12 @@ export const MatchResult = (props: MatchResultProps) => {
                   <img className="cover-image" src={match.image.thumb_url} />
                 </td>
                 <td className="search-result-details">
+                  <div className="tag score is-primary is-medium is-pulled-right">
+                    {parseFloat(match.score).toFixed(2)}
+                  </div>
                   <div className="is-size-5">{match.name}</div>
                   <div className="is-size-6">{match.volume.name}</div>
+
                   <div className="field is-grouped is-grouped-multiline">
                     <div className="control">
                       <div className="tags has-addons">