impl PageComments (calls api and remove comment instance from state)

resource/js/components/PageComment/DeleteCommentModal.js

@@ -41,6 +41,7 @@ export default class DeleteCommentModal extends React.Component {
           <p className="comment-body">{commentBody}</p>
         </Modal.Body>
         <Modal.Footer>
+          <span className="text-danger">{this.props.errorMessage}</span>&nbsp;
           <Button onClick={this.props.cancel}>Cancel</Button>
           <Button onClick={this.props.confirmedToDelete} className="btn-danger">Delete</Button>
         </Modal.Footer>
@@ -53,6 +54,7 @@ export default class DeleteCommentModal extends React.Component {
 DeleteCommentModal.propTypes = {
   isShown: PropTypes.bool.isRequired,
   comment: PropTypes.object,
+  errorMessage: PropTypes.string,
   cancel: PropTypes.func.isRequired,            // for cancel evnet handling
   confirmedToDelete: PropTypes.func.isRequired, // for confirmed event handling
 };

resource/js/components/PageComments.js

@@ -19,13 +19,12 @@ export default class PageComments extends React.Component {
     super(props);
 
     this.state = {
-      currentComments: [],
-      newerComments: [],
-      olderComments: [],
+      comments: [],
 
       // for deleting comment
       commentToDelete: undefined,
       isDeleteConfirmModalShown: false,
+      errorMessageForDeleting: undefined,
     };
 
     this.init = this.init.bind(this);
@@ -49,29 +48,11 @@ export default class PageComments extends React.Component {
     }
 
     const pageId = this.props.pageId;
-    const revisionId = this.props.revisionId;
-    const revisionCreatedAt = this.props.revisionCreatedAt;
 
     this.props.crowi.apiGet('/comments.get', {page_id: pageId})
     .then(res => {
       if (res.ok) {
-        let currentComments = [];
-        let newerComments = [];
-        let olderComments = [];
-
-        // divide by revisionId and createdAt
-        res.comments.forEach((comment) => {
-          if (comment.revision == revisionId) {
-            currentComments.push(comment);
-          }
-          else if (Date.parse(comment.createdAt)/1000 > revisionCreatedAt) {
-            newerComments.push(comment);
-          }
-          else {
-            olderComments.push(comment);
-          }
-        });
-        this.setState({currentComments, newerComments, olderComments});
+        this.setState({comments: res.comments});
       }
     }).catch(err => {
 
@@ -87,10 +68,27 @@ export default class PageComments extends React.Component {
   deleteComment() {
     const comment = this.state.commentToDelete;
 
-    // TODO delete
-    console.log(comment);
+    this.props.crowi.apiPost('/comments.remove', {comment_id: comment._id})
+    .then(res => {
+      if (res.ok) {
+        this.findAndSplice(comment);
+      }
+      this.closeDeleteConfirmModal();
+    }).catch(err => {
+      this.setState({errorMessageForDeleting: err.message});
+    });
+  }
+
+  findAndSplice(comment) {
+    let comments = this.state.comments;
 
-    this.closeDeleteConfirmModal();
+    const index = comments.indexOf(comment);
+    if (index < 0) {
+      return;
+    }
+    comments.splice(index, 1);
+
+    this.setState({comments});
   }
 
   showDeleteConfirmModal() {
@@ -101,6 +99,7 @@ export default class PageComments extends React.Component {
     this.setState({
       commentToDelete: undefined,
       isDeleteConfirmModalShown: false,
+      errorMessageForDeleting: undefined,
     });
   }
 
@@ -123,9 +122,29 @@ export default class PageComments extends React.Component {
   }
 
   render() {
-    let currentElements = this.generateCommentElements(this.state.currentComments);
-    let newerElements = this.generateCommentElements(this.state.newerComments);
-    let olderElements = this.generateCommentElements(this.state.olderComments);
+    let currentComments = [];
+    let newerComments = [];
+    let olderComments = [];
+
+    // divide by revisionId and createdAt
+    const revisionId = this.props.revisionId;
+    const revisionCreatedAt = this.props.revisionCreatedAt;
+    this.state.comments.forEach((comment) => {
+      if (comment.revision == revisionId) {
+        currentComments.push(comment);
+      }
+      else if (Date.parse(comment.createdAt)/1000 > revisionCreatedAt) {
+        newerComments.push(comment);
+      }
+      else {
+        olderComments.push(comment);
+      }
+    });
+
+    // generate elements
+    let currentElements = this.generateCommentElements(currentComments);
+    let newerElements = this.generateCommentElements(newerComments);
+    let olderElements = this.generateCommentElements(olderComments);
 
     let toggleNewer = (newerElements.length === 0)
       ? <div></div>
@@ -159,6 +178,7 @@ export default class PageComments extends React.Component {
         <DeleteCommentModal
           isShown={this.state.isDeleteConfirmModalShown}
           comment={this.state.commentToDelete}
+          errorMessage={this.state.errorMessageForDeleting}
           cancel={this.closeDeleteConfirmModal}
           confirmedToDelete={this.deleteComment}
         />