offers sliders

client/src/components/offer.group.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { ExternalLink, Check } from 'react-feather';
-import { useState } from 'preact/hooks';
+import { useState, useCallback } from 'preact/hooks';
 import _ from 'lodash'
 
 import { useSelector, useDispatch } from 'react-redux'
@@ -60,37 +60,21 @@ 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 initialValue = _.last(offers.filter(o => o.status === 'Accepted'))?.total || 0
 
-    const [acceptedPrice, setAcceptedPrice] = useState(0)
+    const ws = useSelector((state: State) => state.ws);
+    const [acceptedPrice, setAcceptedPrice] = useState(initialValue)
+
+    const sendOffers = useCallback(_.debounce(function send(v) {
+        const accepted = offers.filter(o => Number(o.total) <= v).map(o => o.id)
+        const pending = offers.filter(o => Number(o.total) > v).map(o => o.id)
+        ws.sendOfferStatusSet(accepted, 'Accepted')
+        ws.sendOfferStatusSet(pending, 'Pending')
+    }, 1000), [])
 
     function onChange(target) {
         const highest = () => {
@@ -98,8 +82,9 @@ function OfferConditionSlider([condition, offers], i, groupId, rangeMin, rangeMa
         }
 
         const v = highest()
-        setAcceptedPrice(v)
         target.value = v
+        setAcceptedPrice(v)
+        sendOffers(v)
     }
 
     const acceptedPriceLabel = acceptedPrice ? `$${acceptedPrice}` : '-'
@@ -136,7 +121,15 @@ export default function OfferGroup(group, i) {
 
     const conditions = Object.entries(_.groupBy(group.offers, 'condition'))
     const rangeMin = 0
-    const rangeMax = _.maxBy(group.offers, 'total').total
+    const rangeMax = _.max(group.offers.map(o => Number(o.total)))
+
+    const SHOW_BUTTONS = false
+    const buttons = SHOW_BUTTONS ? (
+        <div class="lines">
+            {group.offers.map(o => OfferPriceBtn(o))}
+        </div>
+    ) : null
+
 
     return (
         <div class="offer" key={i} id={group.details.id}>
@@ -151,6 +144,7 @@ export default function OfferGroup(group, i) {
             <div>
                 {conditions.map((c, i) => OfferConditionSlider(c, i, group.details.id, rangeMin, rangeMax))}
             </div>
+            { buttons }
         </div>
     )
 }

client/src/style/styles.less

@@ -350,6 +350,8 @@ main {
     margin-bottom: var(--spacing);
 }
 
+input[type='range']{ accent-color: var(--color-accepted); }
+
 @media (max-width:900px)  {
     .landing {
         grid-template-columns: 1fr;

client/src/ws.ts

@@ -29,8 +29,8 @@ export default function createSocket(dispatch) {
         // setTimeout(sendPing, 50);
     }
 
-    function sendOfferStatusSet(id, status) {
-        send(['OfferStatusSet', { id, status }]);
+    function sendOfferStatusSet(ids, status) {
+        send(['OfferStatusSet', { ids, status }]);
     }
 
     function sendWantRm(id) {