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 { useEditCommentMutation } from './EditCommentForm.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: theme.palette.success.main,
 34    color: theme.palette.success.contrastText,
 35    '&:hover': {
 36      backgroundColor: theme.palette.success.dark,
 37      color: theme.palette.success.contrastText,
 38    },
 39  },
 40}));
 41
 42type Props = {
 43  bug: BugFragment;
 44  comment: AddCommentFragment | CreateFragment;
 45  onCancelClick?: () => void;
 46  onPostSubmit?: (comments: any) => void;
 47};
 48
 49function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) {
 50  const [editComment, { loading }] = useEditCommentMutation();
 51  const [message, setMessage] = useState<string>(comment.message);
 52  const [inputProp, setInputProp] = useState<any>('');
 53  const classes = useStyles({ loading });
 54  const form = useRef<HTMLFormElement>(null);
 55
 56  const submit = () => {
 57    editComment({
 58      variables: {
 59        input: {
 60          prefix: bug.id,
 61          message: message,
 62          target: comment.id,
 63        },
 64      },
 65    }).then((result) => {
 66      const comments = result.data?.editComment.bug.timeline.comments;
 67      const coms = comments as (AddCommentFragment | CreateFragment)[];
 68      const res = coms.find((elem) => elem.id === comment.id);
 69      if (onPostSubmit) onPostSubmit(res);
 70    });
 71    resetForm();
 72  };
 73
 74  function resetForm() {
 75    setInputProp({
 76      value: '',
 77    });
 78  }
 79
 80  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 81    e.preventDefault();
 82    if (message.length > 0) submit();
 83  };
 84
 85  function getCancelButton() {
 86    return (
 87      <Button onClick={onCancelClick} variant="contained">
 88        Cancel
 89      </Button>
 90    );
 91  }
 92
 93  return (
 94    <Paper className={classes.container}>
 95      <form onSubmit={handleSubmit} ref={form}>
 96        <CommentInput
 97          inputProps={inputProp}
 98          loading={loading}
 99          onChange={(message: string) => setMessage(message)}
100          inputText={comment.message}
101        />
102        <div className={classes.actions}>
103          {onCancelClick ? getCancelButton() : ''}
104          <Button
105            className={classes.greenButton}
106            variant="contained"
107            color="primary"
108            type="submit"
109            disabled={loading || message.length === 0}
110          >
111            Update Comment
112          </Button>
113        </div>
114      </form>
115    </Paper>
116  );
117}
118
119export default EditCommentForm;