import React, { useState, useRef } from 'react'; import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import { makeStyles, Theme } from '@material-ui/core/styles'; import CommentInput from '../../components/CommentInput/CommentInput'; import { BugFragment } from './Bug.generated'; import { useEditCommentMutation } from './EditCommentForm.generated'; import { AddCommentFragment } from './MessageCommentFragment.generated'; import { CreateFragment } from './MessageCreateFragment.generated'; type StyleProps = { loading: boolean }; const useStyles = makeStyles((theme) => ({ container: { padding: theme.spacing(0, 2, 2, 2), }, textarea: {}, tabContent: { margin: theme.spacing(2, 0), }, preview: { borderBottom: `solid 3px ${theme.palette.grey['200']}`, minHeight: '5rem', }, actions: { display: 'flex', justifyContent: 'flex-end', }, greenButton: { marginLeft: '8px', backgroundColor: theme.palette.success.main, color: theme.palette.success.contrastText, '&:hover': { backgroundColor: theme.palette.success.dark, color: theme.palette.success.contrastText, }, }, })); type Props = { bug: BugFragment; comment: AddCommentFragment | CreateFragment; onCancel?: () => void; onPostSubmit?: (comments: any) => void; }; function EditCommentForm({ bug, comment, onCancel, onPostSubmit }: Props) { const [editComment, { loading }] = useEditCommentMutation(); const [message, setMessage] = useState(comment.message); const [inputProp, setInputProp] = useState(''); const classes = useStyles({ loading }); const form = useRef(null); const submit = () => { editComment({ variables: { input: { prefix: bug.id, message: message, target: comment.id, }, }, }).then((result) => { const comments = result.data?.editComment.bug.timeline.comments as ( | AddCommentFragment | CreateFragment )[]; // NOTE Searching for the changed comment could be dropped if GraphQL get // filter by id argument for timelineitems const modifiedComment = comments.find((elem) => elem.id === comment.id); if (onPostSubmit) onPostSubmit(modifiedComment); }); resetForm(); }; function resetForm() { setInputProp({ value: '', }); } const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (message.length > 0) submit(); }; function getCancelButton() { return ( ); } return (
setMessage(message)} inputText={comment.message} />
{onCancel && getCancelButton()}
); } export default EditCommentForm;