1import { useState, useRef } from 'react';
  2import * as React from 'react';
  3
  4import Button from '@material-ui/core/Button';
  5import Paper from '@material-ui/core/Paper';
  6import { makeStyles, Theme } from '@material-ui/core/styles';
  7
  8import CommentInput from '../../components/CommentInput/CommentInput';
  9
 10import { BugFragment } from './Bug.generated';
 11import { useEditCommentMutation } from './EditCommentForm.generated';
 12import { AddCommentFragment } from './MessageCommentFragment.generated';
 13import { CreateFragment } from './MessageCreateFragment.generated';
 14
 15type StyleProps = { loading: boolean };
 16const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
 17  container: {
 18    padding: theme.spacing(0, 2, 2, 2),
 19  },
 20  textarea: {},
 21  tabContent: {
 22    margin: theme.spacing(2, 0),
 23  },
 24  preview: {
 25    borderBottom: `solid 3px ${theme.palette.grey['200']}`,
 26    minHeight: '5rem',
 27  },
 28  actions: {
 29    display: 'flex',
 30    justifyContent: 'flex-end',
 31  },
 32  greenButton: {
 33    marginLeft: '8px',
 34    backgroundColor: theme.palette.success.main,
 35    color: theme.palette.success.contrastText,
 36    '&:hover': {
 37      backgroundColor: theme.palette.success.dark,
 38      color: theme.palette.success.contrastText,
 39    },
 40  },
 41}));
 42
 43type Props = {
 44  bug: BugFragment;
 45  comment: AddCommentFragment | CreateFragment;
 46  onCancel?: () => void;
 47  onPostSubmit?: (comments: any) => void;
 48};
 49
 50function EditCommentForm({ bug, comment, onCancel, onPostSubmit }: Props) {
 51  const [editComment, { loading }] = useEditCommentMutation();
 52  const [message, setMessage] = useState<string>(comment.message);
 53  const [inputProp, setInputProp] = useState<any>('');
 54  const classes = useStyles({ loading });
 55  const form = useRef<HTMLFormElement>(null);
 56
 57  const submit = () => {
 58    editComment({
 59      variables: {
 60        input: {
 61          prefix: bug.id,
 62          message: message,
 63          target: comment.id,
 64        },
 65      },
 66    }).then((result) => {
 67      const comments = result.data?.editComment.bug.timeline.comments as (
 68        | AddCommentFragment
 69        | CreateFragment
 70      )[];
 71      // NOTE Searching for the changed comment could be dropped if GraphQL get
 72      // filter by id argument for timelineitems
 73      const modifiedComment = comments.find((elem) => elem.id === comment.id);
 74      if (onPostSubmit) onPostSubmit(modifiedComment);
 75    });
 76    resetForm();
 77  };
 78
 79  function resetForm() {
 80    setInputProp({
 81      value: '',
 82    });
 83  }
 84
 85  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 86    e.preventDefault();
 87    if (message.length > 0) submit();
 88  };
 89
 90  function getCancelButton() {
 91    return (
 92      <Button onClick={onCancel} variant="contained">
 93        Cancel
 94      </Button>
 95    );
 96  }
 97
 98  return (
 99    <Paper className={classes.container}>
100      <form onSubmit={handleSubmit} ref={form}>
101        <CommentInput
102          inputProps={inputProp}
103          loading={loading}
104          onChange={(message: string) => setMessage(message)}
105          inputText={comment.message}
106        />
107        <div className={classes.actions}>
108          {onCancel && getCancelButton()}
109          <Button
110            className={classes.greenButton}
111            variant="contained"
112            color="primary"
113            type="submit"
114            disabled={loading || message.length === 0}
115          >
116            Update Comment
117          </Button>
118        </div>
119      </form>
120    </Paper>
121  );
122}
123
124export default EditCommentForm;