import React, { useState } from "react"; // mobx import { observer } from "mobx-react-lite"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // headless ui import { Menu, Transition } from "@headlessui/react"; // lib import { useMobxStore } from "lib/mobx/store-provider"; // components import { TipTapEditor } from "components/tiptap"; import { CommentReactions } from "components/issues/peek-overview"; // icons import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline"; // helpers import { timeAgo } from "helpers/date-time.helper"; // types import { Comment } from "types/issue"; type Props = { workspaceSlug: string; comment: Comment; }; export const CommentCard: React.FC = observer((props) => { const { comment, workspaceSlug } = props; // store const { user: userStore, issueDetails: issueDetailStore } = useMobxStore(); // states const [isEditing, setIsEditing] = useState(false); const editorRef = React.useRef(null); const showEditorRef = React.useRef(null); const { control, formState: { isSubmitting }, handleSubmit, } = useForm({ defaultValues: { comment_html: comment.comment_html }, }); const handleDelete = () => { if (!workspaceSlug || !issueDetailStore.peekId) return; issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id); }; const handleCommentUpdate = async (formData: Comment) => { if (!workspaceSlug || !issueDetailStore.peekId) return; issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData); setIsEditing(false); editorRef.current?.setEditorValue(formData.comment_html); showEditorRef.current?.setEditorValue(formData.comment_html); }; return (
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? ( // eslint-disable-next-line @next/next/no-img-element { ) : (
{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)}

( { onChange(comment_html); }} /> )} />
{userStore?.currentUser?.id === comment?.actor_detail?.id && ( {}} className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80" > {({ active }) => (
)}
{({ active }) => (
)}
)}
); });