aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages/bug/EditCommentForm.tsx
blob: 8fa659b3bf2b65866b32ef0a05da64b24246b94e (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
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 { BugFragment } from './Bug.generated';
import { useEditCommentMutation } from './EditCommentForm.generated';
import { AddCommentFragment } from './MessageCommentFragment.generated';
import { CreateFragment } from './MessageCreateFragment.generated';

type StyleProps = { loading: boolean };
const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
  container: {
    padding: theme.spacing(0, 2, 2, 2),
  },
  textarea: {},
  tabContent: {
    margin: theme.spacing(2, 0),
  },
  preview: {
    borderBottom: `solid 3px ${theme.palette.grey['200']}`,
    minHeight: '5rem',
  },
  actions: {
    display: 'flex',
    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.success.contrastText,
    },
  },
}));

type Props = {
  bug: BugFragment;
  comment: AddCommentFragment | CreateFragment;
  onCancel?: () => void;
  onPostSubmit?: (comments: any) => void;
};

function EditCommentForm({ bug, comment, onCancel, onPostSubmit }: Props) {
  const [editComment, { loading }] = useEditCommentMutation();
  const [message, setMessage] = useState<string>(comment.message);
  const [inputProp, setInputProp] = useState<any>('');
  const classes = useStyles({ loading });
  const form = useRef<HTMLFormElement>(null);

  const submit = () => {
    editComment({
      variables: {
        input: {
          prefix: bug.id,
          message: message,
          target: comment.id,
        },
      },
    }).then((result) => {
      const comments = result.data?.editComment.bug.timeline.comments as (
        | AddCommentFragment
        | CreateFragment
      )[];
      // NOTE Searching for the changed comment could be dropped if GraphQL get
      // filter by id argument for timelineitems
      const modifiedComment = comments.find((elem) => elem.id === comment.id);
      if (onPostSubmit) onPostSubmit(modifiedComment);
    });
    resetForm();
  };

  function resetForm() {
    setInputProp({
      value: '',
    });
  }

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (message.length > 0) submit();
  };

  function getCancelButton() {
    return (
      <Button onClick={onCancel} variant="contained">
        Cancel
      </Button>
    );
  }

  return (
    <Paper className={classes.container}>
      <form onSubmit={handleSubmit} ref={form}>
        <CommentInput
          inputProps={inputProp}
          loading={loading}
          onChange={(message: string) => setMessage(message)}
          inputText={comment.message}
        />
        <div className={classes.actions}>
          {onCancel && getCancelButton()}
          <Button
            className={classes.greenButton}
            variant="contained"
            color="primary"
            type="submit"
            disabled={loading || message.length === 0}
          >
            Update Comment
          </Button>
        </div>
      </form>
    </Paper>
  );
}

export default EditCommentForm;