88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { map } from "lodash";
|
|
import { applyComicVineMatch } from "../actions/comicinfo.actions";
|
|
|
|
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 (
|
|
<>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{map(props.matchData, (match, idx) => {
|
|
return (
|
|
<tr className="search-result" key={idx}>
|
|
<td>
|
|
<img
|
|
className="cover-image"
|
|
src={match.image.thumb_url}
|
|
onError={handleBrokenImage}
|
|
/>
|
|
</td>
|
|
<td className="search-result-details">
|
|
<div className="tag score is-primary is-medium is-pulled-right">
|
|
{parseFloat(match.score).toFixed(2)}
|
|
</div>
|
|
<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>
|
|
|
|
<button
|
|
className="button is-small 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>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MatchResult;
|