wants list redux and removal

client/src/components/want.tsx

@@ -1,9 +1,27 @@
 import { h } from 'preact';
+import { useState, useCallback } from 'preact/hooks';
+
+import { useSelector } from 'react-redux'
+import { State } from './../store'
+
+import http from './../http';
 
 function Want(want) {
-    console.log(want);
     const r = want.data;
 
+    const ws = useSelector((state: State) => state.ws);
+    const [confirm, setConfirm] = useState(false);
+
+    function onClick() {
+        if (confirm) return ws.sendWantRm(want.id);
+        setTimeout(() => setConfirm(false), 2500);
+        return setConfirm(true);
+    };
+
+    const text = confirm
+        ? 'confirm'
+        : 'remove';
+
     return (
         <article key={r.id}>
             <div>
@@ -12,6 +30,7 @@ function Want(want) {
                 <h5 class='alt-text'>{r.formats[0].descriptions.join(' ')}</h5>
             </div>
             <img src={r.thumb} />
+            <button onClick={onClick} >{text}</button>
         </article>
     );
 }

client/src/routes/list.tsx

@@ -1,6 +1,9 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
+import { useSelector } from 'react-redux'
+import { State } from './../store'
+
 // import style from './style.less';
 import http from './../http';
 import Want from './../components/want';
@@ -12,17 +15,7 @@ interface Props {
 }
 
 const List = ({ user }: Props) => {
-    const [wants, setOffers] = useState([]);
-
-    useEffect(() => {
-        async function getWants() {
-            const [error, wants] = await http.getWants();
-            if (error) return console.error(error);
-            setOffers(wants);
-        }
-        getWants();
-    }, []);
-
+    const wants = useSelector((state: State) => state.wants);
 
     if (!wants.length) {
         return <div> loading... </div>;

client/src/store.tsx

@@ -17,6 +17,14 @@ export const offersState = createSlice({
   },
 });
 
+export const wantsState = createSlice({
+  name: 'wants',
+  initialState: [],
+  reducers: {
+    set: (state, action) => action.payload
+  },
+});
+
 export const wsState = createSlice({
   name: 'ws',
   initialState: null,
@@ -26,9 +34,10 @@ export const wsState = createSlice({
 });
 
 const reducer = combineReducers({
-  user: userState.reducer,
   offers: offersState.reducer,
+  wants: wantsState.reducer,
   ws: wsState.reducer,
+  user: userState.reducer,
 });
 
 const store = createStore(

client/src/style/index.less

@@ -232,6 +232,15 @@ article {
         1fr 1fr 1fr 1fr;
 
     article {
+        display: grid;
+        grid-template-areas:
+            "title img"
+            "remove remove";
+
+        button {
+            grid-area: remove
+        }
+
         padding: var(--base-spacing);
         margin: var(--base-spacing-half);
     }

client/src/ws.ts

@@ -1,5 +1,7 @@
 const SOCKET_URL = `${window.location.protocol === 'https:' ? 'wss://' : 'ws://'}${window.location.host}/api/ws`;
 
+import { wantsState, wsState } from './store'
+
 export default function createSocket(store) {
     let ws;
 
@@ -28,6 +30,10 @@ export default function createSocket(store) {
         send(['OfferStatusSet', { id, status }]);
     }
 
+    function sendWantRm(id) {
+        send(['WantRm', { id }]);
+    }
+
     let pongTimeout;
     function onPong() {
         pongTimeout = setTimeout(sendPing, 5000);
@@ -36,8 +42,8 @@ export default function createSocket(store) {
     // -------------
     //   Incoming
     // -------------
-    function onSourcesAvailable(clouds) {
-        // store.dispatch(http.LIBRARY_RECEIVE_POINTCLOUDS, clouds);
+    function onWants(wants) {
+        store.dispatch(wantsState.actions.set(wants));
     }
 
     // -------------
@@ -46,7 +52,7 @@ export default function createSocket(store) {
     // when the server sends a reply it will have one of these message types
     // this object wraps the reply types to a function
     const handlers = {
-        SourcesAvailable: onSourcesAvailable,
+        Wants: onWants,
 
         Pong: onPong,
         Error: errHandler,
@@ -109,5 +115,6 @@ export default function createSocket(store) {
         connect,
 
         sendOfferStatusSet,
+        sendWantRm,
     };
 }