Files
coop/frontend/src/app/dashboard/components/SearchRequestModal.tsx
T

105 lines
2.5 KiB
TypeScript

"use client";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { api } from "@/lib/api";
export function SearchRequestModal({
open,
onOpenChange,
costs,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
costs: { movie: number; tv: number };
}) {
const [query, setQuery] = useState("");
const [results, setResults] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const search = async () => {
setLoading(true);
try {
const res = await api.get(
`/overseer/search?query=${encodeURIComponent(query)}`,
);
setResults(res.data?.results || res.data || []);
} catch {
toast.error("Search failed");
} finally {
setLoading(false);
}
};
const request = async (item: any, mediaType: string) => {
try {
await api.post("/overseer/request", {
mediaType,
mediaId: item.id || item.tmdbId,
title: item.title || item.name,
seasons: item.seasons,
});
toast.success("Request sent");
onOpenChange(false);
} catch (e: any) {
toast.error(e?.response?.data?.error || "Request failed");
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Request content</DialogTitle>
<DialogDescription>
Search and send request. Movie cost {costs.movie}. TV cost{" "}
{costs.tv}.
</DialogDescription>
</DialogHeader>
<div className="space-y-3">
<Input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search movie or show"
/>
<Button onClick={search} disabled={loading || !query}>
Search
</Button>
<div className="max-h-72 overflow-auto space-y-2">
{results.map((r) => (
<div
key={r.id || r.tmdbId}
className="flex items-center justify-between gap-2 border p-2 rounded"
>
<div>
<div className="font-medium">{r.title || r.name}</div>
<div className="text-xs text-muted-foreground">
{r.media_type || r.mediaType}
</div>
</div>
<Button
size="sm"
onClick={() =>
request(r, r.media_type || r.mediaType || "movie")
}
>
Request
</Button>
</div>
))}
</div>
</div>
</DialogContent>
</Dialog>
);
}