autofocus

client/src/routes/search.tsx

@@ -1,6 +1,5 @@
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
-import axios from 'axios';
+import { useState, useRef, useEffect } from 'preact/hooks';
 import { ExternalLink, Check } from 'react-feather';
 
 import actions from '../actions';
@@ -62,6 +61,12 @@ const User = () => {
         console.log('synced', wants.length, 'wants');
     }
 
+    const searchRef = useRef<HTMLInputElement>()
+
+    useEffect(() => {
+        searchRef.current.focus()
+    }, [])
+
     function handleSubmit(e) {
         e.preventDefault();
         fetchResults();
@@ -85,21 +90,21 @@ const User = () => {
             <div>
                 <form action="" method="get">
                     <label for="artist">Artist</label>
-                    <input type="text" name="artist" placeholder="Ben Klock" id="artist" value={artist} onChange={e => setArtist((e.target as HTMLInputElement).value) } required />
+                    <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 />
                     <input type="submit" value="Search" onClick={handleSubmit} />
                 </form>
-                <p>Data provided by Discogs.</p>
                 <hr />
                 <div>
-                    <p>Sync Discogs Wantlist</p>
                     <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} />
                     </form>
                 </div>
+                <hr />
+                <p>Data provided by Discogs.</p>
             </div>
             <div />
             <div>