offers changes and select status

client/src/actions.ts

@@ -2,6 +2,10 @@ import { route } from 'preact-router';
 import http from './http';
 
 const actions = store => ({
+    setWs: function setWs(state, ws) {
+        return { ws };
+    },
+
     setUser: function setUser(state, user) {
         return { user };
     },

client/src/app.tsx

@@ -26,11 +26,12 @@ async function init() {
     if (error) return route('/login');
     route('/bundles');
     store.setState({ user });
+    store.setState({ ws });
 }
 
 init();
 
-const App = () =>{
+const App = () => {
     return (
         <Provider store={store}>
             <main id="app">

client/src/http.ts

@@ -96,6 +96,13 @@ const actions = {
             id,
         });
     },
+
+    postOfferStatus: async function postOfferStatus(id, status) {
+        return api.post('/acp/offer/status', {
+            id,
+            status,
+        });
+    },
 };
 
 export default actions;

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>
     )

client/src/store.tsx

@@ -5,5 +5,6 @@ export default function createStore() {
         bundles: [],
         offers: [],
         user: null,
+        ws: null,
     });
 };