🪢 Wired up CV basic search

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;
 

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 && (
         <>
           <div className="columns">
             <div className="column is-narrow">

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",
+          callMethod: "GET",
-          params: {
+          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 (
     <>
       <section className="container">
@@ -72,19 +77,35 @@ export const Search = ({}: ISearchProps): ReactElement => {
               </form>
             )}
           />
-
+          {!isNil(comicVineSearchResults) &&
-          <article className="message is-dark is-half">
+          !isEmpty(comicVineSearchResults) ? (
-            <div className="message-body">
+            <>
-              <p className="mb-2">
+              {comicVineSearchResults.results.map(
-                <span className="tag is-medium is-info is-light">
+                ({ id, name, deck, api_detail_url }) => {
-                  Search the ComicVine database
+                  return (
-                </span>
+                    <div key={id}>
-                Search and add issues, series and trade paperbacks to your
+                      {id} {name}
-                library. Then, download them using the configured AirDC++ or
+                      <p>{api_detail_url}</p>
-                torrent clients.
+                      <p>{deck}</p>
-              </p>
+                    </div>
-            </div>
+                  );
-          </article>
+                },
+              )}
+            </>
+          ) : (
+            <article className="message is-dark is-half">
+              <div className="message-body">
+                <p className="mb-2">
+                  <span className="tag is-medium is-info is-light">
+                    Search the ComicVine database
+                  </span>
+                  Search and add issues, series and trade paperbacks to your
+                  library. Then, download them using the configured AirDC++ or
+                  torrent clients.
+                </p>
+              </div>
+            </article>
+          )}
         </div>
       </section>
     </>