functionallity is fine --> needs formatting now

src/client/js/app.js

@@ -54,6 +54,7 @@ if (!window) {
 
 const userlang = $('body').data('userlang');
 const i18n = i18nFactory(userlang);
+i18n.init({ react: { withRef: true } });
 
 // setup xss library
 const xss = new Xss();
@@ -310,25 +311,27 @@ const componentMappings = {
 
 };
 // additional definitions if data exists
+let pageComments = null;
 if (pageId) {
-  const pagePostCompleteHandler = () => {
-    // TODO
-  };
-  const temp = (
-    <PageComments
-      pageId={pageId}
-      pagePath={pagePath}
-      revisionId={pageRevisionId}
-      revisionCreatedAt={pageRevisionCreatedAt}
-      onPostComplete={pagePostCompleteHandler}
-      crowi={crowi}
-      crowiOriginRenderer={crowiRenderer}
-      editorOptions={pageEditorOptions}
-      slackChannels={slackChannels}
-    />
+  componentMappings['page-comments-list'] = (
+    <I18nextProvider i18n={i18n}>
+      <PageComments
+        ref={(elem) => {
+            if (pageComments == null) {
+              pageComments = elem;
+            }
+          }}
+        pageId={pageId}
+        pagePath={pagePath}
+        revisionId={pageRevisionId}
+        revisionCreatedAt={pageRevisionCreatedAt}
+        crowi={crowi}
+        crowiOriginRenderer={crowiRenderer}
+        editorOptions={pageEditorOptions}
+        slackChannels={slackChannels}
+      />
+    </I18nextProvider>
   );
-  componentMappings['page-comments-form'] = temp;
-  componentMappings['page-comments-list'] = <I18nextProvider i18n={i18n}>{temp}</I18nextProvider>;
   componentMappings['page-attachment'] = <PageAttachment pageId={pageId} markdown={markdown} crowi={crowi} />;
 }
 if (pagePath) {
@@ -503,10 +506,10 @@ if (pageEditorElem) {
 // render comment form
 const writeCommentElem = document.getElementById('page-comment-write');
 if (writeCommentElem) {
-  const pageCommentsElem = componentInstances['page-comments-form'];
+  const pageCommentsElem = componentMappings['page-comments-list'];
   const postCompleteHandler = (comment) => {
     if (pageCommentsElem != null) {
-      pageCommentsElem.retrieveData(); // this needs to be configured
+      pageComments.retrieveData(); // this needs to be configured
     }
   };
   ReactDOM.render(

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

@@ -123,6 +123,7 @@ export default class CommentForm extends React.Component {
       .then((res) => {
         if (this.props.onPostComplete != null) {
           this.props.onPostComplete(res.comment);
+          this.forceUpdate();
         }
         this.setState({
           comment: '',

src/client/js/components/PageComments.js

@@ -2,8 +2,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { withTranslation } from 'react-i18next';
 import GrowiRenderer from '../util/GrowiRenderer';
 
+
 import Comment from './PageComment/Comment';
 import DeleteCommentModal from './PageComment/DeleteCommentModal';
 
@@ -16,11 +18,13 @@ import DeleteCommentModal from './PageComment/DeleteCommentModal';
  * @class PageComments
  * @extends {React.Component}
  */
-export default class PageComments extends React.Component {
+class PageComments extends React.Component {
 
   constructor(props) {
     super(props);
 
+    this.elem = React.createRef();
+
     this.state = {
       // desc order array
       comments: [],
@@ -133,7 +137,7 @@ export default class PageComments extends React.Component {
           pageId={this.props.pageId}
           pagePath={this.props.pagePath}
           revisionId={this.props.revisionId}
-          onPostComplete={this.props.onPostComplete}
+          onPostComplete={this.retrieveData}
           editorOptions={this.props.editorOptions}
           slackChannels={this.props.slackChannels}
           currentUserId={this.props.crowi.me}
@@ -256,6 +260,7 @@ export default class PageComments extends React.Component {
 }
 
 PageComments.propTypes = {
+  t: PropTypes.func.isRequired,
   pageId: PropTypes.string,
   pagePath: PropTypes.string,
   onPostComplete: PropTypes.func,
@@ -266,3 +271,5 @@ PageComments.propTypes = {
   crowi: PropTypes.object.isRequired,
   crowiOriginRenderer: PropTypes.object.isRequired,
 };
+
+export default withTranslation(null, { withRef: true })(PageComments);