yeh boi

client/src/routes/search.tsx

@@ -1,20 +1,29 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import axios from 'axios';
-import { ExternalLink } from 'react-feather';
+import { ExternalLink, Check } from 'react-feather';
 
 import actions from '../actions';
 
-function result(r) {
-    function onClick() {
-        actions.postWant(r.id);
+function Result(r) {
+    const [added, setAdded] = useState(false)
+
+    async function onClick() {
+        const [error, want] = await actions.postWant(r.id);
+        if (error) return false;
+        setAdded(true);
     }
 
+    const classes = `${added ? 'added' : ''}`;
+    const btnText = added
+        ? <Check />
+        : '+';
+
     return (
         <article key={r.id}>
-            <button onClick={onClick}> + </button>
+            <button onClick={onClick} disabled={added} class={classes} >{btnText}</button>
             <div>
-                <h3>{r.title} <a href={`https://discogs.com${r.uri}`}><ExternalLink /></a></h3>
+                <h3>{r.title} <a href={`https://discogs.com${r.uri}`} target="_blank"><ExternalLink /></a></h3>
                 <h5 class='alt-text' >{r.year}</h5>
                 <h5 class='alt-text'>{r.country}</h5>
                 <h5 class='alt-text'>{r.format.join(' ')}</h5>
@@ -25,33 +34,32 @@ function result(r) {
 }
 
 const User = () => {
-    const [artist, setArtist] = useState('nine inch nails')
-    const [title, setTitle] = useState('the fragile');
+    const [artist, setArtist] = useState('')
+    const [title, setTitle] = useState('');
     const [username, setUsername] = useState('');
     const [results, setResults] = useState([]);
     const [noResults, setNoResults] = useState(false);
 
     async function fetchResults() {
-        const { data } = await axios.post(`http://localhost:41337/want/search`, {
-            artist,
-            title,
-        });
+        const [error, results] = await actions.postWantSearch(artist, title);
 
-        console.log(data);
-
-        if (data.length === 0) {
+        if (results.length === 0) {
             setResults([]);
             return setNoResults(true);
         }
 
         setNoResults(false);
-        setResults(data);
+        setResults(results);
     }
 
     async function submitWantlist() {
         const [error, wants] = await actions.postDiscogs(username);
-        // setNoResults(false);
-        // setResults(data);
+        if (results.length === 0) {
+            setResults([]);
+            return setNoResults(true);
+        }
+
+        console.log('synced', wants.length, 'wants');
     }
 
     function handleSubmit(e) {
@@ -88,15 +96,15 @@ const User = () => {
                     <p>Sync Discogs Wantlist</p>
                     <form action="" method="get">
                         <label for="Discogs">Discogs Username</label>
-                        <input type="text" name="username" placeholder="username" id="username" value={username} onChange={e => setUsername(e.target.value) } required />
-                        <input type="submit" value="Search" onClick={handleDiscogsSubmit} />
+                        <input type="text" name="username" placeholder="Discogs Username" id="username" value={username} onChange={e => setUsername(e.target.value) } required />
+                        <input type="submit" value="Sync" onClick={handleDiscogsSubmit} />
                     </form>
                 </div>
             </div>
             <div />
             <div>
                 {noResultsEl}
-                {results.map(result)}
+                {results.map(Result)}
                 {topEl}
             </div>
         </div>