127 lines
4.3 KiB
TypeScript
127 lines
4.3 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { isNil, map } from "lodash";
|
|
import { applyComicVineMatch } from "../actions/comicinfo.actions";
|
|
import { convert } from "html-to-text";
|
|
import ellipsize from "ellipsize";
|
|
|
|
interface MatchResultProps {
|
|
matchData: any;
|
|
comicObjectId: string;
|
|
}
|
|
|
|
const handleBrokenImage = (e) => {
|
|
e.target.src = "http://localhost:3050/dist/img/noimage.svg";
|
|
};
|
|
|
|
export const MatchResult = (props: MatchResultProps) => {
|
|
const dispatch = useDispatch();
|
|
const applyCVMatch = useCallback(
|
|
(match, comicObjectId) => {
|
|
dispatch(applyComicVineMatch(match, comicObjectId));
|
|
},
|
|
[dispatch],
|
|
);
|
|
return (
|
|
<>
|
|
{map(props.matchData, (match, idx) => {
|
|
let issueDescription = "";
|
|
if (!isNil(match.description)) {
|
|
issueDescription = convert(match.description, {
|
|
baseElements: {
|
|
selectors: ["p"],
|
|
},
|
|
});
|
|
}
|
|
return (
|
|
<div className="search-result mb-4" key={idx}>
|
|
<div className="columns">
|
|
<div className="column is-one-fifth">
|
|
<img
|
|
className="cover-image"
|
|
src={match.image.thumb_url}
|
|
onError={handleBrokenImage}
|
|
/>
|
|
</div>
|
|
|
|
<div className="search-result-details column">
|
|
<div className="is-size-5">{match.name}</div>
|
|
|
|
<div className="field is-grouped is-grouped-multiline mt-1">
|
|
<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">Cover Date</span>
|
|
<span className="tag is-warning">{match.cover_date}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="is-size-7">
|
|
{ellipsize(issueDescription, 300)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vertical-line"></div>
|
|
|
|
<div className="columns ml-6 volume-information">
|
|
<div className="column is-one-fifth">
|
|
<img
|
|
src={match.volumeInformation.results.image.icon_url}
|
|
className="cover-image"
|
|
onError={handleBrokenImage}
|
|
/>
|
|
</div>
|
|
|
|
<div className="column">
|
|
<div className="is-size-6">{match.volume.name}</div>
|
|
<div className="field is-grouped is-grouped-multiline mt-2">
|
|
<div className="control">
|
|
<div className="tags has-addons">
|
|
<span className="tag">Total Issues</span>
|
|
<span className="tag is-warning">
|
|
{match.volumeInformation.results.count_of_issues}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="control">
|
|
<div className="tags has-addons">
|
|
<span className="tag">Publisher</span>
|
|
<span className="tag is-warning">
|
|
{match.volumeInformation.results.publisher.name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="columns">
|
|
<div className="column">
|
|
<button
|
|
className="button is-normal is-outlined is-primary is-light is-pulled-right"
|
|
onClick={() => applyCVMatch(match, props.comicObjectId)}
|
|
>
|
|
<span className="icon is-size-5">
|
|
<i className="fas fa-clipboard-check"></i>
|
|
</span>
|
|
<span>Apply Match</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MatchResult;
|