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 CloseBugButton from 'src/components/CloseBugButton/CloseBugButton'; import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton'; import { BugFragment } from './Bug.generated'; import { useAddCommentMutation } from './CommentForm.generated'; import { TimelineDocument } from './TimelineQuery.generated'; type StyleProps = { loading: boolean }; const useStyles = makeStyles((theme) => ({ container: { padding: theme.spacing(0, 2, 2, 2), }, actions: { display: 'flex', gap: '1em', 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.primary.contrastText, }, }, })); type Props = { bug: BugFragment; }; function CommentForm({ bug }: Props) { const [addComment, { loading }] = useAddCommentMutation(); const [issueComment, setIssueComment] = useState(''); const [inputProp, setInputProp] = useState(''); const classes = useStyles({ loading }); const form = useRef(null); const submit = () => { addComment({ variables: { input: { prefix: bug.id, message: issueComment, }, }, refetchQueries: [ // TODO: update the cache instead of refetching { query: TimelineDocument, variables: { id: bug.id, first: 100, }, }, ], awaitRefetchQueries: true, }).then(() => resetForm()); }; function resetForm() { setInputProp({ value: '', }); } const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (issueComment.length > 0) submit(); }; function getCloseButton() { return 0} />; } function getReopenButton() { return 0} />; } return (
setIssueComment(comment)} />
{bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
); } export default CommentForm;