Display comment form on edit click

webui/src/pages/bug/Message.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import IconButton from '@material-ui/core/IconButton';
 import Paper from '@material-ui/core/Paper';
@@ -74,14 +74,15 @@ type Props = {
 
 function Message({ bug, op }: Props) {
   const classes = useStyles();
+  const [editMode, switchToEditMode] = useState(false);
 
   const editComment = (id: String) => {
+    switchToEditMode(true);
     console.log(id);
   };
 
+  function readMessageView() {
     return (
-    <article className={classes.container}>
-      <Avatar author={op.author} className={classes.avatar} />
       <Paper elevation={1} className={classes.bubble}>
         <header className={classes.header}>
           <div className={classes.title}>
@@ -90,6 +91,8 @@ function Message({ bug, op }: Props) {
             <Date date={op.createdAt} />
           </div>
           {op.edited && <div className={classes.tag}>Edited</div>}
+          <IfLoggedIn>
+            {() => (
               <Tooltip title="Edit Message" placement="top" arrow={true}>
                 <IconButton
                   disableRipple
@@ -100,18 +103,28 @@ function Message({ bug, op }: Props) {
                   <EditIcon />
                 </IconButton>
               </Tooltip>
+            )}
+          </IfLoggedIn>
         </header>
         <section className={classes.body}>
           <Content markdown={op.message} />
         </section>
       </Paper>
-      <IfLoggedIn>
+    );
-        {() => (
+  }
-          <div>
+
+  function editMessageView() {
+    return (
+      <div className={classes.bubble}>
         <CommentForm bug={bug} />
       </div>
-        )}
+    );
-      </IfLoggedIn>
+  }
+
+  return (
+    <article className={classes.container}>
+      <Avatar author={op.author} className={classes.avatar} />
+      {editMode ? editMessageView() : readMessageView()}
     </article>
   );
 }