💄 CV Match drawer beautification

package.json

@@ -74,7 +74,7 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "body-parser": "^1.19.0",
     "buffer": "^6.0.3",
-    "bulma": "^0.9.2",
+    "bulma": "^0.9.3",
     "clean-webpack-plugin": "^1.0.0",
     "comlink": "^4.3.0",
     "compromise": "^13.10.5",

src/client/actions/fileops.actions.tsx

@@ -132,6 +132,10 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
         dispatch({
           type: CV_SEARCH_SUCCESS,
           searchResults: response.data,
+          searchQueryObject: {
+            issue: issueSearchQuery,
+            series: seriesSearchQuery,
+          },
         });
       });
     {

src/client/assets/scss/App.scss

@@ -40,7 +40,7 @@ $border-color: red;
   }
 }
 
-.card {
+.generic-card {
   max-width: 200px;
 
   .truncate {
@@ -111,6 +111,20 @@ $border-color: red;
   }
 }
 
+.comic-vine-match-drawer {
+  // comic detail drawer
+  .search-criteria-card {
+    width: 100%;
+    .card-content {
+      padding: 10px;
+    }
+  }
+
+  .field {
+    margin: 10px 0 0 0;
+  }
+}
+
 // comicvine search results
 .search-results-container {
   margin: 15px 0 0 0;
@@ -118,18 +132,20 @@ $border-color: red;
 
   table {
     width: 100%;
-  }
-  > :nth-of-type(odd) {
-    background-color: hsl(0, 0%, 98%);
+    tbody tr:nth-child(odd) {
+      background: #eee;
+      border-radius: 5px;
+    }
   }
 
   .search-result {
     display: flex;
     flex-direction: row;
     padding: 10px;
+    margin: 0 0 10px 0;
+
     .cover-image {
       border-radius: 5px;
-      margin: 0 0 10px 0;
     }
     .search-result-details {
       margin-left: 10px;

src/client/components/Card.tsx

@@ -21,7 +21,7 @@ class Card extends React.Component<IProps, IState> {
   ): JSX.Element => {
     return (
       <div>
-        <div className="card">
+        <div className="card generic-card">
           <div>
             <div className="card-image">
               <figure className="image">

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} />

src/client/components/MatchResult.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { IComicVineSearchMatch, IFolderData } from "threetwo-ui-typings";
+import React, { useEffect } from "react";
 import { map } from "lodash";
 
 interface MatchResultProps {
@@ -27,8 +26,26 @@ export const MatchResult = (props: MatchResultProps) => {
                   <img className="cover-image" src={match.image.thumb_url} />
                 </td>
                 <td className="search-result-details">
-                  <h4>{match.name}</h4>
-                  <h5>{match.volume.name}</h5>
+                  <div className="is-size-5">{match.name}</div>
+                  <div className="is-size-6">{match.volume.name}</div>
+                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Number</span>
+                        <span className="tag is-primary">
+                          {match.issue_number}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="control">
+                      <div className="tags has-addons">
+                        <span className="tag">Type</span>
+                        <span className="tag is-warning">
+                          {match.resource_type}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
                 </td>
               </tr>
             );

src/client/reducers/comicinfo.reducer.js

@@ -4,6 +4,7 @@ import {
 } from "../constants/action-types";
 const initialState = {
   searchResults: [],
+  searchQuery: {},
 };
 
 function comicinfoReducer(state = initialState, action) {
@@ -14,9 +15,11 @@ function comicinfoReducer(state = initialState, action) {
         result: {},
       };
     case CV_SEARCH_SUCCESS:
+      console.log(action);
       return {
         ...state,
         searchResults: action.searchResults.results,
+        searchQuery: action.searchQueryObject,
       };
     default:
       return state;

yarn.lock

@@ -3357,10 +3357,10 @@ builtins@^1.0.3:
   resolved "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
-bulma@^0.9.2:
-  version "0.9.2"
-  resolved "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz"
-  integrity sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==
+bulma@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
+  integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
 
 byte-size@^7.0.1:
   version "7.0.1"