76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { h } from 'preact';
|
|
import { ExternalLink, Check } from 'react-feather';
|
|
import { useState } from 'preact/hooks';
|
|
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { State } from './../store';
|
|
|
|
import http from '../http';
|
|
|
|
function OfferLine(offer) {
|
|
const ws = useSelector((state: State) => state.ws);
|
|
|
|
function setStatus(status) {
|
|
ws.sendOfferStatusSet(offer.id, status);
|
|
}
|
|
|
|
const accepted = offer.status === 'Accepted';
|
|
const classes = `${accepted ? 'accepted' : ''}`;
|
|
const btnText = accepted
|
|
? offer.status
|
|
: 'Accept';
|
|
|
|
const negBtn = accepted
|
|
? <button onClick={() => setStatus('Pending')} class='neg'>Cancel</button>
|
|
: <button onClick={() => setStatus('Declined')} class='neg'>Decline</button>;
|
|
|
|
return (
|
|
<div class="line">
|
|
<span class='number'>${offer.total}</span>
|
|
<button onClick={() => setStatus('Accepted')} disabled={accepted} class={classes} >{btnText}</button>
|
|
{negBtn}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function OfferPriceBtn(offer) {
|
|
const ws = useSelector((state: State) => state.ws);
|
|
const accepted = offer.status === 'Accepted';
|
|
const confirmed = offer.status === 'Confirmed';
|
|
|
|
function setStatus() {
|
|
if (accepted) return ws.sendOfferStatusSet(offer.id, 'Pending')
|
|
ws.sendOfferStatusSet(offer.id, 'Accepted');
|
|
}
|
|
|
|
const classes = `${accepted ? 'accepted' : ''} ${confirmed ? 'confirmed' : ''}`;
|
|
const btnText = accepted
|
|
? offer.status
|
|
: 'Accept';
|
|
|
|
return (
|
|
<button disabled={confirmed} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
|
|
)
|
|
}
|
|
|
|
|
|
export default function WantOffers(wantOffers) {
|
|
const ws = useSelector((state: State) => state.ws);
|
|
|
|
const details = wantOffers[0].want.data;
|
|
|
|
return (
|
|
<div class="offer">
|
|
<section>
|
|
<h3>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h3>
|
|
<div class='alt-text' >{details.year}</div>
|
|
<div class='alt-text'>{details.formats.map(f => f.descriptions.join(' ')).join(' ')}</div>
|
|
</section>
|
|
<img src={details.thumb} />
|
|
<div class="lines">
|
|
{wantOffers.map(o => OfferPriceBtn(o))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|