Sliders for accepting

client/src/components/offer.group.tsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import { ExternalLink, Check } from 'react-feather';
 import { useState } from 'preact/hooks';
+import _ from 'lodash'
 
 import { useSelector, useDispatch } from 'react-redux'
 import { State } from './../store';
@@ -58,6 +59,73 @@ function OfferPriceBtn(offer) {
     )
 }
 
+function OfferConditionSlider([condition, offers], i, groupId, rangeMin, rangeMax) {
+    // 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';
+
+    // const title = accepted
+    //     ? 'Click to cancel'
+    //     : 'Click to accept this offer';
+
+    // return (
+    //     <button disabled={confirmed} title={title} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
+    // )
+
+    const min = _.first(offers).total
+    const max = _.last(offers).total
+    // const step = min === max ? max : "any"
+    const step = 'any'
+    const id = `${groupId}-${i}`
+    const markersId = `${id}-markers`
+    const steps = offers.map(o => o.total)
+
+    const [acceptedPrice, setAcceptedPrice] = useState(0)
+
+    function onChange(target) {
+        const highest = () => {
+            return _.findLast(steps, s => target.value >= Number(s)) || 0
+        }
+
+        const v = highest()
+        setAcceptedPrice(v)
+        target.value = v
+    }
+
+    const acceptedPriceLabel = acceptedPrice ? `$${acceptedPrice}` : '-'
+
+    return (
+        <div key={id}>
+            <label for={id}>{condition}</label><br />
+            <label for={id}>{acceptedPriceLabel}</label><br />
+            <input
+                type="range"
+                id={id}
+                name={id}
+                list={markersId}
+                step={step}
+                min={rangeMin}
+                max={rangeMax}
+                value={acceptedPrice}
+                onChange={e => onChange((e.target as HTMLInputElement)) } />
+
+            <datalist id={markersId}>
+                {offers.map(o => <option value={o.total}></option>)}
+            </datalist>
+        </div>
+    )
+}
+
 
 export default function OfferGroup(group, i) {
     const ws = useSelector((state: State) => state.ws);
@@ -66,6 +134,10 @@ export default function OfferGroup(group, i) {
     const descriptions = group.details.formats.map(f => f.descriptions.join(' ')).join(' ')
     const detailText = `${format} ${descriptions}`;
 
+    const conditions = Object.entries(_.groupBy(group.offers, 'condition'))
+    const rangeMin = 0
+    const rangeMax = _.maxBy(group.offers, 'total').total
+
     return (
         <div class="offer" key={i} id={group.details.id}>
             <section>
@@ -76,8 +148,8 @@ export default function OfferGroup(group, i) {
                 <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>
+                {conditions.map((c, i) => OfferConditionSlider(c, i, group.details.id, rangeMin, rangeMax))}
             </div>
         </div>
     )