From aeb6e5225ddfa298d4b8f177f9274d98169f55e2 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 1 Jun 2022 23:17:53 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20CV=20search=20results=20prettifi?=
 =?UTF-8?q?cation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Dashboard/PullList.tsx  |  2 +-
 .../components/Dashboard/RecentlyImported.tsx |  9 ++
 src/client/components/MatchResult.tsx         |  2 +-
 src/client/components/Search.tsx              | 94 +++++++++++++------
 4 files changed, 78 insertions(+), 29 deletions(-)

diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index 249ad25..7377ad3 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   useEffect(() => {
     dispatch(
       getWeeklyPullList({
-        startDate: "2022-2-11",
+        startDate: "2022-6-1",
         pageSize: "15",
         currentPage: "1",
       }),
diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx
index 8e0e619..3539736 100644
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -95,6 +95,15 @@ export const RecentlyImported = ({
                         />
                       </span>
                     )}
+                    {/* ComicVine metadata presence */}
+                    {isComicBookMetadataAvailable && (
+                      <span className="icon custom-icon">
+                        <img
+                          src="/img/cvlogo.svg"
+                          alt={"ComicInfo.xml file detected."}
+                        />
+                      </span>
+                    )}
                     {/* Issue type */}
                     {isComicBookMetadataAvailable &&
                     !isNil(
diff --git a/src/client/components/MatchResult.tsx b/src/client/components/MatchResult.tsx
index 16f4a3c..32f11e3 100644
--- a/src/client/components/MatchResult.tsx
+++ b/src/client/components/MatchResult.tsx
@@ -34,7 +34,7 @@ export const MatchResult = (props: MatchResultProps) => {
           });
         }
         return (
-          <div className="search-result mb-4">
+          <div className="search-result mb-4" key={idx}>
             <div className="columns">
               <div className="column is-one-fifth">
                 <img
diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx
index 2587361..01de9dc 100644
--- a/src/client/components/Search.tsx
+++ b/src/client/components/Search.tsx
@@ -7,6 +7,9 @@ import { comicinfoAPICall } from "../actions/comicinfo.actions";
 import { search } from "../services/api/SearchApi";
 import { Form, Field } from "react-final-form";
 import Card from "./Carda";
+import ellipsize from "ellipsize";
+import { convert } from "html-to-text";
+import dayjs from "dayjs";
 
 interface ISearchProps {}
 
@@ -27,7 +30,8 @@ export const Search = ({}: ISearchProps): ReactElement => {
             format: "json",
             limit: "10",
             offset: "0",
-            field_list: "id,name,deck,api_detail_url,image,description,volume",
+            field_list:
+              "id,name,deck,api_detail_url,image,description,volume,cover_date",
             resources: "issue",
           },
         }),
@@ -85,34 +89,70 @@ export const Search = ({}: ISearchProps): ReactElement => {
           />
           {!isNil(comicVineSearchResults.results) &&
           !isEmpty(comicVineSearchResults.results) ? (
-            <div>
+            <div className="columns is-multiline">
               {comicVineSearchResults.results.map((result) => {
                 return (
-                  <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("comicvine", result)}
-                      >
-                        Add to Library
-                      </button>
+                  <div
+                    key={result.id}
+                    className="comicvine-metadata column is-10 mb-3"
+                  >
+                    <div className="columns">
+                      <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">
+                        <div className="is-size-3">
+                          {!isEmpty(result.name) ? (
+                            result.name
+                          ) : (
+                            <span className="is-size-3">No Name</span>
+                          )}
+                        </div>
+                        <div className="field is-grouped mt-1">
+                          <div className="control">
+                            <div className="tags has-addons">
+                              <span className="tag is-light">Cover date</span>
+                              <span className="tag is-info is-light">
+                                {dayjs(result.cover_date).format("MMM D, YYYY")}
+                              </span>
+                            </div>
+                          </div>
+
+                          <div className="control">
+                            <div className="tags has-addons">
+                              <span className="tag is-warning">
+                                {result.id}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+
+                        <a href={result.api_detail_url}>
+                          {result.api_detail_url}
+                        </a>
+                        <p>
+                          {ellipsize(
+                            convert(result.description, {
+                              baseElements: {
+                                selectors: ["p"],
+                              },
+                            }),
+                            320,
+                          )}
+                        </p>
+                        <button
+                          className="button is-success is-light is-outlined mt-2"
+                          onClick={() => addToLibrary("comicvine", result)}
+                        >
+                          <i className="fa-solid fa-plus mr-2"></i> Add to Library
+                        </button>
+                      </div>
                     </div>
                   </div>
                 );