From 0fa0e78faf050e2f572714740cb0077298fef790 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Mon, 28 Jun 2021 13:33:27 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=94=20ComicVine=20matches=20populating?= =?UTF-8?q?=20in=20the=20flyout=20drawer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/fileops.actions.tsx | 18 +-- src/client/assets/scss/App.css | 60 ++++++++-- src/client/assets/scss/App.scss | 6 +- src/client/components/ComicDetail.tsx | 39 ++++--- src/client/components/Import.tsx | 1 - src/client/components/MatchResult.tsx | 135 ++++++----------------- src/client/reducers/comicinfo.reducer.js | 6 +- 7 files changed, 126 insertions(+), 139 deletions(-) diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 2e6d5d5..572ded8 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -6,7 +6,10 @@ import { IMS_COMICBOOK_METADATA_FETCHED, IMS_SOCKET_CONNECTION_CONNECTED, IMS_RECENT_COMICS_FETCHED, + CV_API_CALL_IN_PROGRESS, + CV_SEARCH_SUCCESS, } from "../constants/action-types"; + import { refineQuery } from "../shared/utils/nlp.utils"; import { assign } from "lodash"; @@ -101,7 +104,7 @@ export const getRecentlyImportedComicBooks = (options) => async (dispatch) => { }); }; -export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => { +export const fetchComicVineMatches = (searchPayload) => (dispatch) => { try { const issueString = searchPayload.rawFileDetails.path.split("/").pop(); let seriesSearchQuery = {}; @@ -111,10 +114,6 @@ export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => { searchPayload.rawFileDetails.containedIn.split("/").pop(), ); } - console.log({ - issue: issueSearchQuery.searchParams, - series: seriesSearchQuery.searchParams, - }); axios .request({ url: "http://localhost:3080/api/comicvine/fetchseries", @@ -130,9 +129,14 @@ export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => { }, }) .then((response) => { - console.log("CV says to fuck off:", response); + dispatch({ + type: CV_SEARCH_SUCCESS, + searchResults: response.data, + }); }); - return { issueSearchQuery, series: seriesSearchQuery.searchParams }; + { + /* return { issueSearchQuery, series: seriesSearchQuery.searchParams }; */ + } } catch (error) { console.log(error); } diff --git a/src/client/assets/scss/App.css b/src/client/assets/scss/App.css index ca27333..405caa3 100644 --- a/src/client/assets/scss/App.css +++ b/src/client/assets/scss/App.css @@ -16316,6 +16316,19 @@ readers do not read off random characters that represent icons */ white-space: pre-wrap; } +.card { + max-width: 200px; +} +.card .truncate { + width: 100px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.card img { + max-width: 200px; +} + .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); @@ -16324,23 +16337,56 @@ readers do not read off random characters that represent icons */ } .card-container .card { max-width: 200px; + margin: 0 0 15px 0; } -.card-container .card .truncate { - width: 100px; +.card-container .card .is-horizontal { + flex-direction: row; + display: flex; + flex-basis: 50ex; + flex-grow: 0; + flex-shrink: 1; + box-shadow: none; +} +.card-container .card .is-horizontal .card-image { + align-self: center; +} +.card-container .card .is-horizontal .card-image .image { + max-width: 60px; +} +.card-container .card .is-horizontal .card-image .image img { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; +} +.card-container .card .is-horizontal .card-content { + align-self: center; + flex: 1; + padding-left: 1em; + padding-top: 0; + padding-bottom: 0; + font-size: 0.8em; +} +.card-container .card .is-horizontal .card-content ul li.status { + margin-top: 10px; +} +.card-container .card .is-horizontal .card-content .truncate { + width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.card-container .card img { - max-width: 200px; +.card-container .card .is-horizontal .is-divider { + margin-top: 1.5rem; + margin-bottom: 1rem; } .search-results-container { margin: 15px 0 0 0; - border: 1px solid #fafafa; - border-radius: 10px; overflow: hidden; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); +} +.search-results-container table { + width: 100%; } .search-results-container > :nth-of-type(odd) { background-color: #fafafa; diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index f0ae347..71da7e5 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -114,11 +114,11 @@ $border-color: red; // comicvine search results .search-results-container { margin: 15px 0 0 0; - border: 1px solid hsl(0, 0%, 98%); - border-radius: 10px; overflow: hidden; - box-shadow: $box-shadow; + table { + width: 100%; + } > :nth-of-type(odd) { background-color: hsl(0, 0%, 98%); } diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index e190c8e..76c276f 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -1,13 +1,16 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { useParams } from "react-router-dom"; import axios from "axios"; import Card from "./Card"; +import MatchResult from "./MatchResult"; import { isEmpty, isUndefined } from "lodash"; -import { IExtractedComicBookCoverFile } from "threetwo-ui-typings"; +import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings"; import { fetchComicVineMatches } from "../actions/fileops.actions"; import { Drawer } from "antd"; import "antd/dist/antd.css"; +import { useDispatch, useSelector } from "react-redux"; + type ComicDetailProps = {}; export const ComicDetail = ({}: ComicDetailProps) => { @@ -16,15 +19,11 @@ export const ComicDetail = ({}: ComicDetailProps) => { const [comicDetail, setComicDetail] = useState<{ rawFileDetails: IExtractedComicBookCoverFile; }>(); + const comicVineSearchResults = useSelector( + (state: RootState) => state.comicInfo.searchResults, + ); const { comicObjectId } = useParams<{ comicObjectId: string }>(); - const showDrawer = () => { - setVisible(true); - }; - - const onClose = () => { - setVisible(false); - }; useEffect(() => { axios .request({ @@ -36,12 +35,22 @@ export const ComicDetail = ({}: ComicDetailProps) => { }, }) .then((response) => { - console.log("fetched", response); setComicDetail(response.data); }) .catch((error) => console.log(error)); }, [page]); + const dispatch = useDispatch(); + + const openDrawerWithCVMatches = useCallback(() => { + setVisible(true); + dispatch(fetchComicVineMatches(comicDetail)); + }, [dispatch, comicDetail, comicVineSearchResults]); + + const onClose = () => { + setVisible(false); + }; + return (
{!isEmpty(comicDetail) && !isUndefined(comicDetail) && ( @@ -52,7 +61,7 @@ export const ComicDetail = ({}: ComicDetailProps) => {
-