🤼‍♀️ Ability to apply a select ComicVine match first draft

src/client/actions/comicinfo.actions.tsx

@@ -5,6 +5,9 @@ import {
   CV_SEARCH_SUCCESS,
   CV_API_CALL_IN_PROGRESS,
   CV_API_GENERIC_FAILURE,
+  IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED,
+  IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
 } from "../constants/action-types";
 import { COMICBOOKINFO_SERVICE_URI } from "../constants/endpoints";
 
@@ -54,7 +57,44 @@ export const comicinfoAPICall = (options) => async (dispatch) => {
   }
 };
 
-export const applyComicVineMatch = options => async (dispatch) => {
+export const getComicBookDetailById =
-  console.log(options)
+  (comicBookObjectId: string) => async (dispatch) => {
+    dispatch({
+      type: IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
+      IMS_inProgress: true,
+    });
 
-}
+    const result = await axios.request({
+      url: `http://localhost:3000/api/import/getComicBookById`,
+      method: "POST",
+      data: {
+        id: comicBookObjectId,
+      },
+    });
+    dispatch({
+      type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+      comicBookDetail: result.data,
+      IMS_inProgress: false,
+    });
+  };
+
+export const applyComicVineMatch =
+  (match, comicObjectId) => async (dispatch) => {
+    dispatch({
+      type: IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
+      IMS_inProgress: true,
+    });
+    const result = await axios.request({
+      url: "http://localhost:3000/api/import/applyComicVineMetadata",
+      method: "POST",
+      data: {
+        match,
+        comicObjectId,
+      },
+    });
+    dispatch({
+      type: IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+      comicBookDetail: result.data,
+      IMS_inProgress: false,
+    });
+  };

src/client/actions/fileops.actions.tsx

@@ -163,7 +163,7 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
     console.log(error);
   }
 
-  dispatch({
+  // dispatch({
-    type: CV_CLEANUP,
+  //   type: CV_CLEANUP,
-  });
+  // });
 };

src/client/assets/scss/App.scss

