🔧 Fixes to search listing

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(

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

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

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"