From 53b7e9413571063873eb605be61ba25b125e8c73 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 11 Oct 2021 08:52:39 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fixes=20to=20search=20listing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/LibraryGrid.tsx         |  1 +
 src/client/components/Search.tsx              | 48 ++++++++++++-------
 .../shared/utils/tradepaperback.utils.ts      | 10 ++++
 yarn.lock                                     |  5 --
 4 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/client/components/LibraryGrid.tsx b/src/client/components/LibraryGrid.tsx
index 0df6a98..06b84ba 100644
--- a/src/client/components/LibraryGrid.tsx
+++ b/src/client/components/LibraryGrid.tsx
@@ -16,6 +16,7 @@ import Card from "./Carda";
 import { detectIssueTypes } from "../shared/utils/tradepaperback.utils";
 import { Link } from "react-router-dom";
 
+
 interface ILibraryGridProps {}
 export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
   const data = useSelector(
diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx
index eea457d..01d5587 100644
--- a/src/client/components/Search.tsx
+++ b/src/client/components/Search.tsx
@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { comicinfoAPICall } from "../actions/comicinfo.actions";
 import { search } from "../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
+import Card from "./Carda";
 
 interface ISearchProps {}
 
@@ -43,6 +44,9 @@ export const Search = ({}: ISearchProps): ReactElement => {
   const comicVineSearchResults = useSelector(
     (state: RootState) => state.comicInfo.searchResults,
   );
+  const createDescriptionMarkup = (html) => {
+    return { __html: html };
+  };
 
   return (
     <>
@@ -79,27 +83,39 @@ export const Search = ({}: ISearchProps): ReactElement => {
           />
           {!isNil(comicVineSearchResults.results) &&
           !isEmpty(comicVineSearchResults.results) ? (
-            <>
+            <div>
               {comicVineSearchResults.results.map((result) => {
-                console.log(result)
                 return (
-                  <div key={result.id}>
-                    {result.id} {result.name}
-                    <p>{result.api_detail_url}</p>
-                    <p>{result.description}</p>
-                    <figure>
-                      <img src={result.image.thumb_url} alt="name" />
-                    </figure>
-                    <button
-                      className="button"
-                      onClick={() => addToLibrary(result)}
-                    >
-                      Add to Library
-                    </button>
+                  <div key={result.id} className="columns is-full">
+                    <div className="column is-one-quarter">
+                      <Card
+                        key={result.id}
+                        orientation={"vertical"}
+                        imageUrl={result.image.small_url}
+                        title={result.name}
+                        hasDetails={false}
+                      ></Card>
+                    </div>
+                    <div className="column is-half">
+                      <div className="is-size-4">{result.name}</div>
+                      <span className="tag is-warning">{result.id}</span>
+                      <p>{result.api_detail_url}</p>
+                      <p
+                        dangerouslySetInnerHTML={createDescriptionMarkup(
+                          result.description,
+                        )}
+                      ></p>
+                      <button
+                        className="button is-success is-light is-outlined"
+                        onClick={() => addToLibrary(result)}
+                      >
+                        Add to Library
+                      </button>
+                    </div>
                   </div>
                 );
               })}
-            </>
+            </div>
           ) : (
             <article className="message is-dark is-half">
               <div className="message-body">
diff --git a/src/client/shared/utils/tradepaperback.utils.ts b/src/client/shared/utils/tradepaperback.utils.ts
index d2331a4..a29f45c 100644
--- a/src/client/shared/utils/tradepaperback.utils.ts
+++ b/src/client/shared/utils/tradepaperback.utils.ts
@@ -1,4 +1,5 @@
 import { flatten, compact, map, isEmpty } from "lodash";
+import axios from "axios";
 
 export const detectIssueTypes = (deck: string): any => {
   const issueTypeMatchers = [
@@ -12,6 +13,15 @@ export const detectIssueTypes = (deck: string): any => {
     { regex: [/mini\Wseries/gim], displayName: "Mini-Series" },
   ];
 
+  // const issueNames = await axios.request({
+  //   url: "http://localhost:3000/api/import/scrapeIssueNamesFromDOM",
+  //   method: "POST",
+  //   data: {
+  //     html: deck,
+  //   },
+  // });
+  // console.log(deck);
+  // console.log("DOM", issueNames);
   const matches = map(issueTypeMatchers, (matcher) => {
     return getIssueTypeDisplayName(deck, matcher.regex, matcher.displayName);
   });
diff --git a/yarn.lock b/yarn.lock
index 6fdb5da..801e87f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5908,11 +5908,6 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
   integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
 
-fontawesome-free@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.1.tgz#16b704143258a355b63978d38a83d3bbcf9fcd35"
-  integrity sha512-pmjY7xTuHSx4FRSHb9KuKEdJKdpCiGiXFykNPkYdPh5bVHIsQc1d7+YeAl9abIG95SSz2JTq+6+lyhojeEEr1A==
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"