diff --git a/src/client/actions/comicinfo.actions.tsx b/src/client/actions/comicinfo.actions.tsx index 09f70e1..5150901 100644 --- a/src/client/actions/comicinfo.actions.tsx +++ b/src/client/actions/comicinfo.actions.tsx @@ -41,7 +41,7 @@ export const comicinfoAPICall = (options) => async (dispatch) => { case "search": dispatch({ type: CV_SEARCH_SUCCESS, - result: response.data, + searchResults: response.data, }); break; diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 6b9f802..9e3d3d1 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -64,12 +64,15 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => { const createDescriptionMarkup = (html) => { return { __html: html }; }; + const isComicBookMetadataAvailable = + !isNil(comicBookDetailData.sourcedMetadata) && + !isEmpty(comicBookDetailData.sourcedMetadata); // Tab groups for ComicVine metadata const tabGroup = [ { id: 0, name: "Volume Information", - content: !isNil(comicBookDetailData.sourcedMetadata) && ( + content: isComicBookMetadataAvailable && ( <>
diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx index a6b82ba..f4a80b7 100644 --- a/src/client/components/Search.tsx +++ b/src/client/components/Search.tsx @@ -6,7 +6,8 @@ import { import { useTable } from "react-table"; import prettyBytes from "pretty-bytes"; import ellipsize from "ellipsize"; - +import { isNil, isUndefined, map, isEmpty } from "lodash"; +import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings"; import { useSelector, useDispatch } from "react-redux"; import { comicinfoAPICall } from "../actions/comicinfo.actions"; import { Form, Field } from "react-final-form"; @@ -20,14 +21,13 @@ export const Search = ({}: ISearchProps): ReactElement => { const dispatch = useDispatch(); const getCVSearchResults = useCallback( (searchQuery) => { - console.log(searchQuery); dispatch( comicinfoAPICall({ callURIAction: "search", - method: "GET", - params: { + callMethod: "GET", + callParams: { api_key: "a5fa0663683df8145a85d694b5da4b87e1c92c69", - query: searchQuery, + query: searchQuery.search, format: "json", limit: "10", offset: "0", @@ -39,6 +39,11 @@ export const Search = ({}: ISearchProps): ReactElement => { }, [dispatch], ); + + const comicVineSearchResults = useSelector( + (state: RootState) => state.comicInfo.searchResults, + ); + return ( <>
@@ -72,19 +77,35 @@ export const Search = ({}: ISearchProps): ReactElement => { )} /> - -
-
-

- - Search the ComicVine database - - Search and add issues, series and trade paperbacks to your - library. Then, download them using the configured AirDC++ or - torrent clients. -

-
-
+ {!isNil(comicVineSearchResults) && + !isEmpty(comicVineSearchResults) ? ( + <> + {comicVineSearchResults.results.map( + ({ id, name, deck, api_detail_url }) => { + return ( +
+ {id} {name} +

{api_detail_url}

+

{deck}

+
+ ); + }, + )} + + ) : ( +
+
+

+ + Search the ComicVine database + + Search and add issues, series and trade paperbacks to your + library. Then, download them using the configured AirDC++ or + torrent clients. +

+
+
+ )}