add conditional branch for reEdit

src/client/js/components/PageComment/Comment.jsx

@@ -33,6 +33,7 @@ class Comment extends React.Component {
     this.state = {
       html: '',
       isOlderRepliesShown: false,
+      showReEditorIds: new Set(),
     };
 
     this.isCurrentUserIsAuthor = this.isCurrentUserEqualsToAuthor.bind(this);
@@ -92,8 +93,9 @@ class Comment extends React.Component {
       this.isCurrentRevision() ? 'label-primary' : 'label-default'}`;
   }
 
-  editBtnClickedHandler() {
-    this.props.editBtnClicked(this.props.comment);
+  editBtnClickedHandler(commentId) {
+    const ids = this.state.showReEditorIds.add(commentId);
+    this.setState({ showReEditorIds: ids });
   }
 
   deleteBtnClickedHandler() {
@@ -223,9 +225,12 @@ class Comment extends React.Component {
 
   render() {
     const comment = this.props.comment;
+    const commentId = comment._id;
     const creator = comment.creator;
     const isMarkdown = comment.isMarkdown;
 
+    const showReEditor = this.state.showReEditorIds.has(commentId);
+
     const rootClassName = this.getRootClassName(comment);
     const commentDate = distanceInWordsStrict(comment.createdAt, new Date());
     const commentBody = isMarkdown ? this.renderRevisionBody() : this.renderText(comment.comment);
@@ -242,31 +247,33 @@ class Comment extends React.Component {
     return (
       <React.Fragment>
 
-        <div className={rootClassName}>
-          <UserPicture user={creator} />
-          <div className="page-comment-main">
-            <div className="page-comment-creator">
-              <Username user={creator} />
-            </div>
-            <div className="page-comment-body">{commentBody}</div>
-            <div className="page-comment-meta">
-              <OverlayTrigger overlay={commentDateTooltip} placement="bottom">
-                <span>{commentDate}</span>
-              </OverlayTrigger>
-              <span className="ml-2"><a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a></span>
-            </div>
-            <div className="page-comment-control">
-              {/* TODO GW-63 adjust layout */}
-              <button type="button" className="btn btn-link" onClick={this.editBtnClickedHandler}>
-                <i className="ti-pencil"></i>
-              </button>
-              <button type="button" className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
-                <i className="ti-close"></i>
-              </button>
+        {showReEditor ? (<p>reEditは押された</p>) : (
+          <div className={rootClassName}>
+            <UserPicture user={creator} />
+            <div className="page-comment-main">
+              <div className="page-comment-creator">
+                <Username user={creator} />
+              </div>
+              <div className="page-comment-body">{commentBody}</div>
+              <div className="page-comment-meta">
+                <OverlayTrigger overlay={commentDateTooltip} placement="bottom">
+                  <span>{commentDate}</span>
+                </OverlayTrigger>
+                <span className="ml-2"><a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a></span>
+              </div>
+              <div className="page-comment-control">
+                {/* TODO GW-63 adjust layout */}
+                <button type="button" className="btn btn-link" onClick={() => { this.editBtnClickedHandler(commentId) }}>
+                  <i className="ti-pencil"></i>
+                </button>
+                <button type="button" className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
+                  <i className="ti-close"></i>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-
+        )
+      }
         {this.renderReplies()}
 
       </React.Fragment>