acp stuff

client/src/components/acp.offer.tsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import { ExternalLink, Check } from 'react-feather';
+import { useState } from 'preact/hooks';
+
+import actions from '../actions';
+
+export default function Offer(offer) {
+    const { want: { data: details } } = offer;
+
+    const [accepted, setAccepted] = useState(offer.status !== 'pending');
+
+    async function onClick() {
+        const [error] = await actions.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>
+    )
+}