📔 ComicVine matches populating in the flyout drawer

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;