search

client/src/app.tsx

@@ -8,6 +8,7 @@ import actions from './actions';
 import Header from './components/header';
 
 import Home from './routes/home';
+import Search from './routes/search';
 import User from './routes/user';
 
 const store = mcratesStore();
@@ -20,6 +21,7 @@ const App = () => (
             <Header />
             <Router>
                 <Route path="/" component={Home} />
+                <Route path="/search" component={Search} />
                 <Route path="/user/:userId" component={User} />
             </Router>
         </div>

client/src/routes/search.tsx

@@ -0,0 +1,51 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import { connect } from 'unistore/preact';
+import axios from 'axios';
+
+import style from './style.less';
+import actions from './../actions';
+import Bundle from './../components/bundle';
+
+function result(r) {
+    return (
+        <div>{r.title}</div>
+    );
+}
+
+const User = () => {
+    const [artist, setArtist] = useState('')
+    const [title, setTitle] = useState('');
+    const [results, setResults] = useState([]);
+
+    async function fetchResults() {
+        const { data } = await axios.post(`http://localhost:41337/want/search`, {
+            artist,
+            title,
+        });
+        console.log(data);
+        setResults(data);
+    }
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        fetchResults();
+    }
+
+    return (
+        <div class={'home'}>
+            <form action="" method="get" class="form-example">
+                <label for="artist">Artist: </label>
+                <input type="text" name="artist" id="artist" value={artist} required />
+                <label for="title">Title: </label>
+                <input type="text" name="title" id="title" value={title} required />
+                <input type="submit" value="Search" onClick={handleSubmit} />
+            </form>
+            <div>
+                {results.map(result)}
+            </div>
+        </div>
+    );
+};
+
+export default User;

server/src/api.ts

@@ -106,6 +106,8 @@ export default function createApi(log: Log, pg: Pg, discogs) {
 
     router.get('/bundles', async (ctx, next) => {
         const bundles = await getBundles();
+        const search = await discogs.searchMaster('nine inch nails', 'the fragile');
+        log.info(search);
         ctx.response.body = bundles;
     })
 
@@ -146,6 +148,12 @@ export default function createApi(log: Log, pg: Pg, discogs) {
         ctx.response.body = want;
     });
 
+    router.post('/want/search', async function wantPost(ctx, next) {
+        const { artist, title } = ctx.request.body;
+        const results = await discogs.search(artist, title);
+        ctx.response.body = results;
+    });
+
     app.use(router.routes());
 
     return {

server/src/discogs.ts

@@ -11,7 +11,7 @@ import { logAxiosError } from './utils';
 import { Pg } from './pg';
 
 export default function discogs(log: Log, pg: Pg) {
-    const TOKEN = 'wRTXuYZGOPsIQgKRGKCAkUkidGtvpSfQgPWkYIpD';
+    const TOKEN = 'Discogs token=wRTXuYZGOPsIQgKRGKCAkUkidGtvpSfQgPWkYIpD';
     const apiBase = 'https://api.discogs.com'
     const discogsBase = 'https://www.discogs.com'
 
@@ -62,6 +62,16 @@ export default function discogs(log: Log, pg: Pg) {
         return data;
     }
 
+    async function search(artist: string, title: string) {
+        const url = new URL(`${apiBase}/database/search`);
+        url.searchParams.append('artist', artist);
+        url.searchParams.append('title', title);
+        url.searchParams.append('type', 'release');
+        url.searchParams.append('format', 'vinyl');
+        const { data: { results } } = await api.get(url.href);
+        return results;
+    }
+
     async function inventory(user: string) {
         const res = await api.get(`${apiBase}/users/${user}/inventory`);
         return res.data.listings;
@@ -103,5 +113,6 @@ export default function discogs(log: Log, pg: Pg) {
         listings,
         listing,
         release,
+        search,
     };
 }