From 2184b20887c305b924909147856cf36fd9bec569 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 18 Aug 2021 22:16:15 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Ability=20to=20import=20CV=20sea?=
 =?UTF-8?q?rch=20result=20into=20mongo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/fileops.actions.tsx     |  18 ++--
 src/client/components/Card.tsx             |   2 +-
 src/client/components/Library.tsx          | 110 ++++++++++++++-------
 src/client/components/RecentlyImported.tsx |  11 ++-
 src/client/components/Search.tsx           |   3 +-
 5 files changed, 92 insertions(+), 52 deletions(-)

diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx
index b60629d..31040bc 100644
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -112,18 +112,16 @@ export const getComicBooks = (options) => async (dispatch) => {
 
 export const importToDB = (payload) => (dispatch) => {
   try {
-    const comicBookMetadata = extend(
-      {
-        importStatus: {
-          isImported: true,
-          tagged: false,
-          matchedResult: {
-            score: "0",
-          },
+    const comicBookMetadata = {
+      importStatus: {
+        isImported: true,
+        tagged: false,
+        matchedResult: {
+          score: "0",
         },
       },
-      { sourcedMetadata: { comicvine: payload } },
-    );
+      sourcedMetadata: { comicvine: payload },
+    };
     dispatch({
       type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
     });
diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx
index cfecbc6..80f7935 100644
--- a/src/client/components/Card.tsx
+++ b/src/client/components/Card.tsx
@@ -38,7 +38,7 @@ class Card extends React.Component<IProps, IState> {
                 <img src={filePath} alt="Placeholder image" />
               </figure>
             </div>
-            {this.props.title && (
+            {this.props.hasTitle && (
               <div className="card-content">
                 <ul>
                   <Link to={"/comic/details/" + this.props.mongoObjId}>
diff --git a/src/client/components/Library.tsx b/src/client/components/Library.tsx
index 93f106f..9cc3ae5 100644
--- a/src/client/components/Library.tsx
+++ b/src/client/components/Library.tsx
@@ -36,43 +36,79 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
   };
   // raw file details
   const RawFileDetails = ({ value }) => {
-    const encodedFilePath = encodeURI(
-      "http://localhost:3000" + removeLeadingPeriod(value.path),
-    );
-    const filePath = escapePoundSymbol(encodedFilePath);
-    return (
-      <div className="card-container">
-        <div className="card">
-          <div className="is-horizontal">
-            <div className="card-image">
-              <figure>
-                <img className="image" src={filePath} />
-              </figure>
-            </div>
-            <ul className="card-content">
-              <li className="name has-text-weight-medium">
-                {ellipsize(value.name, 18)}
-              </li>
-              <li>
-                <div className="control">
-                  <div className="tags has-addons">
-                    <span className="tag is-primary is-light">
-                      {value.extension}
-                    </span>
-                    <span className="tag is-info is-light">
-                      {prettyBytes(value.fileSize)}
-                    </span>
+    if (!isNil(value.path)) {
+      const encodedFilePath = encodeURI(
+        "http://localhost:3000" + removeLeadingPeriod(value.path),
+      );
+      const filePath = escapePoundSymbol(encodedFilePath);
+      return (
+        <div className="card-container">
+          <div className="card">
+            <div className="is-horizontal">
+              <div className="card-image">
+                <figure>
+                  <img className="image" src={filePath} />
+                </figure>
+              </div>
+              <ul className="card-content">
+                <li className="name has-text-weight-medium">
+                  {ellipsize(value.name, 18)}
+                </li>
+                <li>
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag is-primary is-light">
+                        {value.extension}
+                      </span>
+                      <span className="tag is-info is-light">
+                        {prettyBytes(value.fileSize)}
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </li>
-            </ul>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-    );
+      );
+    } else if (!isNil(value.comicvine)) {
+      return (
+        <div className="card-container">
+          <div className="card">
+            <div className="is-horizontal">
+              <div className="card-image">
+                <figure>
+                  <img
+                    className="image"
+                    src={value.comicvine.image.thumb_url}
+                  />
+                </figure>
+              </div>
+              <ul className="card-content">
+                <li className="name has-text-weight-medium">
+                  {ellipsize(value.name, 18)}
+                </li>
+                <li>
+                  <div className="control">
+                    <div className="tags has-addons">
+                      <span className="tag is-primary is-light">
+                        ComicVine ID
+                      </span>
+                      <span className="tag is-info is-light">
+                        {value.comicvine.id}
+                      </span>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      );
+    }
   };
   const ImportStatus = ({ value }) => {
-    return `${value.toString()}` ? (
+    return value ? (
       <span className="tag is-info is-light">Imported</span>
     ) : (
       "Not Imported"
@@ -86,7 +122,11 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
         columns: [
           {
             Header: "File Details",
-            accessor: "rawFileDetails",
+            id: "fileDetails",
+            accessor: (row) =>
+              !isNil(row.rawFileDetails)
+                ? row.rawFileDetails
+                : row.sourcedMetadata,
             Cell: RawFileDetails,
           },
           {
@@ -301,7 +341,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
                 <p className="control">
                   <button
                     className="button"
-                    onClick={() => gotoPage(0)}
+                    onClick={() => gotoPage(1)}
                     disabled={!canPreviousPage}
                   >
                     <i className="fas fa-angle-double-left"></i>
@@ -310,7 +350,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
                 <p className="control">
                   <button
                     className="button"
-                    onClick={() => gotoPage(pageCount - 1)}
+                    onClick={() => gotoPage(Math.ceil(pageTotal / pageSize))}
                     disabled={!canNextPage}
                   >
                     <i className="fas fa-angle-double-right"></i>
diff --git a/src/client/components/RecentlyImported.tsx b/src/client/components/RecentlyImported.tsx
index 2b61cba..cb2f6b9 100644
--- a/src/client/components/RecentlyImported.tsx
+++ b/src/client/components/RecentlyImported.tsx
@@ -10,13 +10,14 @@ export const RecentlyImported = ({
   comicBookCovers,
 }: RecentlyImportedProps) => (
   <section className="card-container">
-    {map(comicBookCovers.docs, (doc, idx) => {
+    {map(comicBookCovers.docs, ({ _id, rawFileDetails }) => {
       return (
         <Card
-          key={idx}
-          comicBookCoversMetadata={doc.rawFileDetails}
-          mongoObjId={doc._id}
-          title
+          key={_id}
+          comicBookCoversMetadata={rawFileDetails}
+          mongoObjId={_id}
+          hasTitle
+          isHorizontal={false}
         />
       );
     })}
diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx
index 04cfd77..e5b4a99 100644
--- a/src/client/components/Search.tsx
+++ b/src/client/components/Search.tsx
@@ -26,7 +26,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
             format: "json",
             limit: "10",
             offset: "0",
-            field_list: "id,name,deck,api_detail_url,image,description",
+            field_list: "id,name,deck,api_detail_url,image,description,volume",
             resources: "issue",
           },
         }),
@@ -97,6 +97,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
           !isEmpty(comicVineSearchResults.results) ? (
             <>
               {comicVineSearchResults.results.map((result) => {
+                console.log(result)
                 return (
                   <div key={result.id}>
                     {result.id} {result.name}