@@ -49,10 +49,6 @@ $border-color: red;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  img {
-    max-width: 200px;
-  }
 }
 .card-container {
   display: grid;
@@ -61,8 +57,18 @@ $border-color: red;
   row-gap: 1.2em;
 
   .card {
-    max-width: 500px;
+    // max-width: 500px;
     margin: 0 0 15px 0;
+    .card-image {
+        img {
+          border-top-left-radius: 0.3rem;
+          border-top-right-radius: 0.3rem;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      
+    }
+
     .is-horizontal {
       flex-direction: row;
       display: flex;
@@ -109,16 +115,26 @@ $border-color: red;
   }
 }
 
+// Comic Detail
+
+.comic-detail {
+  dl {
+    dd {
+      margin: 0;
+    }
+  }
+}
+
 // Library
 .library {
   table {
     td {
       border: 0 none;
-     .card {
+      .card {
-       .name {
+        .name {
-         margin: 0 0 4px 0;
+          margin: 0 0 4px 0;
-       }
+        }
-     }
+      }
     }
     tbody {
       padding: 10px 0 0 0;

src/client/components/Card.tsx

@@ -11,6 +11,8 @@ import ellipsize from "ellipsize";
 interface IProps {
   comicBookCoversMetadata: IExtractedComicBookCoverFile;
   mongoObjId?: number;
+  hasTitle: boolean;
+  isHorizontal: boolean;
 }
 interface IState {}
 
@@ -29,21 +31,23 @@ class Card extends React.Component<IProps, IState> {
     return (
       <div>
         <div className="card generic-card">
-          <div>
+          <div className={this.props.isHorizontal ? "is-horizontal" : ""}>
             <div className="card-image">
               <figure className="image">
                 <img src={filePath} alt="Placeholder image" />
               </figure>
             </div>
-            <div className="card-content">
+            {this.props.title && (
-              <ul>
+              <div className="card-content">
-                <Link to={"/comic/details/" + this.props.mongoObjId}>
+                <ul>
-                  <li className="has-text-weight-semibold">
+                  <Link to={"/comic/details/" + this.props.mongoObjId}>
-                    {ellipsize(metadata.name, 18)}
+                    <li className="has-text-weight-semibold">
-                  </li>
+                      {ellipsize(metadata.name, 18)}
-                </Link>
+                    </li>
-              </ul>
+                  </Link>
-            </div>
+                </ul>
+              </div>
+            )}
           </div>
         </div>
       </div>

src/client/components/ComicDetail.tsx

@@ -7,9 +7,10 @@ import ComicVineSearchForm from "./ComicVineSearchForm";
 
 import { css } from "@emotion/react";
 import PuffLoader from "react-spinners/PuffLoader";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty, isUndefined, isNil } from "lodash";
 import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
 import { fetchComicVineMatches } from "../actions/fileops.actions";
+import { getComicBookDetailById } from "../actions/comicinfo.actions";
 import { Drawer, Divider } from "antd";
 const prettyBytes = require("pretty-bytes");
 import "antd/dist/antd.css";
@@ -21,9 +22,6 @@ type ComicDetailProps = {};
 export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
-  const [comicDetail, setComicDetail] = useState<{
-    rawFileDetails: IExtractedComicBookCoverFile;
-  }>();
 
   const comicVineSearchResults = useSelector(
     (state: RootState) => state.comicInfo.searchResults,
@@ -34,29 +32,20 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const comicVineAPICallProgress = useSelector(
     (state: RootState) => state.comicInfo.inProgress,
   );
+  const comicBookDetailData = useSelector(
+    (state: RootState) => state.comicInfo.comicBookDetail,
+  );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const dispatch = useDispatch();
 
   useEffect(() => {
-    axios
+    dispatch(getComicBookDetailById(comicObjectId));
-      .request({
+  }, [page, dispatch]);
-        url: `http://localhost:3000/api/import/getComicBookById`,
-        method: "POST",
-        data: {
-          id: comicObjectId,
-        },
-      })
-      .then((response) => {
-        setComicDetail(response.data);
-      })
-      .catch((error) => console.log(error));
-  }, [page]);
-
-  const dispatch = useDispatch();
 
   const openDrawerWithCVMatches = useCallback(() => {
     setVisible(true);
-    dispatch(fetchComicVineMatches(comicDetail));
+    dispatch(fetchComicVineMatches(comicBookDetailData));
-  }, [dispatch, comicDetail]);
+  }, [dispatch, comicBookDetailData]);
 
   const onClose = () => {
     setVisible(false);
@@ -64,83 +53,153 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
 
   return (
     <section className="container">
-      {!isEmpty(comicDetail) && !isUndefined(comicDetail) && (
+      <div className="section">
-        <>
+        {!isEmpty(comicBookDetailData) && !isUndefined(comicBookDetailData) && (
-          <h1 className="title">{comicDetail.rawFileDetails.name}</h1>
+          <>
-          <div className="columns">
+            <h1 className="title">{comicBookDetailData.rawFileDetails.name}</h1>
-            <div className="column is-narrow">
+            <div className="columns">
-              <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
+              <div className="column is-narrow">
+                <Card
+                  comicBookCoversMetadata={comicBookDetailData.rawFileDetails}
+                  hasTitle={false}
+                  isHorizontal={false}
+                />
+              </div>
+              <div className="column">
+                <div className="content comic-detail">
+                  <dl>
+                    <dt>
+                      <h6> Raw File Details</h6>
+                    </dt>
+                    <dd>{comicBookDetailData.rawFileDetails.containedIn}</dd>
+                    <dd>
+                      {prettyBytes(comicBookDetailData.rawFileDetails.fileSize)}
+                    </dd>
+                    <dd>{comicBookDetailData.rawFileDetails.path}</dd>
+                    <dd>
+                      <span className="tag is-primary">
+                        {comicBookDetailData.rawFileDetails.extension}
+                      </span>
+                    </dd>
+                  </dl>
+                </div>
+                {!isNil(comicBookDetailData.sourcedMetadata.comicvine) && (
+                  <div className="content comic-detail">
+                    <Divider />
+                    <dl>
+                      <dt>
+                        <h6>ComicVine Metadata</h6>
+                      </dt>
+                      <dd>
+                        <h6>
+                          {comicBookDetailData.sourcedMetadata.comicvine.name}
+                        </h6>
+                      </dd>
+                      <dd>
+                        {comicBookDetailData.sourcedMetadata.comicvine.number}
+                      </dd>
+                      <dd>
+                        <div className="field is-grouped is-grouped-multiline">
+                          <div className="control">
+                            <div className="tags has-addons">
+                              <span className="tag is-light">Type</span>
+                              <span className="tag is-warning">
+                                {
+                                  comicBookDetailData.sourcedMetadata.comicvine
+                                    .resource_type
+                                }
+                              </span>
+                            </div>
+                          </div>
+                          <div className="control">
+                            <div className="tags has-addons">
+                              <span className="tag is-light">
+                                ComicVine Issue ID
+                              </span>
+                              <span className="tag is-success">
+                                {
+                                  comicBookDetailData.sourcedMetadata.comicvine
+                                    .id
+                                }
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                )}
+                <button className="button" onClick={openDrawerWithCVMatches}>
+                  <span className="icon">
+                    <i className="fas fa-magic"></i>
+                  </span>
+                  <span>Match on Comic Vine</span>
+                </button>
+              </div>
             </div>
-            <div className="column">
-              <p>{comicDetail.rawFileDetails.containedIn}</p>
-              <p>{prettyBytes(comicDetail.rawFileDetails.fileSize)}</p>
-              <button className="button" onClick={openDrawerWithCVMatches}>
-                <span className="icon">
-                  <i className="fas fa-magic"></i>
-                </span>
-                <span>Match on Comic Vine</span>
-              </button>
-            </div>
-          </div>
 
-          <Drawer
+            <Drawer
-            title="ComicVine Search Results"
+              title="ComicVine Search Results"
-            placement="right"
+              placement="right"
-            width={640}
+              width={640}
-            closable={false}
+              closable={false}
-            onClose={onClose}
+              onClose={onClose}
-            visible={visible}
+              visible={visible}
-            className="comic-vine-match-drawer"
+              className="comic-vine-match-drawer"
-          >
+            >
-            {!isEmpty(comicVineSearchQueryObject) &&
+              {!isEmpty(comicVineSearchQueryObject) &&
-            !isUndefined(comicVineSearchQueryObject) ? (
+              !isUndefined(comicVineSearchQueryObject) ? (
-              <div className="card search-criteria-card">
+                <div className="card search-criteria-card">
-                <div className="card-content">
+                  <div className="card-content">
-                  <ComicVineSearchForm />
+                    <ComicVineSearchForm />
-                  <Divider />
+                    <Divider />
-                  <p className="is-size-6">Searching against:</p>
+                    <p className="is-size-6">Searching against:</p>
-                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="field is-grouped is-grouped-multiline">
-                    <div className="control">
+                      <div className="control">
-                      <div className="tags has-addons">
+                        <div className="tags has-addons">
-                        <span className="tag">Title</span>
+                          <span className="tag">Title</span>
-                        <span className="tag is-info">
+                          <span className="tag is-info">
-                          {
+                            {
-                            comicVineSearchQueryObject.issue.searchParams
+                              comicVineSearchQueryObject.issue.searchParams
-                              .searchTerms.name
+                                .searchTerms.name
-                          }
+                            }
-                        </span>
+                          </span>
+                        </div>
                       </div>
-                    </div>
+                      <div className="control">
-                    <div className="control">
+                        <div className="tags has-addons">
-                      <div className="tags has-addons">
+                          <span className="tag">Number</span>
-                        <span className="tag">Number</span>
+                          <span className="tag is-info">
-                        <span className="tag is-info">
+                            {
-                          {
+                              comicVineSearchQueryObject.issue.searchParams
-                            comicVineSearchQueryObject.issue.searchParams
+                                .searchTerms.number
-                              .searchTerms.number
+                            }
-                          }
+                          </span>
-                        </span>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
+              ) : (
-            ) : (
+                <div className="progress-indicator-container">
-              <div className="progress-indicator-container">
+                  <div className="indicator">
-                <div className="indicator">
+                    <PuffLoader loading={comicVineAPICallProgress} />
-                  <PuffLoader loading={comicVineAPICallProgress} />
+                  </div>
                 </div>
-              </div>
-            )}
-
-            <div className="search-results-container">
-              {!isEmpty(comicVineSearchResults) && (
-                <MatchResult matchData={comicVineSearchResults} />
               )}
-            </div>
+
-          </Drawer>
+              <div className="search-results-container">
-        </>
+                {!isEmpty(comicVineSearchResults) && (
-      )}
+                  <MatchResult
+                    matchData={comicVineSearchResults}
+                    comicObjectId={comicObjectId}
+                  />
+                )}
+              </div>
+            </Drawer>
+          </>
+        )}
+      </div>
     </section>
   );
 };

src/client/components/MatchResult.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useCallback } from "react";
+import React, { useCallback } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { map } from "lodash";
 import { applyComicVineMatch } from "../actions/comicinfo.actions";
 
 interface MatchResultProps {
   matchData: any;
+  comicObjectId: string;
 }
 
 const handleBrokenImage = (e) => {
@@ -14,8 +15,8 @@ const handleBrokenImage = (e) => {
 export const MatchResult = (props: MatchResultProps) => {
   const dispatch = useDispatch();
   const applyCVMatch = useCallback(
-    (match) => {
+    (match, comicObjectId) => {
-      dispatch(applyComicVineMatch(match));
+      dispatch(applyComicVineMatch(match, comicObjectId));
     },
     [dispatch],
   );
@@ -66,7 +67,7 @@ export const MatchResult = (props: MatchResultProps) => {
 
                   <button
                     className="button is-small is-outlined is-primary is-light is-pulled-right"
-                    onClick={() => applyCVMatch(match)}
+                    onClick={() => applyCVMatch(match, props.comicObjectId)}
                   >
                     <span className="icon is-size-5">
                       <i className="fas fa-clipboard-check"></i>

src/client/components/RecentlyImported.tsx

@@ -16,6 +16,7 @@ export const RecentlyImported = ({
           key={idx}
           comicBookCoversMetadata={doc.rawFileDetails}
           mongoObjId={doc._id}
+          title
         />
       );
     })}

src/client/constants/action-types.ts

@@ -17,3 +17,10 @@ export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
 
 export const IMS_RECENT_COMICS_FETCHED = "IMS_RECENT_COMICS_FETCHED";
 export const IMS_DATA_FETCH_ERROR = "IMS_DATA_FETCH_ERROR";
+
+export const IMS_COMIC_BOOK_DB_OBJECT_FETCHED =
+  "IMS_COMIC_BOOK_DB_OBJECT_FETCHED";
+export const IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS =
+  "IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS";
+export const IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED =
+  "IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED";

src/client/constants/endpoints.ts

@@ -1,4 +1,3 @@
-export const COMICBOOKINFO_SERVICE_URI =
+export const COMICBOOKINFO_SERVICE_URI = "http://localhost:3080/api/comicvine/";
-  "http://localhost:6050/api/comicbookinfo/";
 export const API_BASE_URI = "http://localhost:8050/api/";
 export const SOCKET_BASE_URI = "ws://localhost:3000/";

src/client/reducers/comicinfo.reducer.js

@@ -2,11 +2,16 @@ import {
   CV_API_CALL_IN_PROGRESS,
   CV_SEARCH_SUCCESS,
   CV_CLEANUP,
+  IMS_COMIC_BOOK_DB_OBJECT_FETCHED,
+  IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
+  IMS_COMIC_BOOK_DB_OBJECT_CALL_FAILED,
 } from "../constants/action-types";
 const initialState = {
   searchResults: [],
   searchQuery: {},
   inProgress: false,
+  comicBookDetail: {},
+  IMS_inProgress: false,
 };
 
 function comicinfoReducer(state = initialState, action) {
@@ -17,17 +22,29 @@ function comicinfoReducer(state = initialState, action) {
         inProgress: true,
       };
     case CV_SEARCH_SUCCESS:
-      console.log("ASDASD", action)
       return {
         ...state,
         searchResults: action.searchResults,
         searchQuery: action.searchQueryObject,
         inProgress: false,
       };
+    case IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS:
+      return {
+        ...state,
+        IMS_inProgress: true,
+      };
+
+    case IMS_COMIC_BOOK_DB_OBJECT_FETCHED:
+      return {
+        ...state,
+        comicBookDetail: action.comicBookDetail,
+        IMS_inProgress: false,
+      };
     case CV_CLEANUP:
       return {
         searchResults: [],
         searchQuery: {},
+        comicBookDetail: {},
       };
     default:
       return state;