📔 ComicVine matches populating in the flyout drawer

2021-06-28 13:33:27 -07:00
parent a63669b306
commit 0fa0e78faf
7 changed files with 126 additions and 139 deletions
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -6,7 +6,10 @@ import {
  IMS_COMICBOOK_METADATA_FETCHED,
  IMS_SOCKET_CONNECTION_CONNECTED,
  IMS_RECENT_COMICS_FETCHED,
+  CV_API_CALL_IN_PROGRESS,
+  CV_SEARCH_SUCCESS,
 } from "../constants/action-types";
+
 import { refineQuery } from "../shared/utils/nlp.utils";
 import { assign } from "lodash";

@@ -101,7 +104,7 @@ export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
    });
 };

-export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => {
+export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
  try {
    const issueString = searchPayload.rawFileDetails.path.split("/").pop();
    let seriesSearchQuery = {};
@@ -111,10 +114,6 @@ export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => {
        searchPayload.rawFileDetails.containedIn.split("/").pop(),
      );
    }
-    console.log({
-      issue: issueSearchQuery.searchParams,
-      series: seriesSearchQuery.searchParams,
-    });
    axios
      .request({
        url: "http://localhost:3080/api/comicvine/fetchseries",
@@ -130,9 +129,14 @@ export const fetchComicVineMatches = (searchPayload, options) => (dispatch) => {
        },
      })
      .then((response) => {
-        console.log("CV says to fuck off:", response);
+        dispatch({
+          type: CV_SEARCH_SUCCESS,
+          searchResults: response.data,
+        });
      });
-    return { issueSearchQuery, series: seriesSearchQuery.searchParams };
+    {
+      /* return { issueSearchQuery, series: seriesSearchQuery.searchParams }; */
+    }
  } catch (error) {
    console.log(error);
  }
--- a/src/client/assets/scss/App.css
+++ b/src/client/assets/scss/App.css
@@ -16316,6 +16316,19 @@ readers do not read off random characters that represent icons */
  white-space: pre-wrap;
 }

+.card {
+  max-width: 200px;
+}
+.card .truncate {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card img {
+  max-width: 200px;
+}
+
 .card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -16324,23 +16337,56 @@ readers do not read off random characters that represent icons */
 }
 .card-container .card {
  max-width: 200px;
+  margin: 0 0 15px 0;
 }
-.card-container .card .truncate {
-  width: 100px;
+.card-container .card .is-horizontal {
+  flex-direction: row;
+  display: flex;
+  flex-basis: 50ex;
+  flex-grow: 0;
+  flex-shrink: 1;
+  box-shadow: none;
+}
+.card-container .card .is-horizontal .card-image {
+  align-self: center;
+}
+.card-container .card .is-horizontal .card-image .image {
+  max-width: 60px;
+}
+.card-container .card .is-horizontal .card-image .image img {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0.25em;
+  border-bottom-left-radius: 0.25em;
+}
+.card-container .card .is-horizontal .card-content {
+  align-self: center;
+  flex: 1;
+  padding-left: 1em;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: 0.8em;
+}
+.card-container .card .is-horizontal .card-content ul li.status {
+  margin-top: 10px;
+}
+.card-container .card .is-horizontal .card-content .truncate {
+  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
-.card-container .card img {
-  max-width: 200px;
+.card-container .card .is-horizontal .is-divider {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
 }

 .search-results-container {
  margin: 15px 0 0 0;
-  border: 1px solid #fafafa;
-  border-radius: 10px;
  overflow: hidden;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
+}
+.search-results-container table {
+  width: 100%;
 }
 .search-results-container > :nth-of-type(odd) {
  background-color: #fafafa;
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -114,11 +114,11 @@ $border-color: red;
 // comicvine search results
 .search-results-container {
  margin: 15px 0 0 0;
-  border: 1px solid hsl(0, 0%, 98%);
-  border-radius: 10px;
  overflow: hidden;
-  box-shadow: $box-shadow;

+  table {
+    width: 100%;
+  }
  > :nth-of-type(odd) {
    background-color: hsl(0, 0%, 98%);
  }
--- a/src/client/components/ComicDetail.tsx
+++ b/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>
        </>
      )}
--- a/src/client/components/Import.tsx
+++ b/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";
--- a/src/client/components/MatchResult.tsx
+++ b/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;
--- a/src/client/reducers/comicinfo.reducer.js
+++ b/src/client/reducers/comicinfo.reducer.js
@@ -3,7 +3,7 @@ import {
  CV_SEARCH_SUCCESS,
 } from "../constants/action-types";
 const initialState = {
-  showResultsPane: false,
+  searchResults: [],
 };

 function comicinfoReducer(state = initialState, action) {
@@ -12,13 +12,11 @@ function comicinfoReducer(state = initialState, action) {
      return {
        ...state,
        result: {},
-        showResultsPane: false,
      };
    case CV_SEARCH_SUCCESS:
      return {
        ...state,
-        searchResults: action.result,
-        showResultsPane: true,
+        searchResults: action.searchResults.results,
      };
    default:
      return state;