Several fixes

Sascha created 4 years ago

- Fix misspelling of cancel...
- Fix flickering of green "update comment" button
- Fill input with comment text
- Close edit view after submit

Change summary

webui/src/components/CommentInput/CommentInput.tsx |  5 +
webui/src/pages/bug/EditCommentForm.tsx            | 43 +++++----------
webui/src/pages/bug/Message.tsx                    | 22 ++++---
3 files changed, 30 insertions(+), 40 deletions(-)

Detailed changes

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();
 

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"

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>
   );