PageComments.js ref & replyTo handling need still to be worked on

src/client/js/app.js

@@ -29,6 +29,7 @@ import Page from './components/Page';
 import PageHistory from './components/PageHistory';
 import PageComments from './components/PageComments';
 import CommentForm from './components/PageComment/CommentForm';
+import CommentFormBase from './components/PageComment/CommentFormBase';
 import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
 import RevisionPath from './components/Page/RevisionPath';
@@ -314,21 +315,25 @@ let pageComments = null;
 if (pageId) {
   componentMappings['page-comments-list'] = (
     <I18nextProvider i18n={i18n}>
-      <PageComments
-        ref={(elem) => {
-            if (pageComments == null) {
-              pageComments = elem;
-            }
-          }}
+      <CommentFormBase
         pageId={pageId}
         pagePath={pagePath}
+        onPostComplete={null}
         revisionId={pageRevisionId}
         revisionCreatedAt={pageRevisionCreatedAt}
-        crowi={crowi}
-        crowiOriginRenderer={crowiRenderer}
         editorOptions={pageEditorOptions}
         slackChannels={slackChannels}
-      />
+      >
+        <PageComments
+          ref={(elem) => {
+            if (pageComments == null) {
+              pageComments = elem;
+            }
+          }}
+          crowi={crowi}
+          crowiOriginRenderer={crowiRenderer}
+        />
+      </CommentFormBase>
     </I18nextProvider>
   );
   componentMappings['page-attachment'] = <PageAttachment pageId={pageId} markdown={markdown} crowi={crowi} />;
@@ -513,16 +518,21 @@ if (writeCommentElem) {
   };
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
-      <CommentForm
-        crowi={crowi}
-        crowiOriginRenderer={crowiRenderer}
+      <CommentFormBase
         pageId={pageId}
         pagePath={pagePath}
-        revisionId={pageRevisionId}
         onPostComplete={postCompleteHandler}
-        editorOptions={editorOptions}
+        revisionId={pageRevisionId}
+        revisionCreatedAt={pageRevisionCreatedAt}
+        editorOptions={pageEditorOptions}
         slackChannels={slackChannels}
-      />
+        replyTo={undefined}
+      >
+        <CommentForm
+          crowi={crowi}
+          crowiOriginRenderer={crowiRenderer}
+        />
+      </CommentFormBase>
     </I18nextProvider>,
     writeCommentElem,
   );

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

@@ -10,6 +10,7 @@ import RevisionBody from '../Page/RevisionBody';
 import ReactUtils from '../ReactUtils';
 import UserPicture from '../User/UserPicture';
 import Username from '../User/Username';
