import Button from '@app/components/Common/Button'; import Modal from '@app/components/Common/Modal'; import { Permission, useUser } from '@app/hooks/useUser'; import { Menu, Transition } from '@headlessui/react'; import { ExclamationIcon } from '@heroicons/react/outline'; import { DotsVerticalIcon } from '@heroicons/react/solid'; import type { default as IssueCommentType } from '@server/entity/IssueComment'; import axios from 'axios'; import { Field, Form, Formik } from 'formik'; import Link from 'next/link'; import { Fragment, useState } from 'react'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl'; import ReactMarkdown from 'react-markdown'; import * as Yup from 'yup'; const messages = defineMessages({ postedby: 'Posted {relativeTime} by {username}', postedbyedited: 'Posted {relativeTime} by {username} (Edited)', delete: 'Delete Comment', areyousuredelete: 'Are you sure you want to delete this comment?', validationComment: 'You must enter a message', edit: 'Edit Comment', }); interface IssueCommentProps { comment: IssueCommentType; isReversed?: boolean; isActiveUser?: boolean; onUpdate?: () => void; } const IssueComment = ({ comment, isReversed = false, isActiveUser = false, onUpdate, }: IssueCommentProps) => { const intl = useIntl(); const [showDeleteModal, setShowDeleteModal] = useState(false); const [isEditing, setIsEditing] = useState(false); const { hasPermission } = useUser(); const EditCommentSchema = Yup.object().shape({ newMessage: Yup.string().required( intl.formatMessage(messages.validationComment) ), }); const deleteComment = async () => { try { await axios.delete(`/api/v1/issueComment/${comment.id}`); } catch (e) { // something went wrong deleting the comment } finally { if (onUpdate) { onUpdate(); } } }; return (