offers changes and select status

client/src/routes/acp.tsx

@@ -1,12 +1,22 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
+import { connect } from 'unistore/preact'
 
 import http from './../http';
 import AcpOffer from './../components/acp.offer';
 
-function Item(item) {
+import { Status } from './../../../api/src/offers';
 
+function ItemEl({ item, ws }) {
     console.log(item);
+    console.log(ws);
+    const statuses = Object.entries(Status).map(([label, value]) => (
+        <option value={value}>{label}</option>
+    ));
+
+    function onChange(e) {
+        console.log(item.id, e.target.value);
+    }
 
     return (
         <div key={item.id}>
@@ -15,10 +25,15 @@ function Item(item) {
             </a>
             <h5 class='alt-text'>{item.total}</h5>
             <h5>{item.status}</h5>
+            <select onChange={onChange}>
+                {statuses}
+            </select>
         </div>
     );
 }
 
+const Item = connect(['ws'], {}, ItemEl);
+
 function SellerGroup(group) {
     return (
         <div class="bundle">
@@ -29,7 +44,7 @@ function SellerGroup(group) {
             </section>
 
             <div class='items'>
-                {group.offers.map(Item)}
+                {group.offers.map(i => <Item item={i} />)}
             </div>
         </div>
     )