🔎 CV search results prettification

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",
       }),

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(

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

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,10 +89,14 @@ 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
+                    key={result.id}
+                    className="comicvine-metadata column is-10 mb-3"
+                  >
+                    <div className="columns">
                       <div className="column is-one-quarter">
                         <Card
                           key={result.id}
@@ -98,23 +106,55 @@ export const Search = ({}: ISearchProps): ReactElement => {
                           hasDetails={false}
                         ></Card>
                       </div>
-                    <div className="column is-half">
+                      <div className="column">
-                      <div className="is-size-4">{result.name}</div>
+                        <div className="is-size-3">
-                      <span className="tag is-warning">{result.id}</span>
+                          {!isEmpty(result.name) ? (
-                      <p>{result.api_detail_url}</p>
+                            result.name
-                      <p
+                          ) : (
-                        dangerouslySetInnerHTML={createDescriptionMarkup(
+                            <span className="is-size-3">No Name</span>
-                          result.description,
                           )}
-                      ></p>
+                        </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"
+                          className="button is-success is-light is-outlined mt-2"
                           onClick={() => addToLibrary("comicvine", result)}
                         >
-                        Add to Library
+                          <i className="fa-solid fa-plus mr-2"></i> Add to Library
                         </button>
                       </div>
                     </div>
+                  </div>
                 );
               })}
             </div>