96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
import React from "react";
|
|
import { CommentNode } from "@/server/db/schema";
|
|
import Avatar from "../avatar";
|
|
import { formatCommentDate } from "@/lib/utils/format";
|
|
import { Button } from "../ui/button";
|
|
import CommentEditor from "../editor/comment-editor";
|
|
import CommentVoteButton from "./comment-vote-button";
|
|
import { Session } from "next-auth";
|
|
import { Badge } from "../ui/badge";
|
|
import CommentDeleteButton from "./comment-delete-button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const Comment = React.memo(
|
|
(props: {
|
|
comment: CommentNode;
|
|
setReplyComment: (comment: CommentNode) => void;
|
|
setRef: (el: HTMLDivElement | null) => void;
|
|
session: Session | null;
|
|
level?: number;
|
|
}) => {
|
|
const { comment, setReplyComment, setRef, session, level = 0 } = props;
|
|
|
|
const isAuthor = session?.user?.id === comment?.author?.id;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
level > 0 && "ml-4 border-l",
|
|
comment?.children?.length && "border-l",
|
|
comment?.missingParent && "border-l",
|
|
)}
|
|
>
|
|
{comment.missingParent && (
|
|
<div className="p-4 pt-0 text-sm italic text-muted-foreground">
|
|
Antwort auf: Kommentar wurde gelöscht
|
|
</div>
|
|
)}
|
|
<div
|
|
className="flex items-start gap-2 pl-2 hover:bg-muted"
|
|
ref={setRef}
|
|
>
|
|
<Avatar
|
|
src={comment.author?.image}
|
|
fb={comment.author?.name}
|
|
className="size-8"
|
|
/>
|
|
<div className="w-full">
|
|
<div className="flex w-full items-center gap-2">
|
|
<h5 className="text-lg font-medium capitalize">
|
|
{comment.author?.name}
|
|
</h5>
|
|
{isAuthor && (
|
|
<Badge variant={"outline"} className="text-xs">
|
|
DU
|
|
</Badge>
|
|
)}
|
|
<span className="ml-auto text-xs text-muted-foreground">
|
|
{formatCommentDate(comment.createdAt)}
|
|
</span>
|
|
</div>
|
|
<CommentEditor readOnly initialContent={comment.content!} />
|
|
<div className="flex w-full items-center gap-2 pb-6">
|
|
<CommentVoteButton vote commentId={comment.id} />
|
|
<CommentVoteButton vote={false} commentId={comment.id} />
|
|
<Button
|
|
size={"sm"}
|
|
variant={"ghost"}
|
|
onClick={() => setReplyComment(comment)}
|
|
>
|
|
Antworten
|
|
</Button>
|
|
<div className="ml-auto">
|
|
{isAuthor && <CommentDeleteButton commentId={comment.id} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{comment?.children && comment.children.length > 0 && (
|
|
<div className="pl-4">
|
|
{comment.children.map((child, idx) => (
|
|
<Comment
|
|
key={child?.id ?? idx}
|
|
{...props}
|
|
comment={child as CommentNode}
|
|
level={level + 1}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default Comment;
|