97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import { h } from 'preact';
|
|
import { useState, useEffect } from 'preact/hooks';
|
|
|
|
import http from './../http';
|
|
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { State } from './../store';
|
|
|
|
enum Status {
|
|
Accepted = 'Accepted',
|
|
Pending = 'Pending',
|
|
Declined = 'Declined',
|
|
Confirmed = 'Confirmed',
|
|
Complete = 'Complete',
|
|
}
|
|
|
|
const POSITIVE_STATUS = [Status.Accepted, Status.Confirmed, Status.Complete];
|
|
|
|
function Item({ item }) {
|
|
const ws = useSelector((state: State) => state.ws);
|
|
console.log(item);
|
|
|
|
const statuses = Object.entries(Status).map(([label, value]) => (
|
|
<option selected={item.status === value} value={value}>{value}</option>
|
|
));
|
|
|
|
function onChange(e) {
|
|
ws.sendAcpOfferStatusSet(item.id, e.target.value);
|
|
}
|
|
|
|
const bold = POSITIVE_STATUS.includes(item.status)
|
|
? 'bold'
|
|
: '';
|
|
|
|
return (
|
|
<div key={item.id} class={bold}>
|
|
<a href={item.listing.data.uri} target="_blank" >
|
|
<h4>{item.listing.data.release.description}</h4>
|
|
</a>
|
|
<h5>{item.user.email}</h5>
|
|
<h5 class='alt-text'>{item.total}</h5>
|
|
<h5>{item.status}</h5>
|
|
<label>Set Status:</label>
|
|
<select onChange={onChange}>
|
|
{statuses}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SellerGroup(group) {
|
|
const ready = group.offers.filter(item => POSITIVE_STATUS.includes(item.status)).length;
|
|
|
|
return (
|
|
<div class="bundle">
|
|
<section>
|
|
<h2>{group.username} - {group.seller}</h2>
|
|
<h3>{ready} / {group.offers.length} offers</h3>
|
|
<h4>Ships: {group.mentionsAustralia && 'AU'} {group.mentionsWorldwide && 'WORLD'}</h4>
|
|
</section>
|
|
|
|
<div class='items'>
|
|
{group.offers.map(i => <Item item={i} />)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Home() {
|
|
const offers = useSelector((state: State) => state.acpOffers);
|
|
const ws = useSelector((state: State) => state.ws);
|
|
|
|
function sync() {
|
|
ws.sendAcpListingsSync();
|
|
}
|
|
|
|
if (!offers.length) {
|
|
return (
|
|
<div class={'offers'}>
|
|
loading...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={sync}> sync listings </button>
|
|
<hr />
|
|
<div class='bundles'>
|
|
{offers.map(SellerGroup)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Home;
|