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 Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import { Theme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import * as React from 'react';
import { useState, useRef } from 'react';
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: {
targetPrefix: comment.id,
message: message,
},
},
}).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;
|
