diff options
| -rw-r--r-- | webui/src/components/CommentInput/CommentInput.tsx | 5 | ||||
| -rw-r--r-- | webui/src/pages/bug/EditCommentForm.tsx | 43 | ||||
| -rw-r--r-- | webui/src/pages/bug/Message.tsx | 22 |
3 files changed, 30 insertions, 40 deletions
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx index 86cc7dbb..c574538e 100644 --- a/webui/src/components/CommentInput/CommentInput.tsx +++ b/webui/src/components/CommentInput/CommentInput.tsx @@ -51,6 +51,7 @@ const a11yProps = (index: number) => ({ type Props = { inputProps?: any; + inputText?: string; loading: boolean; onChange: (comment: string) => void; }; @@ -62,8 +63,8 @@ type Props = { * @param loading Disable input when component not ready yet * @param onChange Callback to return input value changes */ -function CommentInput({ inputProps, loading, onChange }: Props) { - const [input, setInput] = useState<string>(''); +function CommentInput({ inputProps, inputText, loading, onChange }: Props) { + const [input, setInput] = useState<string>(inputText ? inputText : ''); const [tab, setTab] = useState(0); const classes = useStyles(); diff --git a/webui/src/pages/bug/EditCommentForm.tsx b/webui/src/pages/bug/EditCommentForm.tsx index fb192a02..46cf1e1f 100644 --- a/webui/src/pages/bug/EditCommentForm.tsx +++ b/webui/src/pages/bug/EditCommentForm.tsx @@ -8,7 +8,8 @@ import CommentInput from '../../components/CommentInput/CommentInput'; import { BugFragment } from './Bug.generated'; import { useAddCommentMutation } from './CommentForm.generated'; -import { TimelineDocument } from './TimelineQuery.generated'; +import { AddCommentFragment } from './MessageCommentFragment.generated'; +import { CreateFragment } from './MessageCreateFragment.generated'; type StyleProps = { loading: boolean }; const useStyles = makeStyles<Theme, StyleProps>((theme) => ({ @@ -39,37 +40,22 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({ type Props = { bug: BugFragment; - commentId: string; - onCancleClick?: () => void; + comment: AddCommentFragment | CreateFragment; + onCancelClick?: () => void; + onPostSubmit?: () => void; }; -function EditCommentForm({ bug, commentId, onCancleClick }: Props) { +function EditCommentForm({ bug, comment, onCancelClick, onPostSubmit }: Props) { const [addComment, { loading }] = useAddCommentMutation(); - const [issueComment, setIssueComment] = useState(''); + const [issueComment, setIssueComment] = useState<string>(comment.message); const [inputProp, setInputProp] = useState<any>(''); const classes = useStyles({ loading }); const form = useRef<HTMLFormElement>(null); const submit = () => { - addComment({ - variables: { - input: { - prefix: bug.id, - message: issueComment, - }, - }, - refetchQueries: [ - // TODO: update the cache instead of refetching - { - query: TimelineDocument, - variables: { - id: bug.id, - first: 100, - }, - }, - ], - awaitRefetchQueries: true, - }).then(() => resetForm()); + console.log('submit: ' + issueComment); + resetForm(); + if (onPostSubmit) onPostSubmit(); }; function resetForm() { @@ -83,10 +69,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) { if (issueComment.length > 0) submit(); }; - function getCancleButton() { + function getCancelButton() { return ( - <Button onClick={onCancleClick} variant="contained"> - Cancle + <Button onClick={onCancelClick} variant="contained"> + Cancel </Button> ); } @@ -98,9 +84,10 @@ function EditCommentForm({ bug, commentId, onCancleClick }: Props) { inputProps={inputProp} loading={loading} onChange={(comment: string) => setIssueComment(comment)} + inputText={comment.message} /> <div className={classes.actions}> - {onCancleClick ? getCancleButton() : ''} + {onCancelClick ? getCancelButton() : ''} <Button className={classes.greenButton} variant="contained" diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 928e256f..08a55dc6 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -72,7 +72,7 @@ type Props = { op: AddCommentFragment | CreateFragment; }; -function Message({ bug, op }: Props) { +function Message({ bug, op: comment }: Props) { const classes = useStyles(); const [editMode, switchToEditMode] = useState(false); @@ -86,11 +86,11 @@ function Message({ bug, op }: Props) { <Paper elevation={1} className={classes.bubble}> <header className={classes.header}> <div className={classes.title}> - <Author className={classes.author} author={op.author} /> + <Author className={classes.author} author={comment.author} /> <span> commented </span> - <Date date={op.createdAt} /> + <Date date={comment.createdAt} /> </div> - {op.edited && <div className={classes.tag}>Edited</div>} + {comment.edited && <div className={classes.tag}>Edited</div>} <IfLoggedIn> {() => ( <Tooltip title="Edit Message" placement="top" arrow={true}> @@ -98,7 +98,7 @@ function Message({ bug, op }: Props) { disableRipple className={classes.editButton} aria-label="edit message" - onClick={() => editComment(op.id)} + onClick={() => editComment(comment.id)} > <EditIcon /> </IconButton> @@ -107,14 +107,14 @@ function Message({ bug, op }: Props) { </IfLoggedIn> </header> <section className={classes.body}> - <Content markdown={op.message} /> + <Content markdown={comment.message} /> </section> </Paper> ); } function editMessageView() { - const cancleEdition = () => { + const cancelEdition = () => { switchToEditMode(false); }; @@ -122,8 +122,10 @@ function Message({ bug, op }: Props) { <div className={classes.bubble}> <EditCommentForm bug={bug} - onCancleClick={cancleEdition} - commentId={op.id} + onCancelClick={cancelEdition} + // Close edit view after submitted changes + onPostSubmit={cancelEdition} + comment={comment} /> </div> ); @@ -131,7 +133,7 @@ function Message({ bug, op }: Props) { return ( <article className={classes.container}> - <Avatar author={op.author} className={classes.avatar} /> + <Avatar author={comment.author} className={classes.avatar} /> {editMode ? editMessageView() : readMessageView()} </article> ); |