36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { h } from 'preact';
|
|
import { ExternalLink, Check } from 'react-feather';
|
|
import { useState } from 'preact/hooks';
|
|
|
|
import http from '../http';
|
|
|
|
export default function Offer(offer) {
|
|
const { want: { data: details } } = offer;
|
|
|
|
const [accepted, setAccepted] = useState(offer.status !== 'pending');
|
|
|
|
async function onClick() {
|
|
const [error] = await http.postOfferAccept(offer.id);
|
|
if (error) return false;
|
|
setAccepted(true);
|
|
}
|
|
|
|
const classes = `${accepted ? 'accepted' : ''}`;
|
|
const btnText = accepted
|
|
? offer.status
|
|
: 'Accept';
|
|
|
|
return (
|
|
<div class="offer">
|
|
<section>
|
|
<h2>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h2>
|
|
<h5 class='alt-text' >{details.year}</h5>
|
|
<h5 class='alt-text'>{details.formats[0].descriptions.join(' ')}</h5>
|
|
<h5 class='number'>${offer.total}</h5>
|
|
</section>
|
|
<img src={details.thumb} />
|
|
<button onClick={onClick} disabled={accepted} class={classes} >{btnText}</button>
|
|
</div>
|
|
)
|
|
}
|