🤼‍♀️ 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,6 +115,16 @@ $border-color: red;
   }
 }
 
+// Comic Detail
+
+.comic-detail {
+  dl {
+    dd {
+      margin: 0;
+    }
+  }
+}
+
 // Library
 .library {
   table {

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,12 +31,13 @@ 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>
+            {this.props.title && (
               <div className="card-content">
                 <ul>
                   <Link to={"/comic/details/" + this.props.mongoObjId}>
@@ -44,6 +47,7 @@ class Card extends React.Component<IProps, IState> {
                   </Link>
                 </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,16 +53,82 @@ 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>
+            <h1 className="title">{comicBookDetailData.rawFileDetails.name}</h1>
             <div className="columns">
               <div className="column is-narrow">
-              <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
+                <Card
+                  comicBookCoversMetadata={comicBookDetailData.rawFileDetails}
+                  hasTitle={false}
+                  isHorizontal={false}
+                />
               </div>
               <div className="column">
-              <p>{comicDetail.rawFileDetails.containedIn}</p>
+                <div className="content comic-detail">
-              <p>{prettyBytes(comicDetail.rawFileDetails.fileSize)}</p>
+                  <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>
@@ -135,12 +190,16 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
 
               <div className="search-results-container">
                 {!isEmpty(comicVineSearchResults) && (
-                <MatchResult matchData={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;