Add threaded comment replies for admin and curator
- Add parentId field to LessonComment (self-referential FK, SetNull on delete) - Show replies indented under parent comment with left border visual - Add reply button (visible to admin/curator only) with inline textarea - Only root comments shown in main list; replies nested below their parent - Update comment count to include replies - Server-side validation: only admin/curator can reply, parent must belong to same lesson Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,12 +3,21 @@
|
||||
import { useState, useTransition } from "react";
|
||||
import { addComment, deleteComment } from "@/lib/actions/student-actions";
|
||||
|
||||
type Reply = {
|
||||
id: string;
|
||||
text: string;
|
||||
deleted: boolean;
|
||||
createdAt: Date;
|
||||
user: { id: string; name: string };
|
||||
};
|
||||
|
||||
type Comment = {
|
||||
id: string;
|
||||
text: string;
|
||||
deleted: boolean;
|
||||
createdAt: Date;
|
||||
user: { id: string; name: string };
|
||||
replies: Reply[];
|
||||
};
|
||||
|
||||
interface Props {
|
||||
@@ -19,8 +28,20 @@ interface Props {
|
||||
currentUserRole: string;
|
||||
}
|
||||
|
||||
function formatDate(date: Date) {
|
||||
return new Date(date).toLocaleDateString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export function LessonComments({ lessonId, slug, comments, currentUserId, currentUserRole }: Props) {
|
||||
const [text, setText] = useState("");
|
||||
const [replyToId, setReplyToId] = useState<string | null>(null);
|
||||
const [replyText, setReplyText] = useState("");
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
@@ -40,6 +61,19 @@ export function LessonComments({ lessonId, slug, comments, currentUserId, curren
|
||||
});
|
||||
}
|
||||
|
||||
function handleReply(parentId: string) {
|
||||
if (!replyText.trim()) return;
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await addComment(lessonId, slug, replyText.trim(), parentId);
|
||||
setReplyText("");
|
||||
setReplyToId(null);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete(commentId: string) {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
@@ -52,68 +86,161 @@ export function LessonComments({ lessonId, slug, comments, currentUserId, curren
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Comment list */}
|
||||
<div className="space-y-5 mb-6">
|
||||
{comments.length === 0 && (
|
||||
<p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
|
||||
Пока нет комментариев. Будьте первым!
|
||||
</p>
|
||||
)}
|
||||
{comments.map((comment) => (
|
||||
<div key={comment.id} className="flex gap-3">
|
||||
{/* Avatar */}
|
||||
<div
|
||||
className="w-8 h-8 shrink-0 flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--foreground)",
|
||||
border: "2px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
{comment.user.name[0]?.toUpperCase() ?? "?"}
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-sm font-bold">{comment.user.name}</span>
|
||||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
{new Date(comment.createdAt).toLocaleDateString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
{comments.map((comment) => (
|
||||
<div key={comment.id}>
|
||||
{/* Root comment */}
|
||||
<div className="flex gap-3">
|
||||
<div
|
||||
className="w-8 h-8 shrink-0 flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--foreground)",
|
||||
border: "2px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
{comment.user.name[0]?.toUpperCase() ?? "?"}
|
||||
</div>
|
||||
|
||||
{comment.deleted ? (
|
||||
<p className="text-sm italic" style={{ color: "var(--muted-foreground)" }}>
|
||||
[Комментарий удалён]
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
|
||||
{comment.text}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-sm font-bold">{comment.user.name}</span>
|
||||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
{formatDate(comment.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{!comment.deleted && (comment.user.id === currentUserId || canModerate) && (
|
||||
<button
|
||||
onClick={() => handleDelete(comment.id)}
|
||||
disabled={isPending}
|
||||
className="text-xs mt-1 underline"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
{comment.deleted ? (
|
||||
<p className="text-sm italic" style={{ color: "var(--muted-foreground)" }}>
|
||||
[Комментарий удалён]
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
|
||||
{comment.text}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 mt-1">
|
||||
{!comment.deleted && (comment.user.id === currentUserId || canModerate) && (
|
||||
<button
|
||||
onClick={() => handleDelete(comment.id)}
|
||||
disabled={isPending}
|
||||
className="text-xs underline"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
{!comment.deleted && canModerate && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setReplyToId(replyToId === comment.id ? null : comment.id);
|
||||
setReplyText("");
|
||||
}}
|
||||
disabled={isPending}
|
||||
className="text-xs underline"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
{replyToId === comment.id ? "Отмена" : "Ответить"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Inline reply form */}
|
||||
{replyToId === comment.id && (
|
||||
<div className="mt-3">
|
||||
<textarea
|
||||
value={replyText}
|
||||
onChange={(e) => setReplyText(e.target.value)}
|
||||
placeholder="Напишите ответ..."
|
||||
rows={2}
|
||||
maxLength={2000}
|
||||
disabled={isPending}
|
||||
className="w-full text-sm p-3 resize-y"
|
||||
style={{
|
||||
border: "2px solid var(--border)",
|
||||
backgroundColor: "var(--background)",
|
||||
color: "var(--foreground)",
|
||||
outline: "none",
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
onFocus={(e) => (e.target.style.borderColor = "var(--foreground)")}
|
||||
onBlur={(e) => (e.target.style.borderColor = "var(--border)")}
|
||||
/>
|
||||
<div className="flex justify-end mt-2">
|
||||
<button
|
||||
onClick={() => handleReply(comment.id)}
|
||||
disabled={isPending || !replyText.trim()}
|
||||
className="btn-aubade btn-aubade-accent text-sm"
|
||||
>
|
||||
{isPending ? "Отправка..." : "Отправить ответ"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Replies */}
|
||||
{comment.replies.length > 0 && (
|
||||
<div
|
||||
className="mt-3 ml-11 space-y-3 pl-4"
|
||||
style={{ borderLeft: "2px solid var(--border)" }}
|
||||
>
|
||||
{comment.replies.map((reply) => (
|
||||
<div key={reply.id} className="flex gap-3">
|
||||
<div
|
||||
className="w-7 h-7 shrink-0 flex items-center justify-center text-xs font-bold"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--foreground)",
|
||||
border: "2px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
{reply.user.name[0]?.toUpperCase() ?? "?"}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-sm font-bold">{reply.user.name}</span>
|
||||
<span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
|
||||
{formatDate(reply.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
{reply.deleted ? (
|
||||
<p className="text-sm italic" style={{ color: "var(--muted-foreground)" }}>
|
||||
[Комментарий удалён]
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
|
||||
{reply.text}
|
||||
</p>
|
||||
)}
|
||||
{!reply.deleted && (reply.user.id === currentUserId || canModerate) && (
|
||||
<button
|
||||
onClick={() => handleDelete(reply.id)}
|
||||
disabled={isPending}
|
||||
className="text-xs mt-1 underline"
|
||||
style={{ color: "var(--muted-foreground)" }}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add comment form */}
|
||||
{/* New comment form */}
|
||||
<form onSubmit={handleAdd}>
|
||||
<textarea
|
||||
value={text}
|
||||
|
||||
Reference in New Issue
Block a user