Public Access
feat(library): search IGDB and add games by hand
This commit is contained in:
lobo committed
1 parent
d9a39dda22
commit
444b03acee
17 files changed
+699
-35
No files matched your search
@@ -0,0 +1,212 @@
|
||||
import {useEffect, useState} from 'react';
|
||||
import {useNavigate} from 'react-router-dom';
|
||||
import {useTranslation} from 'react-i18next';
|
||||
import {toast} from 'sonner';
|
||||
import {ArrowLeft, Loader2, Plus, Search, X} from 'lucide-react';
|
||||
|
||||
import {Badge} from '@/components/ui/badge';
|
||||
import {Button} from '@/components/ui/button';
|
||||
import {Card} from '@/components/ui/card';
|
||||
import {Input} from '@/components/ui/input';
|
||||
import {Label} from '@/components/ui/label';
|
||||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
|
||||
import GameCover from './GameCover.jsx';
|
||||
import useSessionExpired from '../hooks/useSessionExpired.js';
|
||||
import {GAME_STATUSES} from '../utils/backlog.js';
|
||||
import {addGame, hoursToMinutes, searchGames} from '../utils/manualGames.js';
|
||||
|
||||
const SEARCH_DEBOUNCE_MS = 400;
|
||||
const MIN_QUERY = 2;
|
||||
|
||||
/**
|
||||
* Search IGDB and add a game the user owns outside Steam, e.g. on PlayStation or Switch.
|
||||
*/
|
||||
export default function AddGamePanel({onClose}) {
|
||||
const {t} = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const expireSession = useSessionExpired();
|
||||
const [query, setQuery] = useState('');
|
||||
// idle | loading | done | unavailable | failed
|
||||
const [searchState, setSearchState] = useState('idle');
|
||||
const [results, setResults] = useState([]);
|
||||
const [picked, setPicked] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const trimmed = query.trim();
|
||||
if (trimmed.length < MIN_QUERY) {
|
||||
setSearchState('idle');
|
||||
setResults([]);
|
||||
return undefined;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const timer = setTimeout(async () => {
|
||||
setSearchState('loading');
|
||||
try {
|
||||
const response = await searchGames(trimmed, controller.signal);
|
||||
if (response.status === 401) {
|
||||
expireSession();
|
||||
return;
|
||||
}
|
||||
if (!response.ok) {
|
||||
setSearchState('failed');
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
setResults(data.results ?? []);
|
||||
setSearchState(data.available ? 'done' : 'unavailable');
|
||||
} catch (err) {
|
||||
if (err.name !== 'AbortError') setSearchState('failed');
|
||||
}
|
||||
}, SEARCH_DEBOUNCE_MS);
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
controller.abort();
|
||||
};
|
||||
}, [query, expireSession]);
|
||||
|
||||
return (
|
||||
<Card className="p-5 gap-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h2 className="flex items-center gap-2 font-semibold">
|
||||
<Plus className="size-4 text-primary"/>
|
||||
{t('MANUAL_GAME.ADD_TITLE')}
|
||||
</h2>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} aria-label={t('MANUAL_GAME.CLOSE')}>
|
||||
<X/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{picked ? (
|
||||
<AddForm hit={picked} onBack={() => setPicked(null)} navigate={navigate} expireSession={expireSession}/>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">{t('MANUAL_GAME.ADD_HINT')}</p>
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"/>
|
||||
<Input type="search" autoFocus value={query} maxLength={100} className="pl-8"
|
||||
placeholder={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
|
||||
aria-label={t('MANUAL_GAME.SEARCH_PLACEHOLDER')}
|
||||
onChange={(e) => setQuery(e.target.value)}/>
|
||||
</div>
|
||||
|
||||
{searchState === 'loading' && (
|
||||
<p className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin"/>{t('MANUAL_GAME.SEARCHING')}
|
||||
</p>
|
||||
)}
|
||||
{searchState === 'unavailable' && <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.UNAVAILABLE')}</p>}
|
||||
{searchState === 'failed' && <p className="text-sm text-destructive">{t('MANUAL_GAME.SEARCH_FAILED')}</p>}
|
||||
{searchState === 'done' && results.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">{t('MANUAL_GAME.NO_HITS')}</p>
|
||||
)}
|
||||
{searchState === 'done' && results.length > 0 && (
|
||||
<ul className="divide-y rounded-md border">
|
||||
{results.map((hit) => (
|
||||
<li key={hit.igdbId}>
|
||||
<button type="button" disabled={hit.inLibrary} onClick={() => setPicked(hit)}
|
||||
className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-60">
|
||||
<GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-20 shrink-0"/>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate font-medium">
|
||||
{hit.name}{hit.year ? ` (${hit.year})` : ''}
|
||||
</span>
|
||||
<span className="block truncate text-xs text-muted-foreground">
|
||||
{hit.platforms.join(' · ')}
|
||||
</span>
|
||||
</span>
|
||||
{hit.inLibrary && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function AddForm({hit, onBack, navigate, expireSession}) {
|
||||
const {t} = useTranslation();
|
||||
const [platform, setPlatform] = useState(hit.platforms[0] ?? '');
|
||||
const [status, setStatus] = useState('BACKLOG');
|
||||
const [hours, setHours] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const submit = async (e) => {
|
||||
e.preventDefault();
|
||||
setBusy(true);
|
||||
try {
|
||||
const response = await addGame({
|
||||
igdbId: hit.igdbId, platform: platform.trim(), status, playtimeMinutes: hoursToMinutes(hours),
|
||||
});
|
||||
if (response.status === 401) {
|
||||
expireSession();
|
||||
return;
|
||||
}
|
||||
if (response.status === 409) {
|
||||
toast.error(t('MANUAL_GAME.ALREADY_IN_LIBRARY'));
|
||||
return;
|
||||
}
|
||||
if (!response.ok) {
|
||||
toast.error(t('MANUAL_GAME.ADD_FAILED'));
|
||||
return;
|
||||
}
|
||||
const {appid} = await response.json();
|
||||
toast.success(t('MANUAL_GAME.ADDED', {name: hit.name}));
|
||||
navigate(`/library/${appid}`);
|
||||
} catch (err) {
|
||||
console.error('add game error:', err);
|
||||
toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-24 shrink-0"/>
|
||||
<div className="min-w-0 font-medium">{hit.name}{hit.year ? ` (${hit.year})` : ''}</div>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="add-platform">{t('MANUAL_GAME.PLATFORM')}</Label>
|
||||
{hit.platforms.length > 0 ? (
|
||||
<Select value={platform} onValueChange={setPlatform}>
|
||||
<SelectTrigger id="add-platform" className="w-full"><SelectValue/></SelectTrigger>
|
||||
<SelectContent>
|
||||
{hit.platforms.map((p) => <SelectItem key={p} value={p}>{p}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Input id="add-platform" value={platform} maxLength={32} onChange={(e) => setPlatform(e.target.value)}/>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="add-status">{t('BACKLOG.STATUS_LABEL')}</Label>
|
||||
<Select value={status} onValueChange={setStatus}>
|
||||
<SelectTrigger id="add-status" className="w-full"><SelectValue/></SelectTrigger>
|
||||
<SelectContent>
|
||||
{GAME_STATUSES.map((s) => <SelectItem key={s} value={s}>{t(`BACKLOG.STATUS.${s}`)}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="add-hours">{t('MANUAL_GAME.HOURS')}</Label>
|
||||
<Input id="add-hours" type="number" min="0" step="0.5" inputMode="decimal" value={hours}
|
||||
onChange={(e) => setHours(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between gap-3">
|
||||
<Button type="button" variant="ghost" onClick={onBack} disabled={busy}>
|
||||
<ArrowLeft/>{t('MANUAL_GAME.BACK_TO_SEARCH')}
|
||||
</Button>
|
||||
<Button type="submit" disabled={busy || !platform.trim()}>
|
||||
{busy && <Loader2 className="animate-spin"/>}
|
||||
<Plus/>{t('MANUAL_GAME.ADD')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user