add DeleteCommentModal component

resource/js/components/PageComment/Comment.js

@@ -21,6 +21,8 @@ export default class Comment extends React.Component {
     this.isCurrentUserIsAuthor = this.isCurrentUserEqualsToAuthor.bind(this);
     this.isCurrentRevision = this.isCurrentRevision.bind(this);
     this.getRootClassName = this.getRootClassName.bind(this);
+    this.getRevisionLabelClassName = this.getRevisionLabelClassName.bind(this);
+    this.deleteBtnClickedHandler = this.deleteBtnClickedHandler.bind(this);
   }
 
   isCurrentUserEqualsToAuthor() {
@@ -42,6 +44,10 @@ export default class Comment extends React.Component {
         + (this.isCurrentRevision() ? 'label-primary' : 'label-default');
   }
 
+  deleteBtnClickedHandler() {
+    this.props.deleteBtnClicked(this.props.comment);
+  }
+
   render() {
     const comment = this.props.comment;
     const creator = comment.creator;
@@ -63,7 +69,9 @@ export default class Comment extends React.Component {
             <a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a>
           </div>
           <div className="page-comment-control">
-            <a className="btn btn-link"><i className="fa fa-trash-o"></i></a>
+            <a className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
+              <i className="fa fa-trash-o"></i>
+            </a>
           </div>
         </div>
       </div>
@@ -75,4 +83,5 @@ Comment.propTypes = {
   comment: PropTypes.object.isRequired,
   currentRevisionId: PropTypes.string.isRequired,
   currentUserId: PropTypes.string.isRequired,
+  deleteBtnClicked: PropTypes.func.isRequired,
 };

resource/js/components/PageComment/DeleteCommentModal.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Modal } from 'react-bootstrap';
+
+import UserPicture from '../User/UserPicture';
+
+export default class DeleteCommentModal extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentWillMount() {
+  }
+
+  render() {
+    if (this.props.comment === undefined) {
+      return <div></div>
+    }
+
+    return (
+      <Modal show={this.props.isShown} onHide={this.props.cancel}>
+        <Modal.Header closeButton>
+          <Modal.Title>Delete comment?</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <h4>header</h4>
+          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.cancel}>Cancel</Button>
+          <Button onClick={this.props.confirmedToDelete} className="btn-danger">Delete</Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+
+}
+
+DeleteCommentModal.propTypes = {
+  isShown: PropTypes.bool.isRequired,
+  comment: PropTypes.object,
+  cancel: PropTypes.func.isRequired,            // for cancel evnet handling
+  confirmedToDelete: PropTypes.func.isRequired, // for confirmed event handling
+};

resource/js/components/PageComments.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Comment from './PageComment/Comment';
+import DeleteCommentModal from './PageComment/DeleteCommentModal';
 
 /**
  * Load data of comments and render the list of <Comment />
@@ -21,9 +22,17 @@ export default class PageComments extends React.Component {
       currentComments: [],
       newerComments: [],
       olderComments: [],
+
+      // for deleting comment
+      commentToDelete: undefined,
+      isDeleteConfirmModalShown: false,
     };
 
     this.init = this.init.bind(this);
+    this.confirmToDeleteComment = this.confirmToDeleteComment.bind(this);
+    this.deleteComment = this.deleteComment.bind(this);
+    this.showDeleteConfirmModal = this.showDeleteConfirmModal.bind(this);
+    this.closeDeleteConfirmModal = this.closeDeleteConfirmModal.bind(this);
   }
 
   componentWillMount() {
@@ -70,6 +79,31 @@ export default class PageComments extends React.Component {
 
   }
 
+  confirmToDeleteComment(comment) {
+    this.setState({commentToDelete: comment});
+    this.showDeleteConfirmModal();
+  }
+
+  deleteComment() {
+    const comment = this.state.commentToDelete;
+
+    // TODO delete
+    console.log(comment);
+
+    this.closeDeleteConfirmModal();
+  }
+
+  showDeleteConfirmModal() {
+    this.setState({isDeleteConfirmModalShown: true});
+  }
+
+  closeDeleteConfirmModal() {
+    this.setState({
+      commentToDelete: undefined,
+      isDeleteConfirmModalShown: false,
+    });
+  }
+
   /**
    * generate Elements of Comment
    *
@@ -82,7 +116,8 @@ export default class PageComments extends React.Component {
       return (
         <Comment key={comment._id} comment={comment}
           currentUserId={this.props.crowi.me}
-          currentRevisionId={this.props.revisionId} />
+          currentRevisionId={this.props.revisionId}
+          deleteBtnClicked={this.confirmToDeleteComment} />
       );
     });
   }
@@ -120,6 +155,13 @@ export default class PageComments extends React.Component {
         <div className="page-comments-list-older collapse in" id="page-comments-list-older">
           {olderElements}
         </div>
+
+        <DeleteCommentModal
+          isShown={this.state.isDeleteConfirmModalShown}
+          comment={this.state.commentToDelete}
+          cancel={this.closeDeleteConfirmModal}
+          confirmedToDelete={this.deleteComment}
+        />
       </div>
     );
   }