1import React, { useState, useRef } from 'react';
  2
  3import Button from '@material-ui/core/Button';
  4import Paper from '@material-ui/core/Paper';
  5import { makeStyles, Theme } from '@material-ui/core/styles';
  6
  7import CommentInput from '../../components/CommentInput/CommentInput';
  8
  9import { BugFragment } from './Bug.generated';
 10import { useAddCommentMutation } from './CommentForm.generated';
 11import { AddCommentFragment } from './MessageCommentFragment.generated';
 12import { CreateFragment } from './MessageCreateFragment.generated';
 13
 14type StyleProps = { loading: boolean };
 15const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 16  container: {
 17    padding: theme.spacing(0, 2, 2, 2),
 18  },
 19  textarea: {},
 20  tabContent: {
 21    margin: theme.spacing(2, 0),
 22  },
 23  preview: {
 24    borderBottom: `solid 3px ${theme.palette.grey['200']}`,
 25    minHeight: '5rem',
 26  },
 27  actions: {
 28    display: 'flex',
 29    justifyContent: 'flex-end',
 30  },
 31  greenButton: {
 32    marginLeft: '8px',
 33    backgroundColor: '#2ea44fd9',
 34    color: '#fff',
 35    '&:hover': {
 36      backgroundColor: '#2ea44f',
 37    },
 38  },
 39}));
 40
 41type Props = {
 42  bug: BugFragment;
 43  comment: AddCommentFragment | CreateFragment;
 44  onCancelClick?: () => void;
 45  onPostSubmit?: () => void;
 46};
 47
 48function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 49  const [addComment, { loading }] = useAddCommentMutation();
 50  const [issueComment, setIssueComment] = useState<string>(comment.message);
 51  const [inputProp, setInputProp] = useState<any>('');
 52  const classes = useStyles({ loading });
 53  const form = useRef<HTMLFormElement>(null);
 54
 55  const submit = () => {
 56    console.log('submit: ' + issueComment);
 57    resetForm();
 58    if (onPostSubmit) onPostSubmit();
 59  };
 60
 61  function resetForm() {
 62    setInputProp({
 63      value: '',
 64    });
 65  }
 66
 67  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 68    e.preventDefault();
 69    if (issueComment.length > 0) submit();
 70  };
 71
 72  function getCancelButton() {
 73    return (
 74      <Button onClick={onCancelClick} variant="contained">
 75        Cancel
 76      </Button>
 77    );
 78  }
 79
 80  return (
 81    <Paper className={classes.container}>
 82      <form onSubmit={handleSubmit} ref={form}>
 83        <CommentInput
 84          inputProps={inputProp}
 85          loading={loading}
 86          onChange={(comment: string) => setIssueComment(comment)}
 87          inputText={comment.message}
 88        />
 89        <div className={classes.actions}>
 90          {onCancelClick ? getCancelButton() : ''}
 91          <Button
 92            className={classes.greenButton}
 93            variant="contained"
 94            color="primary"
 95            type="submit"
 96            disabled={loading || issueComment.length === 0}
 97          >
 98            Update Comment
 99          </Button>
100        </div>
101      </form>
102    </Paper>
103  );
104}
105
106export default EditCommentForm;