Refactor: Improve error handling in authentication flow
This commit is contained in:
Your Name
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { overseerApi } from '@/lib/api';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Search, Loader2, Film, Tv, Plus, CheckCircle2, AlertCircle } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface SearchResult {
|
||||
id: number;
|
||||
mediaType: 'movie' | 'tv';
|
||||
title?: string;
|
||||
name?: string;
|
||||
overview: string;
|
||||
posterPath: string;
|
||||
releaseDate?: string;
|
||||
firstAirDate?: string;
|
||||
mediaInfo?: {
|
||||
status: number; // 1 = unknown, 2 = pending, 3 = processing, 4 = partially available, 5 = available
|
||||
};
|
||||
}
|
||||
|
||||
interface SearchRequestModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onRequested: () => void;
|
||||
costs: { movie: number; tv: number };
|
||||
balance: number;
|
||||
}
|
||||
|
||||
const OVERSEER_IMAGE_BASE = 'https://image.tmdb.org/t/p/w200';
|
||||
|
||||
export function SearchRequestModal({ open, onClose, onRequested, costs, balance }: SearchRequestModalProps) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [results, setResults] = useState<SearchResult[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isRequesting, setIsRequesting] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (query.length > 2) {
|
||||
handleSearch();
|
||||
}
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [query]);
|
||||
|
||||
const handleSearch = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await overseerApi.search(query);
|
||||
setResults(response.data.results || []);
|
||||
} catch (error) {
|
||||
console.error('Search failed:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRequest = async (item: SearchResult) => {
|
||||
const cost = item.mediaType === 'movie' ? costs.movie : costs.tv;
|
||||
|
||||
if (balance < cost) {
|
||||
toast.error('Insufficient balance', {
|
||||
description: `You need ${cost} $COOP to request this ${item.mediaType}.`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsRequesting(item.id);
|
||||
try {
|
||||
await overseerApi.request({
|
||||
mediaType: item.mediaType,
|
||||
mediaId: item.id,
|
||||
title: item.title || item.name || 'Unknown',
|
||||
});
|
||||
toast.success('Request submitted!', {
|
||||
description: `${item.title || item.name} has been added to the queue.`,
|
||||
});
|
||||
onRequested();
|
||||
// Optionally close or clear results
|
||||
} catch (error: any) {
|
||||
toast.error(error.response?.data?.error || 'Failed to submit request');
|
||||
} finally {
|
||||
setIsRequesting(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status?: number) => {
|
||||
switch (status) {
|
||||
case 5: return <Badge className="bg-green-500">Available</Badge>;
|
||||
case 4: return <Badge className="bg-blue-500">Partially Available</Badge>;
|
||||
case 3: return <Badge className="bg-yellow-500">Processing</Badge>;
|
||||
case 2: return <Badge className="bg-purple-500">Pending</Badge>;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[600px] h-[80vh] flex flex-col p-0 overflow-hidden">
|
||||
<DialogHeader className="p-6 pb-0">
|
||||
<DialogTitle>Request Content</DialogTitle>
|
||||
<DialogDescription>
|
||||
Search for movies or TV shows to add to the server.
|
||||
<span className="block mt-1 font-semibold text-primary">
|
||||
Costs: {costs.movie} $COOP (Movie) / {costs.tv} $COOP (TV)
|
||||
</span>
|
||||
</DialogDescription>
|
||||
|
||||
<div className="relative mt-4">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search for movies or shows..."
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="pl-10 h-11"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 p-6 overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 gap-2 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin" />
|
||||
<p>Searching Overseer...</p>
|
||||
</div>
|
||||
) : results.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{results.map((item) => (
|
||||
<div key={`${item.mediaType}-${item.id}`} className="flex gap-4 p-3 rounded-xl bg-muted/30 border border-transparent hover:border-primary/20 transition-colors group">
|
||||
<div className="flex-none w-20 h-30 bg-muted rounded-md overflow-hidden relative">
|
||||
{item.posterPath ? (
|
||||
<img
|
||||
src={`${OVERSEER_IMAGE_BASE}${item.posterPath}`}
|
||||
alt={item.title || item.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
{item.mediaType === 'movie' ? <Film className="h-8 w-8 opacity-20" /> : <Tv className="h-8 w-8 opacity-20" />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0 flex flex-col justify-between py-1">
|
||||
<div>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h4 className="font-bold truncate group-hover:text-primary transition-colors">
|
||||
{item.title || item.name}
|
||||
</h4>
|
||||
{getStatusBadge(item.mediaInfo?.status)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground uppercase font-semibold">
|
||||
{item.mediaType === 'movie' ? <Film className="h-3 w-3" /> : <Tv className="h-3 w-3" />}
|
||||
{item.mediaType}
|
||||
<span>•</span>
|
||||
{item.releaseDate || item.firstAirDate || 'N/A'}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground line-clamp-2 mt-2">
|
||||
{item.overview}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex items-center justify-between">
|
||||
<div className="text-xs font-bold text-primary">
|
||||
{item.mediaType === 'movie' ? costs.movie : costs.tv} $COOP
|
||||
</div>
|
||||
|
||||
{item.mediaInfo?.status && item.mediaInfo.status >= 4 ? (
|
||||
<Button disabled size="sm" variant="ghost" className="h-8 px-3 text-green-500">
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" />
|
||||
In Library
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => handleRequest(item)}
|
||||
disabled={isRequesting === item.id || balance < (item.mediaType === 'movie' ? costs.movie : costs.tv)}
|
||||
className="h-8 px-4 rounded-full"
|
||||
>
|
||||
{isRequesting === item.id ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Request
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : query.length > 2 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<AlertCircle className="h-12 w-12 opacity-20 mb-4" />
|
||||
<p>No results found for "{query}"</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<Search className="h-12 w-12 opacity-10 mb-4" />
|
||||
<p>Type to search for movies and shows</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user