search

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;