import React, { useEffect, useState } from "react"; // next import Image from "next/image"; // swr import { mutate } from "swr"; // headless ui import { Menu } from "@headlessui/react"; // react hook form import { useForm } from "react-hook-form"; // hooks import useUser from "lib/hooks/useUser"; // fetch keys import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys"; // common import { timeAgo } from "constants/common"; // ui import { TextArea } from "ui"; // icon import { CheckIcon, EllipsisHorizontalIcon, XMarkIcon } from "@heroicons/react/24/outline"; // types import type { IIssueComment } from "types"; type Props = { comment: IIssueComment; onSubmit: (comment: IIssueComment) => void; handleCommentDeletion: (comment: string) => void; }; const CommentCard: React.FC = ({ comment, onSubmit, handleCommentDeletion }) => { const { user } = useUser(); const [isEditing, setIsEditing] = useState(false); const { register, formState: { isSubmitting }, handleSubmit, setFocus, } = useForm({ defaultValues: comment, }); const onEnter = (formData: IIssueComment) => { if (isSubmitting) return; mutate( PROJECT_ISSUES_COMMENTS, (prevData) => { const newData = prevData ?? []; const index = newData.findIndex((comment) => comment.id === formData.id); newData[index] = formData; return [...newData]; }, false ); setIsEditing(false); onSubmit(formData); }; useEffect(() => { isEditing && setFocus("comment"); }, [isEditing, setFocus]); return (
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? ( {comment.actor_detail.name} ) : (
{comment.actor_detail.first_name.charAt(0)}
)}

{comment.actor_detail.first_name} {comment.actor_detail.last_name}

{timeAgo(comment.created_at)}

{isEditing ? (