136 lines
4.3 KiB
TypeScript
136 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* ReportCommentModal — compact category + reason form for reporting a comment.
|
|
* Controlled by the parent via `comment` (null = closed). Submits through the
|
|
* comments API and toasts the outcome.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
comments as commentsApi,
|
|
SocialError,
|
|
type Comment,
|
|
type PostReportCategory,
|
|
} from "@/lib/social";
|
|
|
|
const REPORT_CATEGORIES: { value: PostReportCategory; label: string }[] = [
|
|
{ value: "spam", label: "Spam or misleading" },
|
|
{ value: "harassment", label: "Harassment or bullying" },
|
|
{ value: "misinformation", label: "Misinformation" },
|
|
{ value: "inappropriate", label: "Inappropriate content" },
|
|
{ value: "other", label: "Something else" },
|
|
];
|
|
|
|
export function ReportCommentModal({
|
|
comment,
|
|
onClose,
|
|
}: {
|
|
comment: Comment | null;
|
|
onClose: () => void;
|
|
}) {
|
|
const [category, setCategory] = useState<PostReportCategory>("spam");
|
|
const [reason, setReason] = useState("");
|
|
const [working, setWorking] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (comment) {
|
|
setCategory("spam");
|
|
setReason("");
|
|
setWorking(false);
|
|
}
|
|
}, [comment]);
|
|
|
|
if (!comment) return null;
|
|
|
|
async function submit() {
|
|
if (!comment) return;
|
|
setWorking(true);
|
|
try {
|
|
await commentsApi.report(comment.id, category, reason.trim());
|
|
toast("Thanks — your report was submitted", { duration: 2500 });
|
|
onClose();
|
|
} catch (err) {
|
|
toast.error(
|
|
err instanceof SocialError ? err.message : "Could not submit report",
|
|
{ duration: 3000 },
|
|
);
|
|
} finally {
|
|
setWorking(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[110] flex items-center justify-center px-4">
|
|
<div
|
|
className="absolute inset-0 bg-foreground/40 backdrop-blur-sm"
|
|
onClick={() => !working && onClose()}
|
|
aria-hidden
|
|
/>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-xl p-5"
|
|
>
|
|
<h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
|
|
Report comment
|
|
</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Reports are private and reviewed by our team.
|
|
</p>
|
|
<div className="mt-4 space-y-1.5">
|
|
{REPORT_CATEGORIES.map((c) => (
|
|
<label
|
|
key={c.value}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-md border px-3 py-2 cursor-pointer transition-colors",
|
|
category === c.value
|
|
? "border-primary bg-primary/5"
|
|
: "border-border hover:bg-muted",
|
|
)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="comment-report-category"
|
|
value={c.value}
|
|
checked={category === c.value}
|
|
onChange={() => setCategory(c.value)}
|
|
className="accent-primary"
|
|
/>
|
|
<span className="text-sm text-foreground">{c.label}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<textarea
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
rows={2}
|
|
maxLength={2000}
|
|
placeholder="Add details (optional)"
|
|
className="mt-3 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
|
|
/>
|
|
<div className="mt-4 flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={working}
|
|
className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
disabled={working}
|
|
className="h-10 px-4 rounded-md text-sm font-medium bg-destructive text-white hover:bg-destructive/90 transition-colors disabled:opacity-60"
|
|
>
|
|
{working ? "Submitting…" : "Submit report"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|