WIP: add onPostComplete event to CommentForm component

resource/js/app.js

@@ -131,7 +131,15 @@ Object.keys(componentMappings).forEach((key) => {
 // render comment form
 const writeCommentElem = document.getElementById('page-comment-write');
 if (writeCommentElem) {
-  ReactDOM.render(<CommentForm pageComments={componentInstances['page-comments-list']} crowi={crowi} pageId={pageId} revisionId={pageRevisionId} />, writeCommentElem);
+  const pageCommentsElem = componentInstances['page-comments-list'];
+  const postCompleteHandler = (comment) => {
+    if (pageCommentsElem != null) {
+      pageCommentsElem.retrieveData();
+    }
+  };
+  ReactDOM.render(
+    <CommentForm crowi={crowi} pageId={pageId} revisionId={pageRevisionId} onPostComplete={postCompleteHandler} />,
+    writeCommentElem);
 }
 
 /*

resource/js/components/PageComment/CommentForm.js

@@ -21,7 +21,6 @@ export default class CommentForm extends React.Component {
 
     this.handleChange = this.handleChange.bind(this);
     this.postComment = this.postComment.bind(this);
-    this.reload = this.reload.bind(this);
   }
 
   handleChange(event) {
@@ -45,19 +44,13 @@ export default class CommentForm extends React.Component {
         is_markdown: this.state.isMarkdown,
       }
     })
-      .then(() => {
-        this.reload();
+      .then((res) => {
+        if (this.props.onPostComplete != null) {
+          this.props.onPostComplete(res.comment);
+        }
       });
   }
 
-  reload() {
-    this.props.pageComments.init();
-    this.setState({
-      comment: '',
-      isMarkdown: false,
-    });
-  }
-
   render() {
     //{% if not user %}disabled{% endif %}をtextareaとbuttonに追加
     // denounce/throttle
@@ -92,8 +85,8 @@ export default class CommentForm extends React.Component {
 }
 
 CommentForm.propTypes = {
-  pageComments: PropTypes.object.isRequired,
   crowi: PropTypes.object.isRequired,
+  onPostComplete: PropTypes.func,
   pageId: PropTypes.string,
   revisionId: PropTypes.string,
 };

resource/js/components/PageComments.js

@@ -47,6 +47,8 @@ export default class PageComments extends React.Component {
     if (pageId) {
       this.init();
     }
+
+    this.retrieveData = this.retrieveData.bind(this);
   }
 
   init() {
@@ -54,21 +56,20 @@ export default class PageComments extends React.Component {
       return ;
     }
 
-    const pageId = this.props.pageId;
-
     const layoutType = this.props.crowi.getConfig()['layoutType'];
     this.setState({isLayoutTypeGrowi: 'crowi-plus' === layoutType || 'growi' === layoutType});
 
-    // get data (desc order array)
-    this.props.crowi.apiGet('/comments.get', {page_id: pageId})
-    .then(res => {
-      if (res.ok) {
-        this.setState({comments: res.comments});
-      }
-    }).catch(err => {
-
-    });
+    this.retrieveData();
+  }
 
+  retrieveData() {
+    // get data (desc order array)
+    this.props.crowi.apiGet('/comments.get', {page_id: this.props.pageId})
+      .then(res => {
+        if (res.ok) {
+          this.setState({comments: res.comments});
+        }
+      });
   }
 
   confirmToDeleteComment(comment) {