120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
import { h } from 'preact';
|
|
import { useState, useRef, useEffect } from 'preact/hooks';
|
|
import { ExternalLink, Check } from 'react-feather';
|
|
|
|
import http from '../http';
|
|
|
|
function Result(r) {
|
|
const [added, setAdded] = useState(false)
|
|
|
|
async function onClick() {
|
|
const [error, want] = await http.postWant(r.id);
|
|
if (error) return false;
|
|
setAdded(true);
|
|
}
|
|
|
|
const classes = `${added ? 'added' : ''}`;
|
|
const btnText = added
|
|
? <Check />
|
|
: '+';
|
|
|
|
return (
|
|
<article key={r.id}>
|
|
<button onClick={onClick} disabled={added} class={classes} >{btnText}</button>
|
|
<div>
|
|
<h3>{r.title} <a href={`https://discogs.com${r.uri}`} target="_blank"><ExternalLink /></a></h3>
|
|
<h5 class='alt-text' >{r.year}</h5>
|
|
<h5 class='alt-text'>{r.country}</h5>
|
|
<h5 class='alt-text'>{r.format.join(' ')}</h5>
|
|
</div>
|
|
<img src={r.thumb} />
|
|
</article>
|
|
);
|
|
}
|
|
|
|
const User = () => {
|
|
const [artist, setArtist] = useState('')
|
|
const [title, setTitle] = useState('');
|
|
const [username, setUsername] = useState('');
|
|
const [results, setResults] = useState([]);
|
|
const [infoText, setInfoText] = useState('');
|
|
|
|
async function fetchResults() {
|
|
const [error, results] = await http.postWantSearch(artist, title);
|
|
|
|
if (results.length === 0) {
|
|
setResults([]);
|
|
return setInfoText('No results');
|
|
}
|
|
|
|
setInfoText('');
|
|
setResults(results);
|
|
}
|
|
|
|
async function submitWantlist() {
|
|
const [error, wants] = await http.postDiscogs(username);
|
|
if (wants.length === 0) {
|
|
setResults([]);
|
|
return setInfoText('No new additions');
|
|
}
|
|
|
|
setInfoText(`Added ${wants.length} items to your list.`);
|
|
}
|
|
|
|
const searchRef = useRef<HTMLInputElement>()
|
|
|
|
useEffect(() => {
|
|
searchRef.current.focus()
|
|
}, [])
|
|
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
fetchResults();
|
|
}
|
|
|
|
function handleDiscogsSubmit(e) {
|
|
e.preventDefault();
|
|
submitWantlist();
|
|
}
|
|
|
|
const topEl = results.length
|
|
? <button onClick={() => window.scrollTo(0, 0)}> top </button>
|
|
: null;
|
|
|
|
const infoEl = infoText
|
|
? <article><div></div><div>{infoText}</div></article>
|
|
: null;
|
|
|
|
return (
|
|
<div class='search'>
|
|
<div>
|
|
<form action="" method="get">
|
|
<label for="artist">Artist</label>
|
|
<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>
|
|
<hr />
|
|
<div>
|
|
<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>
|
|
{infoEl}
|
|
{results.map(Result)}
|
|
{topEl}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default User;
|