1import Button from '@mui/material/Button';
  2import Paper from '@mui/material/Paper';
  3import { Theme } from '@mui/material/styles';
  4import makeStyles from '@mui/styles/makeStyles';
  5import * as React from 'react';
  6import { useState, useRef } from 'react';
  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          targetPrefix: comment.id,
 62          message: message,
 63        },
 64      },
 65    }).then((result) => {
 66      const comments = result.data?.bugEditComment.bug.timeline.comments as (
 67        | AddCommentFragment
 68        | CreateFragment
 69      )[];
 70      // NOTE Searching for the changed comment could be dropped if GraphQL get
 71      // filter by id argument for timelineitems
 72      const modifiedComment = comments.find((elem) => elem.id === comment.id);
 73      if (onPostSubmit) onPostSubmit(modifiedComment);
 74    });
 75    resetForm();
 76  };
 77
 78  function resetForm() {
 79    setInputProp({
 80      value: '',
 81    });
 82  }
 83
 84  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 85    e.preventDefault();
 86    if (message.length > 0) submit();
 87  };
 88
 89  function getCancelButton() {
 90    return (
 91      <Button onClick={onCancel} variant="contained">
 92        Cancel
 93      </Button>
 94    );
 95  }
 96
 97  return (
 98    <Paper className={classes.container}>
 99      <form onSubmit={handleSubmit} ref={form}>
100        <CommentInput
101          inputProps={inputProp}
102          loading={loading}
103          onChange={(message: string) => setMessage(message)}
104          inputText={comment.message}
105        />
106        <div className={classes.actions}>
107          {onCancel && getCancelButton()}
108          <Button
109            className={classes.greenButton}
110            variant="contained"
111            color="primary"
112            type="submit"
113            disabled={loading || message.length === 0}
114          >
115            Update Comment
116          </Button>
117        </div>
118      </form>
119    </Paper>
120  );
121}
122
123export default EditCommentForm;