want events

client/src/routes/search.tsx

@@ -1,13 +1,20 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import axios from 'axios';
+import { ExternalLink } from 'react-feather';
+
+import actions from '../actions';
 
 function result(r) {
+    function onClick() {
+        actions.postWant(r.id);
+    }
+
     return (
         <article key={r.id}>
-            <button> + </button>
+            <button onClick={onClick}> + </button>
             <div>
-                <h3>{r.title}</h3>
+                <h3>{r.title} <a href={`https://discogs.com${r.uri}`}><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>
@@ -20,11 +27,12 @@ function result(r) {
 const User = () => {
     const [artist, setArtist] = useState('nine inch nails')
     const [title, setTitle] = useState('the fragile');
+    const [username, setUsername] = useState('');
     const [results, setResults] = useState([]);
     const [noResults, setNoResults] = useState(false);
 
     async function fetchResults() {
-        const { data } = await axios.post(`http://localhost:41337/wants/search`, {
+        const { data } = await axios.post(`http://localhost:41337/want/search`, {
             artist,
             title,
         });
@@ -40,11 +48,22 @@ const User = () => {
         setResults(data);
     }
 
+    async function submitWantlist() {
+        const [error, wants] = await actions.postDiscogs(username);
+        // setNoResults(false);
+        // setResults(data);
+    }
+
     function handleSubmit(e) {
         e.preventDefault();
         fetchResults();
     }
 
+    function handleDiscogsSubmit(e) {
+        e.preventDefault();
+        submitWantlist();
+    }
+
     const topEl = results.length
         ? <button onClick={() => window.scrollTo(0, 0)}> top </button>
         : null;
@@ -55,14 +74,26 @@ const User = () => {
 
     return (
         <div class='search'>
-            <form action="" method="get">
-                <label for="artist">Artist</label>
-                <input type="text" name="artist" placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
-                <label for="title">Title</label>
-                <input type="text" name="title" placeholder="Subzero" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
-                <input type="submit" value="Search" onClick={handleSubmit} />
-            </form>
-            <div></div>
+            <div>
+                <form action="" method="get">
+                    <label for="artist">Artist</label>
+                    <input type="text" name="artist" placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist(e.target.value) } required />
+                    <label for="title">Title</label>
+                    <input type="text" name="title" placeholder="Subzero" id="title" value={title} onChange={e => setTitle(e.target.value)} required />
+                    <input type="submit" value="Search" onClick={handleSubmit} />
+                </form>
+                <p>Data provided by Discogs.</p>
+                <hr />
+                <div>
+                    <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} />
+                    </form>
+                </div>
+            </div>
+            <div />
             <div>
                 {noResultsEl}
                 {results.map(result)}