🔧 Ability to import CV search result into mongo

src/client/actions/fileops.actions.tsx

@@ -112,8 +112,7 @@ export const getComicBooks = (options) => async (dispatch) => {
 
 export const importToDB = (payload) => (dispatch) => {
   try {
-    const comicBookMetadata = extend(
+    const comicBookMetadata = {
-      {
       importStatus: {
         isImported: true,
         tagged: false,
@@ -121,9 +120,8 @@ export const importToDB = (payload) => (dispatch) => {
           score: "0",
         },
       },
-      },
+      sourcedMetadata: { comicvine: payload },
-      { sourcedMetadata: { comicvine: payload } },
+    };
-    );
     dispatch({
       type: IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
     });

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

src/client/components/Library.tsx

@@ -36,6 +36,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
   };
   // raw file details
   const RawFileDetails = ({ value }) => {
+    if (!isNil(value.path)) {
       const encodedFilePath = encodeURI(
         "http://localhost:3000" + removeLeadingPeriod(value.path),
       );
@@ -70,9 +71,44 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
           </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>

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}
+          key={_id}
-          comicBookCoversMetadata={doc.rawFileDetails}
+          comicBookCoversMetadata={rawFileDetails}
-          mongoObjId={doc._id}
+          mongoObjId={_id}
-          title
+          hasTitle
+          isHorizontal={false}
         />
       );
     })}

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}