From cc317196bae28cf4ec80e4417a4428e80fd37a64 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Sat, 1 Jan 2022 17:00:26 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Formatting=20the=20new=20volume?=
 =?UTF-8?q?=20matches=20we=20get=20in=20CV-scraped=20results?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/fileops.actions.tsx |  14 ++-
 src/client/assets/scss/App.scss        |  33 +++---
 src/client/components/MatchResult.tsx  | 133 +++++++++++++++----------
 3 files changed, 112 insertions(+), 68 deletions(-)

diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx
index cb5c74a..536aa5b 100644
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -22,6 +22,7 @@ import {
 import { refineQuery } from "../shared/utils/filenameparser.utils";
 import sortBy from "array-sort-by";
 import { success } from "react-notification-system-redux";
+import { isNil } from "lodash";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
@@ -187,9 +188,20 @@ export const fetchComicVineMatches =
           },
         })
         .then((response) => {
+          console.log(response);
+          let matches: any = [];
+          if (
+            !isNil(response.data.results) &&
+            response.data.results.length === 1
+          ) {
+            matches = response.data.results;
+          } else {
+            matches = response.data.map((match) => match);
+          }
+          console.log(matches);
           dispatch({
             type: CV_SEARCH_SUCCESS,
-            searchResults: response.data.results,
+            searchResults: matches,
             searchQueryObject: {
               issue: issueSearchQuery,
               series: seriesSearchQuery,
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index b08d57f..d87ca12 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -344,30 +344,35 @@ $size-8: 0.9rem;
   margin: 15px 0 0 0;
   overflow: hidden;
 
-  table {
-    width: 100%;
-    tbody tr:nth-child(odd) {
-      background: #f6f6f6;
-      border-radius: 5px;
-    }
-  }
-
   .search-result {
-    display: flex;
-    flex-direction: row;
-    padding: 10px;
     margin: 0 0 10px 0;
-
     .cover-image {
       border-radius: 5px;
     }
     .search-result-details {
-      width: 100%;
+      
+
       .score {
         float: right;
       }
-      margin-left: 10px;
     }
+    .volume-information {
+      margin-top: -2em;
+      width: 80%;
+      background: $white-ter;
+      border-radius: 10px;
+    }
+    .vertical-line {
+      position: relative;
+      top: -10px;
+      border: 1px solid #CCC;
+      width:20px;
+      height:25px;
+      
+    border-color: transparent transparent #999 #999;
+      border-bottom-left-radius: 10px;
+  }
+  
   }
 }
 
diff --git a/src/client/components/MatchResult.tsx b/src/client/components/MatchResult.tsx
index bcc613c..811eae5 100644
--- a/src/client/components/MatchResult.tsx
+++ b/src/client/components/MatchResult.tsx
@@ -13,6 +13,7 @@ const handleBrokenImage = (e) => {
 };
 
 export const MatchResult = (props: MatchResultProps) => {
+  console.log(props);
   const dispatch = useDispatch();
   const applyCVMatch = useCallback(
     (match, comicObjectId) => {
@@ -22,64 +23,90 @@ export const MatchResult = (props: MatchResultProps) => {
   );
   return (
     <>
-      <table>
-        <thead>
-          <tr>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          {map(props.matchData, (match, idx) => {
-            return (
-              <tr className="search-result" key={idx}>
-                <td>
-                  <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">
-                    {parseFloat(match.score).toFixed(2)}
-                  </div>
-                  <div className="is-size-5">{match.name}</div>
-                  <div className="is-size-6">{match.volume.name}</div>
+      {map(props.matchData, (match, idx) => {
+        return (
+          <div className="search-result">
+            <div className="columns">
+              <div className="column is-one-fifth">
+                <img
+                  className="cover-image"
+                  src={match.image.thumb_url}
+                  onError={handleBrokenImage}
+                />
+              </div>
 
-                  <div className="field is-grouped is-grouped-multiline">
-                    <div className="control">
-                      <div className="tags has-addons">
-                        <span className="tag">Number</span>
-                        <span className="tag is-primary">
-                          {match.issue_number}
-                        </span>
-                      </div>
+              <div className="search-result-details column">
+                
+                <div className="is-size-5">{match.name}</div>
+
+                <div className="field is-grouped is-grouped-multiline mt-1">
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Number</span>
+                      <span className="tag is-primary">
+                        {match.issue_number}
+                      </span>
                     </div>
-                    <div className="control">
-                      <div className="tags has-addons">
-                        <span className="tag">Type</span>
-                        <span className="tag is-warning">
-                          {match.resource_type}
-                        </span>
-                      </div>
+                  </div>
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Cover Date</span>
+                      <span className="tag is-warning">{match.cover_date}</span>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  className="button mt-6 is-small is-outlined is-primary is-light is-pulled-right"
+                  onClick={() => applyCVMatch(match, props.comicObjectId)}
+                >
+                  <span className="icon is-size-5">
+                    <i className="fas fa-clipboard-check"></i>
+                  </span>
+                  <span>Apply Match</span>
+                </button>
+              </div>
+            </div>
+
+            <div className="vertical-line"></div>
+
+            <div className="columns ml-5 volume-information">
+              <div className="column is-one-fifth">
+                <img
+                  src={match.volumeInformation.results.image.icon_url}
+                  className="cover-image"
+                  onError={handleBrokenImage}
+                />
+              </div>
+
+              <div className="column">
+              <div className="is-size-6">{match.volume.name}</div>
+                <div className="field is-grouped is-grouped-multiline mt-2">
+                  
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Total Issues</span>
+                      <span className="tag is-warning">
+                        {match.volumeInformation.results.count_of_issues}
+                      </span>
                     </div>
                   </div>
 
-                  <button
-                    className="button is-small is-outlined is-primary is-light is-pulled-right"
-                    onClick={() => applyCVMatch(match, props.comicObjectId)}
-                  >
-                    <span className="icon is-size-5">
-                      <i className="fas fa-clipboard-check"></i>
-                    </span>
-                    <span>Apply Match</span>
-                  </button>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag">Publisher</span>
+                      <span className="tag is-warning">
+                        {match.volumeInformation.results.publisher.name}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                
+              </div>
+            </div>
+          </div>
+        );
+      })}
     </>
   );
 };