feat: restore request flow in dashboard

This commit is contained in:
2026-04-22 13:47:34 -04:00
parent b7da2f2298
commit 7b07c7d04a
2 changed files with 117 additions and 0 deletions
@@ -0,0 +1,104 @@
"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>
);
}
+13
View File
@@ -10,6 +10,7 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { api, overseerApi } from "@/lib/api";
import { useSocket } from "@/lib/socket";
@@ -18,6 +19,7 @@ import { formatNumber } from "@/lib/utils";
import { ActivityFeed } from "./components/ActivityFeed";
import { Leaderboard } from "./components/Leaderboard";
import { RequestHistory } from "./components/RequestHistory";
import { SearchRequestModal } from "./components/SearchRequestModal";
import { WatchHistory } from "./components/WatchHistory";
interface WalletData {
@@ -32,6 +34,7 @@ export default function DashboardPage() {
const [wallet, setWallet] = useState<WalletData | null>(null);
const [requestCosts, setRequestCosts] = useState({ movie: 500, tv: 1000 });
const [isLoading, setIsLoading] = useState(true);
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
const socket = useSocket();
useEffect(() => {
@@ -101,6 +104,11 @@ export default function DashboardPage() {
</div>
</div>
</div>
<div className="mt-4">
<Button onClick={() => setIsSearchModalOpen(true)}>
Request content
</Button>
</div>
</CardContent>
</Card>
<div className="text-sm text-muted-foreground">
@@ -123,6 +131,11 @@ export default function DashboardPage() {
</TabsContent>
</Tabs>
<ActivityFeed />
<SearchRequestModal
open={isSearchModalOpen}
onOpenChange={setIsSearchModalOpen}
costs={requestCosts}
/>
</div>
);
}