autofocus

api/prisma/schema.prisma

@@ -1,5 +1,6 @@
 generator client {
     provider = "prisma-client-js"
+    // include for node docker image
     binaryTargets = ["native", "debian-openssl-1.1.x"]
     previewFeatures = ["interactiveTransactions"]
 }

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>

docker-compose.MCRATES.yaml

@@ -7,6 +7,11 @@ services:
       POSTGRES_USER: 'mcrates'
       POSTGRES_DB: 'mcrates'
       POSTGRES_PASSWORD: 'digdeep'
+
+    # allow prisma client to push changes from outside docker etc
+    # ufw blocks this from being publicly accessible
+    ports:
+      - '45432:5432'
     volumes:
       - "./db:/var/lib/postgresql/data"
 
@@ -30,7 +35,7 @@ services:
     image: nginx:latest
     volumes:
       - './nginx/matescrates.au.nginx.conf:/etc/nginx/conf.d/default.conf'
-      - '/etc/letsencrypt'
+      - '/etc/letsencrypt:/etc/letsencrypt'
     ports:
       - '80:80'
       - '443:443'

docker-compose.yaml

@@ -23,6 +23,8 @@ services:
   api:
     image: node:16
     working_dir: /opt/mcrates/api
+    depends_on:
+      - 'pg'
     entrypoint: npm start
     environment:
       DATABASE_URL: 'postgresql://mcrates:digdeep@pg:5432/mcrates?schema=public'