search just uses query

TODO.md

@@ -1,5 +1,7 @@
 # TODO
 
+search input simplify
+
 status stepper
 
 queue up wantlist adds to gracefully handle rate limiting

api/index.ts

@@ -28,7 +28,7 @@ async function start() {
         events,
     } = createServices(log);
 
-    // events.emit(Events.StartupSync);
+    events.emit(Events.StartupSync);
     // events.emit(Events.ListingsUpdated);
 
     api.listen();

api/src/api.ts

@@ -93,9 +93,9 @@ export default function createApi(log: Log, pg: Pg, discogs, offers, events) {
         ctx.response.body = wants;
     });
 
-    router.post('/want/search', async function wantPost(ctx, next) {
-        const { artist, title } = ctx.request.body;
-        const results = await discogs.search(artist, title);
+    router.post('/want/search', async function wantSearch(ctx, next) {
+        const { query } = ctx.request.body;
+        const results = await discogs.search(query);
         ctx.response.body = results;
     });
 

api/src/discogs.ts

@@ -58,10 +58,9 @@ export default function createDiscogs(log: Log, pg: Pg) {
         return data;
     }
 
-    async function search(artist: string, title: string) {
+    async function search(query: string) {
         const url = new URL(`${apiBase}/database/search`);
-        url.searchParams.append('artist', artist);
-        url.searchParams.append('title', title);
+        url.searchParams.append('query', query);
         url.searchParams.append('type', 'release');
         url.searchParams.append('format', 'vinyl');
         const { data: { results } } = await api.get(url.href);

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;
     }
 }