From b2fb21146dae3686958c92db9a454f93d6ac8d04 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Fri, 6 Aug 2021 13:43:42 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=BC=E2=80=8D=E2=99=80=EF=B8=8F=20Abili?= =?UTF-8?q?ty=20to=20apply=20a=20select=20ComicVine=20match=20first=20draf?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/comicinfo.actions.tsx | 46 +++- src/client/actions/fileops.actions.tsx | 6 +- src/client/assets/scss/App.scss | 36 +++- src/client/components/Card.tsx | 24 ++- src/client/components/ComicDetail.tsx | 237 +++++++++++++-------- src/client/components/MatchResult.tsx | 11 +- src/client/components/RecentlyImported.tsx | 1 + src/client/constants/action-types.ts | 7 + src/client/constants/endpoints.ts | 3 +- src/client/reducers/comicinfo.reducer.js | 19 +- 10 files changed, 267 insertions(+), 123 deletions(-) diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx index 7d196da..09f70e1 100644 --- a/src/client/actions/comicinfo.actions.tsx +++ b/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) => { - console.log(options) +export const getComicBookDetailById = + (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, + }); + }; diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 746505e..0da8bd9 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -163,7 +163,7 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => { console.log(error); } - dispatch({ - type: CV_CLEANUP, - }); + // dispatch({ + // type: CV_CLEANUP, + // }); }; diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 6387238..de26139 100644 --- a/src/client/assets/scss/App.scss +++ b/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 { - .name { - margin: 0 0 4px 0; - } - } + .card { + .name { + margin: 0 0 4px 0; + } + } } tbody { padding: 10px 0 0 0; diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx index 6921fc9..b9360a3 100644 --- a/src/client/components/Card.tsx +++ b/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 { return (
-
+
Placeholder image
-
-
    - -
  • - {ellipsize(metadata.name, 18)} -
    • - -
-
+ {this.props.title && ( +
+
    + +
  • + {ellipsize(metadata.name, 18)} +
    • + +
+
+ )}
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 2b50fe5..684011c 100644 --- a/src/client/components/ComicDetail.tsx +++ b/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 - .request({ - 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(); + dispatch(getComicBookDetailById(comicObjectId)); + }, [page, dispatch]); const openDrawerWithCVMatches = useCallback(() => { setVisible(true); - dispatch(fetchComicVineMatches(comicDetail)); - }, [dispatch, comicDetail]); + dispatch(fetchComicVineMatches(comicBookDetailData)); + }, [dispatch, comicBookDetailData]); const onClose = () => { setVisible(false); @@ -64,83 +53,153 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { return (
- {!isEmpty(comicDetail) && !isUndefined(comicDetail) && ( - <> -

{comicDetail.rawFileDetails.name}

-
-
- +
+ {!isEmpty(comicBookDetailData) && !isUndefined(comicBookDetailData) && ( + <> +

{comicBookDetailData.rawFileDetails.name}

+
+
+ +
+
+
+
+
+
Raw File Details
+
+
{comicBookDetailData.rawFileDetails.containedIn}
+
+ {prettyBytes(comicBookDetailData.rawFileDetails.fileSize)} +
+
{comicBookDetailData.rawFileDetails.path}
+
+ + {comicBookDetailData.rawFileDetails.extension} + +
+
+
+ {!isNil(comicBookDetailData.sourcedMetadata.comicvine) && ( +
+ +
+
+
ComicVine Metadata
+
+
+
+ {comicBookDetailData.sourcedMetadata.comicvine.name} +
+
+
+ {comicBookDetailData.sourcedMetadata.comicvine.number} +
+
+
+
+
+ Type + + { + comicBookDetailData.sourcedMetadata.comicvine + .resource_type + } + +
+
+
+
+ + ComicVine Issue ID + + + { + comicBookDetailData.sourcedMetadata.comicvine + .id + } + +
+
+
+
+
+
+ )} + +
-
-

{comicDetail.rawFileDetails.containedIn}

-

{prettyBytes(comicDetail.rawFileDetails.fileSize)}

- -
-
- - {!isEmpty(comicVineSearchQueryObject) && - !isUndefined(comicVineSearchQueryObject) ? ( -
-
- - -

Searching against:

-
-
-
- Title - - { - comicVineSearchQueryObject.issue.searchParams - .searchTerms.name - } - + + {!isEmpty(comicVineSearchQueryObject) && + !isUndefined(comicVineSearchQueryObject) ? ( +
+
+ + +

Searching against:

+
+
+
+ Title + + { + comicVineSearchQueryObject.issue.searchParams + .searchTerms.name + } + +
-
-
-
- Number - - { - comicVineSearchQueryObject.issue.searchParams - .searchTerms.number - } - +
+
+ Number + + { + comicVineSearchQueryObject.issue.searchParams + .searchTerms.number + } + +
-
- ) : ( -
-
- + ) : ( +
+
+ +
-
- )} - -
- {!isEmpty(comicVineSearchResults) && ( - )} -
- - - )} + +
+ {!isEmpty(comicVineSearchResults) && ( + + )} +
+ + + )} +
); }; diff --git a/src/client/components/MatchResult.tsx b/src/client/components/MatchResult.tsx index 8f0a5f4..bcc613c 100644 --- a/src/client/components/MatchResult.tsx +++ b/src/client/components/MatchResult.tsx @@ -1,10 +1,11 @@ -import React, { useEffect, useCallback } from "react"; -import { useDispatch } from "react-redux"; +import React, { useCallback } from "react"; +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) => { - dispatch(applyComicVineMatch(match)); + (match, comicObjectId) => { + dispatch(applyComicVineMatch(match, comicObjectId)); }, [dispatch], ); @@ -66,7 +67,7 @@ export const MatchResult = (props: MatchResultProps) => {