search just uses query

client/src/components/swirl.tsx

@@ -1,3 +1,5 @@
+import { h } from 'preact';
+
 export default function Swirl() {
     return <div class='swirl' />;
 }

client/src/http.ts

@@ -48,8 +48,8 @@ const actions = {
         return api.get('/want/all');
     },
 
-    postWantSearch: async function postWantSearch(artist, title) {
-        return api.post('/want/search', { artist, title });
+    postWantSearch: async function postWantSearch(query) {
+        return api.post('/want/search', { query });
     },
 
     postWant: async function postWant(releaseId) {

client/src/routes/search.tsx

@@ -33,14 +33,14 @@ function Result(r) {
 }
 
 const User = () => {
-    const [artist, setArtist] = useState('')
+    const [query, setQuery] = useState('')
     const [title, setTitle] = useState('');
     const [username, setUsername] = useState('');
     const [results, setResults] = useState([]);
     const [infoText, setInfoText] = useState('');
 
     async function fetchResults() {
-        const [error, results] = await http.postWantSearch(artist, title);
+        const [error, results] = await http.postWantSearch(query);
 
         if (results.length === 0) {
             setResults([]);
@@ -89,10 +89,8 @@ const User = () => {
         <div class='search'>
             <div>
                 <form action="" method="get">
-                    <label for="artist">Artist</label>
-                    <input type="text" name="artist" ref={searchRef} placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist((e.target as HTMLInputElement).value) } required />
-                    <label for="title">Title</label>
-                    <input type="text" name="title" placeholder="Subzero" id="title" value={title} onChange={e => setTitle((e.target as HTMLInputElement).value)} required />
+                    <label for="query">Query</label>
+                    <input type="text" name="query" ref={searchRef} placeholder="ben klock subzero" id="query" value={query} onChange={e => setQuery((e.target as HTMLInputElement).value) } required />
                     <input type="submit" value="Search" onClick={handleSubmit} />
                 </form>
                 <hr />
@@ -100,7 +98,7 @@ const User = () => {
                     <form action="" method="get">
                         <label for="Discogs">Discogs Username</label>
                         <input type="text" name="username" placeholder="Discogs Username" id="username" value={username} onChange={e => setUsername((e.target as HTMLInputElement).value) } required />
-                        <input type="submit" value="Sync" onClick={handleDiscogsSubmit} />
+                        <input type="submit" value="Sync Wantlist" onClick={handleDiscogsSubmit} />
                     </form>
                 </div>
                 <hr />

client/src/style/index.less

@@ -254,7 +254,7 @@ button, [type=submit] {
 
     .swirl {
         grid-area: swirl;
-        height: 10rem;
+        height: 15rem;
     }
 }