impl processing to post and add comments

src/client/js/app.js

@@ -113,6 +113,9 @@ const crowiRenderer = new GrowiRenderer(crowi, null, {
 });
 window.crowiRenderer = crowiRenderer;
 
+// create unstated container instance
+const commentContainer = new CommentContainer(crowi, pageId, pageRevisionId);
+
 // FIXME
 const isEnabledPlugins = $('body').data('plugin-enabled');
 if (isEnabledPlugins) {
@@ -315,9 +318,6 @@ const componentMappings = {
 // additional definitions if data exists
 let pageComments = null;
 if (pageId) {
-  // create unstated container instance
-  const commentContainer = new CommentContainer(crowi, pageId, pageRevisionId);
-
   componentMappings['page-comments-list'] = (
     <I18nextProvider i18n={i18n}>
       <Provider inject={[commentContainer]}>
@@ -510,19 +510,9 @@ if (pageEditorElem) {
   crowi.setPageEditor(pageEditor);
 }
 
-const pageCommentsElem = componentMappings['page-comments-list'];
-const postCompleteHandler = (comment) => {
-  if (pageCommentsElem != null) {
-    pageComments.retrieveData();
-  }
-};
-
 // render comment form
 const writeCommentElem = document.getElementById('page-comment-write');
 if (writeCommentElem) {
-  // create unstated container instance
-  const commentContainer = new CommentContainer(crowi, pageId, pageRevisionId);
-
   ReactDOM.render(
     <Provider inject={[commentContainer]}>
       <I18nextProvider i18n={i18n}>

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

@@ -18,6 +18,8 @@ export default class CommentContainer extends Container {
     this.state = {
       comments: [],
     };
+
+    this.add = this.add.bind(this);
   }
 
   init() {
@@ -26,17 +28,11 @@ export default class CommentContainer extends Container {
     }
   }
 
-  /**
-   * Load data of comments and store them in state
-   */
-  retrieveComments() {
-    // get data (desc order array)
-    this.crowi.apiGet('/comments.get', { page_id: this.pageId })
-      .then((res) => {
-        if (res.ok) {
-          this.setState({ comments: res.comments });
-        }
-      });
+  add(comment) {
+    const comments = this.state.comments;
+
+    comments.push(comment);
+    this.setState({ comments });
   }
 
   findAndSplice(comment) {
@@ -51,6 +47,19 @@ export default class CommentContainer extends Container {
     this.setState({ comments });
   }
 
+  /**
+   * Load data of comments and store them in state
+   */
+  retrieveComments() {
+    // get data (desc order array)
+    this.crowi.apiGet('/comments.get', { page_id: this.pageId })
+      .then((res) => {
+        if (res.ok) {
+          this.setState({ comments: res.comments });
+        }
+      });
+  }
+
   /**
    * Load data of comments and rerender <PageComments />
    */
@@ -68,7 +77,12 @@ export default class CommentContainer extends Container {
         isSlackEnabled,
         slackChannels,
       },
-    });
+    })
+      .then((res) => {
+        if (res.ok) {
+          this.add(res.comment);
+        }
+      });
   }
 
   deleteComment(comment) {

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

@@ -112,9 +112,6 @@ export default class CommentEditor extends React.Component {
       this.state.slackChannels,
     )
       .then((res) => {
-        if (this.props.onPostComplete != null) {
-          this.props.onPostComplete(res.comment);
-        }
         this.setState({
           comment: '',
           isMarkdown: true,