import React, { useEffect, useState } from "react"; // react-hook-form import { useForm } from "react-hook-form"; // icons import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline"; // hooks import useUser from "hooks/use-user"; // ui import { CustomMenu } from "components/ui"; import { CommentReaction } from "components/issues"; import { TipTapEditor } from "components/tiptap"; // helpers import { timeAgo } from "helpers/date-time.helper"; // types import type { IIssueComment } from "types"; type Props = { workspaceSlug: string; comment: IIssueComment; onSubmit: (comment: IIssueComment) => void; handleCommentDeletion: (comment: string) => void; }; export const CommentCard: React.FC = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion, }) => { const { user } = useUser(); const editorRef = React.useRef(null); const showEditorRef = React.useRef(null); const [isEditing, setIsEditing] = useState(false); const { formState: { isSubmitting }, handleSubmit, setFocus, watch, setValue, } = useForm({ defaultValues: comment, }); const onEnter = (formData: IIssueComment) => { if (isSubmitting) return; setIsEditing(false); onSubmit(formData); editorRef.current?.setEditorValue(formData.comment_html); showEditorRef.current?.setEditorValue(formData.comment_html); }; useEffect(() => { isEditing && setFocus("comment"); }, [isEditing, setFocus]); return (
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? ( { ) : (
{comment.actor_detail.is_bot ? comment.actor_detail.first_name.charAt(0) : comment.actor_detail.display_name.charAt(0)}
)}
{comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}

Commented {timeAgo(comment.created_at)}

{ setValue("comment_json", comment_json); setValue("comment_html", comment_html); }} />
{user?.id === comment.actor && ( setIsEditing(true)}>Edit { handleCommentDeletion(comment.id); }} > Delete )}
); };