navbar and notifications

client/src/components/offer.group.tsx

@@ -49,8 +49,12 @@ function OfferPriceBtn(offer) {
         ? offer.status
         : 'Accept';
 
+    const title = accepted
+        ? 'Click to cancel'
+        : 'Click to accept this offer';
+
     return (
-        <button disabled={confirmed} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
+        <button disabled={confirmed} title={title} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
     )
 }
 

client/src/http.ts

@@ -33,15 +33,10 @@ api.interceptors.response.use(onSuccess, onError);
 
 const actions = {
     // TODO move to rpc
-
     postWantSearch: async function postWantSearch(query) {
         return api.post('/want/search', { query });
     },
 
-    postWant: async function postWant(releaseId) {
-        return api.post('/want', { releaseId });
-    },
-
     postDiscogs: async function postDiscogs(username) {
         return api.post('/want/discogs', { username });
     },
@@ -71,14 +66,6 @@ const actions = {
             password,
         });
     },
-
-    postOffers: async function postOffers(listingIds, shipping, baseShipping) {
-        return api.post('/offers', {
-            listingIds,
-            shipping,
-            baseShipping,
-        });
-    },
 };
 
 export default actions;

client/src/routes/search.tsx

@@ -7,25 +7,22 @@ import { State } from './../store';
 
 import http from '../http';
 
-function Result(r, wants) {
-    const [added, setAdded] = useState(false)
-
+function Result(r, wants, ws) {
     async function onClick() {
-        const [error, want] = await http.postWant(r.id);
-        if (error) return false;
-        setAdded(true);
+        ws.sendWantAdd(r.id);
     }
 
-    const wanted = wants.some(w => w.release === r.id);
+    // releaseIds are bigints on server
+    const wanted = wants.some(w => BigInt(w.release) === BigInt(r.id));
 
-    const classes = `${added || wanted ? 'added' : ''}`;
-    const btnText = added
+    const classes = `${wanted ? 'added' : ''}`;
+    const btnText = wanted
         ? <Check />
         : '+';
 
     return (
         <article key={r.id}>
-            <button onClick={onClick} disabled={added} class={classes} >{btnText}</button>
+            <button onClick={onClick} disabled={wanted} class={classes} >{btnText}</button>
             <div>
                 <h3>{r.title} <a href={`https://discogs.com${r.uri}`} target="_blank"><ExternalLink /></a></h3>
                 <h5 class='alt-text' >{r.year}</h5>
@@ -45,6 +42,7 @@ const User = () => {
     const [infoText, setInfoText] = useState('');
 
     const wants = useSelector((state: State) => state.wants);
+    const ws = useSelector((state: State) => state.ws);
 
     async function fetchResults() {
         const [error, results] = await http.postWantSearch(query);
@@ -114,7 +112,7 @@ const User = () => {
             </div>
             <div class='results' ref={resultsRef}>
                 {infoEl}
-                {results.map(r => Result(r, wants))}
+                {results.map(r => Result(r, wants, ws))}
                 {topEl}
             </div>
         </div>

client/src/ws.ts

@@ -37,6 +37,10 @@ export default function createSocket(dispatch) {
         send(['WantRm', { id }]);
     }
 
+    function sendWantAdd(releaseId) {
+        send(['WantAdd', { releaseId }]);
+    }
+
     function sendOffers() {
         send(['Offers', {}]);
     }
@@ -157,6 +161,7 @@ export default function createSocket(dispatch) {
 
         sendOfferStatusSet,
         sendWantRm,
+        sendWantAdd,
 
         sendOffers,
         sendWants,