💄 CV Match drawer beautification

src/client/components/ComicDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, ReactElement } from "react";
 import { useParams } from "react-router-dom";
 import axios from "axios";
 import Card from "./Card";
@@ -13,15 +13,19 @@ import { useDispatch, useSelector } from "react-redux";
 
 type ComicDetailProps = {};
 
-export const ComicDetail = ({}: 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,
   );
+  const comicVineSearchQueryObject = useSelector(
+    (state: RootState) => state.comicInfo.searchQuery,
+  );
   const { comicObjectId } = useParams<{ comicObjectId: string }>();
 
   useEffect(() => {
@@ -45,7 +49,7 @@ export const ComicDetail = ({}: ComicDetailProps) => {
   const openDrawerWithCVMatches = useCallback(() => {
     setVisible(true);
     dispatch(fetchComicVineMatches(comicDetail));
-  }, [dispatch, comicDetail, comicVineSearchResults]);
+  }, [dispatch, comicDetail]);
 
   const onClose = () => {
     setVisible(false);
@@ -77,7 +81,41 @@ export const ComicDetail = ({}: ComicDetailProps) => {
             closable={false}
             onClose={onClose}
             visible={visible}
+            className="comic-vine-match-drawer"
           >
+            {!isEmpty(comicVineSearchQueryObject) &&
+            !isUndefined(comicVineSearchQueryObject) ? (
+              <div className="card search-criteria-card">
+                <div className="card-content">
+                  <p className="is-size-6">Searching against:</p>
+                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Title</span>
+                        <span className="tag is-info">
+                          {
+                            comicVineSearchQueryObject.issue.searchParams
+                              .searchTerms.name
+                          }
+                        </span>
+                      </div>
+                    </div>
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Number</span>
+                        <span className="tag is-info">
+                          {
+                            comicVineSearchQueryObject.issue.searchParams
+                              .searchTerms.number
+                          }
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
             <div className="search-results-container">
               {!isEmpty(comicVineSearchResults) && (
                 <MatchResult matchData={comicVineSearchResults} />