📔 ComicVine matches populating in the flyout drawer

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 (
     <section className="container">
       {!isEmpty(comicDetail) && !isUndefined(comicDetail) && (
@@ -52,7 +61,7 @@ export const ComicDetail = ({}: ComicDetailProps) => {
               <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
             </div>
             <div className="column">
-              <button className="button" onClick={showDrawer}>
+              <button className="button" onClick={openDrawerWithCVMatches}>
                 <span className="icon">
                   <i className="fas fa-magic"></i>
                 </span>
@@ -69,9 +78,11 @@ export const ComicDetail = ({}: ComicDetailProps) => {
             onClose={onClose}
             visible={visible}
           >
-            <p>Some contents...</p>
-            <p>Some contents...</p>
-            <p>Some contents...</p>
+            <div className="search-results-container">
+              {!isEmpty(comicVineSearchResults) && (
+                <MatchResult matchData={comicVineSearchResults} />
+              )}
+            </div>
           </Drawer>
         </>
       )}

src/client/components/Import.tsx

@@ -1,4 +1,3 @@
-//@ts-ignore
 import * as React from "react";
 import { isUndefined } from "lodash";
 import { connect } from "react-redux";

src/client/components/MatchResult.tsx

@@ -1,113 +1,42 @@
-import * as React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { IComicVineSearchMatch, IFolderData } from "threetwo-ui-typings";
-import _ from "lodash";
-import { autoMatcher } from "../shared/utils/query.transformer";
+import { map } from "lodash";
 
-interface IProps {
-  matchData: unknown;
-  visible: boolean;
-  queryData: IFolderData;
+interface MatchResultProps {
+  matchData: any;
 }
 
-interface IState {}
+export const MatchResult = (props: MatchResultProps) => {
+  useEffect(() => {
+    console.log("match", props.matchData);
+  }, [props.matchData]);
 
-class MatchResult extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
-  public componentDidMount() {
-    console.log(this.props);
-    autoMatcher(this.props.queryData, this.props.matchData.results);
-  }
-
-  public render() {
-    {
-      /* 
-    <table className="table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th>Format</th>
-                  <th>Is File</th>
-                </tr>
-                {!_.isUndefined(this.state.folderWalkResults) &&
-                  this.state.folderWalkResults.map((result, idx) => (
-                    <tr key={idx}>
-                      <td>
-                        {!result.isLink && !result.isFile ? (
-                          <span className="icon-text">
-                            <span className="icon">
-                              <i className="fas fa-folder"></i>
-                            </span>
-                            <span>{result.name}</span>
-                          </span>
-                        ) : (
-                          <span className="ml-5">{result.name}</span>
-                        )}
-
-                        {this.state.searchPaneIndex === idx &&
-                        !_.isUndefined(this.props.matches) ? (
-                          <MatchResult
-                            queryData={result}
-                            matchData={this.props.matches}
-                            visible={true}
-                          />
-                        ) : null}
-                      </td>
-                      <td>
-                        {!_.isEmpty(result.extension) ? (
-                          <span className="tag is-info">
-                            {result.extension}
-                          </span>
-                        ) : null}
-                      </td>
-                      <td>{result.isFile.toString()}</td>
-                      <td>
-                        <button
-                          key={idx}
-                          className="button is-small is-primary is-outlined"
-                          onClick={(e) => {
-                            this.props.findMatches(e, result);
-                            this.toggleSearchResultsPane(idx);
-                          }}
-                        >
-                          Find Match
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-              </thead>
-            </table>
-    */
-    }
-    return this.props.visible ? (
-      <div>
-        <h3>Matches</h3>
-        <div className="search-results-container">
-          {this.props.matchData.results.map((result, idx) => {
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {map(props.matchData, (match, idx) => {
             return (
-              <div key={idx} className="search-result">
-                <img className="cover-image" src={result.image.thumb_url} />
-                <div className="search-result-details">
-                  <h5>{result.volume.name}</h5>
-
-                  {!_.isEmpty(result.extension) ? (
-                    <span className="tag is-info">{result.extension}</span>
-                  ) : null}
-
-                  <span className="tag is-info">
-                    Issue Number: {result.issue_number}
-                  </span>
-                  <p>{result.site_detail_url}</p>
-                </div>
-              </div>
+              <tr className="search-result">
+                <td key={idx}>
+                  <img className="cover-image" src={match.image.thumb_url} />
+                </td>
+                <td className="search-result-details">
+                  <h4>{match.name}</h4>
+                  <h5>{match.volume.name}</h5>
+                </td>
+              </tr>
             );
           })}
-        </div>
-      </div>
-    ) : null;
-  }
-}
+        </tbody>
+      </table>
+    </>
+  );
+};
 
 export default MatchResult;