71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
import { FailedImportCard } from "@/components/failed-import-card";
|
|
import { Card } from "@/components/ui/card";
|
|
import { AlertCircle } from "lucide-react";
|
|
import { useGetImportReviews } from "@/api/mangamochi";
|
|
|
|
export default function ImportReviewPage() {
|
|
const { user, isAuthenticated } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const { data: failedImportsData, queryKey } = useGetImportReviews();
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
return;
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
router.push("/login");
|
|
}
|
|
}, [isAuthenticated, router, user]);
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-background">
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-foreground">Import Review</h1>
|
|
<p className="mt-2 text-muted-foreground">
|
|
Review and resolve manga imports by manually matching them with
|
|
MyAnimeList entries.
|
|
</p>
|
|
</div>
|
|
|
|
{!failedImportsData?.data || failedImportsData.data.length === 0 ? (
|
|
<Card className="p-8 text-center">
|
|
<AlertCircle className="mx-auto h-12 w-12 text-muted-foreground" />
|
|
<h2 className="mt-4 text-lg font-semibold text-foreground">
|
|
No Imports to Review
|
|
</h2>
|
|
<p className="mt-2 text-muted-foreground">
|
|
All your imports have been processed successfully!
|
|
</p>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="text-sm text-muted-foreground">
|
|
{failedImportsData.data.length} import
|
|
{failedImportsData.data.length !== 1 ? "s" : ""} to review
|
|
</div>
|
|
{failedImportsData.data.map((failedImport) => (
|
|
<FailedImportCard
|
|
key={failedImport.id}
|
|
failedImport={failedImport}
|
|
queryKey={queryKey}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|