Merge pull request #1158 from weseek/add-edit-button

Add edit button

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

@@ -39,6 +39,7 @@ class Comment extends React.Component {
     this.isCurrentRevision = this.isCurrentRevision.bind(this);
     this.getRootClassName = this.getRootClassName.bind(this);
     this.getRevisionLabelClassName = this.getRevisionLabelClassName.bind(this);
+    this.editBtnClickedHandler = this.editBtnClickedHandler.bind(this);
     this.deleteBtnClickedHandler = this.deleteBtnClickedHandler.bind(this);
     this.renderText = this.renderText.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
@@ -91,6 +92,10 @@ class Comment extends React.Component {
       this.isCurrentRevision() ? 'label-primary' : 'label-default'}`;
   }
 
+  editBtnClickedHandler() {
+    this.props.editBtnClicked(this.props.comment);
+  }
+
   deleteBtnClickedHandler() {
     this.props.deleteBtnClicked(this.props.comment);
   }
@@ -156,6 +161,7 @@ class Comment extends React.Component {
       <div key={reply._id} className="page-comment-reply">
         <CommentWrapper
           comment={reply}
+          editBtnClicked={this.props.editBtnClicked}
           deleteBtnClicked={this.props.deleteBtnClicked}
           growiRenderer={this.props.growiRenderer}
         />
@@ -250,6 +256,10 @@ class Comment extends React.Component {
               <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>
@@ -278,6 +288,7 @@ Comment.propTypes = {
 
   comment: PropTypes.object.isRequired,
   growiRenderer: PropTypes.object.isRequired,
+  editBtnClicked: PropTypes.func.isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
   replyList: PropTypes.array,
 };

src/client/js/components/PageComments.jsx

@@ -42,6 +42,7 @@ class PageComments extends React.Component {
     this.growiRenderer = this.props.appContainer.getRenderer('comment');
 
     this.init = this.init.bind(this);
+    this.confirmToEditComment = this.confirmToEditComment.bind(this);
     this.confirmToDeleteComment = this.confirmToDeleteComment.bind(this);
     this.deleteComment = this.deleteComment.bind(this);
     this.showDeleteConfirmModal = this.showDeleteConfirmModal.bind(this);
@@ -62,6 +63,11 @@ class PageComments extends React.Component {
     this.props.commentContainer.retrieveComments();
   }
 
+  confirmToEditComment(comment) {
+    // TODO GW-141 show editor
+    console.log("Pushed Edit button");
+  }
+
   confirmToDeleteComment(comment) {
     this.setState({ commentToDelete: comment });
     this.showDeleteConfirmModal();
@@ -138,6 +144,7 @@ class PageComments extends React.Component {
       <div key={commentId} className={`mb-5 ${rootClassNames}`}>
         <Comment
           comment={comment}
+          editBtnClicked={this.confirmToEditComment}
           deleteBtnClicked={this.confirmToDeleteComment}
           growiRenderer={this.growiRenderer}
           replyList={replies}