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;