offer groups with status

client/src/components/offer.group.tsx

@@ -0,0 +1,76 @@
+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">
+            <div class='number'>${offer.total}</div>
+            <div class='number'>{offer.condition}</div>
+            <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 OfferGroup(group, i) {
+    const ws = useSelector((state: State) => state.ws);
+
+    return (
+        <div class="offer" key={i}>
+            <section>
+                <h3>{group.details.artists_sort} - {group.details.title} <a href={group.details.uri} target="_blank"><ExternalLink /></a></h3>
+                <div class='alt-text details'>
+                    {group.details.year} - {group.details.formats.map(f => f.descriptions.join(' ')).join(' ')}
+                </div>
+                <div class='alt-text details'>Status: {group.status}</div>
+            </section>
+            <img src={group.details.thumb} />
+            <div class="lines">
+                {group.offers.map(o => OfferPriceBtn(o))}
+            </div>
+        </div>
+    )
+}