+import CommentFormBase from './CommentFormBase';
 
 /**
  *
@@ -60,11 +61,11 @@ export default class Comment extends React.Component {
   }
 
   isCurrentUserEqualsToAuthor() {
-    return this.props.comment.creator.username === this.props.currentUserId;
+    return this.props.comment.creator.username === this.props.crowi.me;
   }
 
   isCurrentRevision() {
-    return this.props.comment.revision === this.props.currentRevisionId;
+    return this.props.comment.revision === this.props.data.revisionId;
   }
 
   getRootClassName() {
@@ -174,17 +175,15 @@ export default class Comment extends React.Component {
         {
           this.state.showCommentForm
           && (
-          <CommentForm
-            crowi={this.props.crowi}
-            crowiOriginRenderer={this.props.crowiRenderer}
-            pageId={this.props.pageId}
-            pagePath={this.props.pagePath}
-            revisionId={this.props.revisionId}
-            onPostComplete={this.props.onPostComplete}
-            editorOptions={this.props.editorOptions}
-            slackChannels={this.props.slackChannels}
-            replyTo={comment._id.toString()}
-          />
+          <CommentFormBase
+            data={this.props.data}
+          >
+            <CommentForm
+              crowi={this.props.crowi}
+              crowiOriginRenderer={this.props.crowiRenderer}
+              replyTo={comment._id.toString()}
+            />
+          </CommentFormBase>
         )
         }
       </div>
@@ -198,14 +197,8 @@ Comment.propTypes = {
   crowi: PropTypes.object.isRequired,
   crowiOriginRenderer: PropTypes.object.isRequired,
   crowiRenderer: PropTypes.object.isRequired,
-  pageId: PropTypes.string,
-  pagePath: PropTypes.string,
-  revisionId: PropTypes.string,
   onPostComplete: PropTypes.func,
-  editorOptions: PropTypes.object,
-  slackChannels: PropTypes.string,
-  currentRevisionId: PropTypes.string.isRequired,
-  currentUserId: PropTypes.string.isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
   replyTo: PropTypes.string,
+  data: PropTypes.object,
 };

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

@@ -370,12 +370,13 @@ export default class CommentForm extends React.Component {
 CommentForm.propTypes = {
   crowi: PropTypes.object.isRequired,
   crowiOriginRenderer: PropTypes.object.isRequired,
-  onPostComplete: PropTypes.func,
   pageId: PropTypes.string,
-  revisionId: PropTypes.string,
   pagePath: PropTypes.string,
+  onPostComplete: PropTypes.func,
   editorOptions: PropTypes.object,
   slackChannels: PropTypes.string,
+  revisionId: PropTypes.string,
+  revisionCreatedAt: PropTypes.number,
   replyTo: PropTypes.string,
 };
 CommentForm.defaultProps = {

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// import { withTranslation } from 'react-i18next';
+
+/**
+ * @author Shin Oka <okas@weseek.co.jp>
+ *
+ * @export
+ * @class CommentFormBase
+ * @extends {React.Component}
+ */
+
+export default class CommentFormBase extends React.Component {
+
+  render() {
+    let childrenWithProps;
+    if (this.props.data !== undefined) {
+      childrenWithProps = React.Children.map(this.props.children, (child) => {
+        return React.cloneElement(child, this.props.data);
+      });
+    }
+    else {
+      const data = {
+        pageId: this.props.pageId,
+        pagePath: this.props.pagePath,
+        onPostComplete: this.props.onPostComplete,
+        revisionId: this.props.revisionId,
+        revisionCreatedAt: this.props.revisionCreatedAt,
+        editorOptions: this.props.editorOptions,
+        slackChannels: this.props.slackChannels,
+      };
+
+      childrenWithProps = React.Children.map(this.props.children, (child) => {
+        return React.cloneElement(child, data);
+      });
+    }
+
+    return <div>{childrenWithProps}</div>;
+  }
+
+}
+
+CommentFormBase.propTypes = {
+  children: PropTypes.node,
+  pageId: PropTypes.string,
+  pagePath: PropTypes.string,
+  onPostComplete: PropTypes.func,
+  editorOptions: PropTypes.object,
+  slackChannels: PropTypes.string,
+  revisionId: PropTypes.string,
+  revisionCreatedAt: PropTypes.number,
+  data: PropTypes.object,
+};

src/client/js/components/PageComments.js

@@ -140,6 +140,15 @@ class PageComments extends React.Component {
    */
   generateCommentElements(comments, replies) {
     const commentsWithReplies = this.reorderBasedOnReplies(comments, replies);
+    const tempData = {
+      pageId: this.props.pageId,
+      pagePath: this.props.pagePath,
+      onPostComplete: this.props.onPostComplete,
+      revisionId: this.props.revisionId,
+      revisionCreatedAt: this.props.revisionCreatedAt,
+      editorOptions: this.props.editorOptions,
+      slackChannels: this.props.slackChannels,
+    };
     return commentsWithReplies.map((comment) => {
       return (
         <Comment
@@ -147,17 +156,11 @@ class PageComments extends React.Component {
           comment={comment}
           crowi={this.props.crowi}
           crowiOriginRenderer={this.props.crowiOriginRenderer}
-          pageId={this.props.pageId}
-          pagePath={this.props.pagePath}
-          revisionId={this.props.revisionId}
           onPostComplete={this.retrieveData}
-          editorOptions={this.props.editorOptions}
-          slackChannels={this.props.slackChannels}
-          currentUserId={this.props.crowi.me}
-          currentRevisionId={this.props.revisionId}
           deleteBtnClicked={this.confirmToDeleteComment}
           crowiRenderer={this.growiRenderer}
           replyTo={comment.replyTo}
+          data={tempData}
         />
       );
     });

src/server/routes/comment.js

@@ -74,7 +74,7 @@ module.exports = function(crowi, app) {
     const comment = commentForm.comment;
     const position = commentForm.comment_position || -1;
     const isMarkdown = commentForm.is_markdown;
-    const replyTo = commentForm.replyTo;
+    const replyTo = commentForm.replyTo === '' ? undefined : commentForm.replyTo;
 
     // check whether accessible
     const isAccessible = await Page.isAccessiblePageByViewer(pageId, req.user);