fb changes + formatting changes

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

@@ -136,15 +136,6 @@ export default class Comment extends React.Component {
     const revHref = `?revision=${comment.revision}`;
     const revFirst8Letters = comment.revision.substr(-8);
     const revisionLavelClassName = this.getRevisionLabelClassName();
-    const replyButton = (
-      <Button
-        type="button"
-        className="fcbtn btn btn-primary btn-sm btn-success btn-rounded btn-1b"
-        onClick={this.showForm}
-      >
-              Reply
-      </Button>
-    );
 
     return (
       <div>
@@ -155,8 +146,19 @@ export default class Comment extends React.Component {
               <Username user={creator} />
             </div>
             <div className="page-comment-body">{commentBody}</div>
-            <div className="page-comment-reply">
-              {replyButton}
+            <div className="page-comment-reply text-right">
+              {
+                comment.replyTo === undefined
+                && (
+                  <Button
+                    type="button"
+                    className="fcbtn btn btn-primary btn-sm btn-success btn-rounded btn-1b"
+                    onClick={this.showForm}
+                  >
+                    Reply
+                  </Button>
+                )
+              }
             </div>
             <div className="page-comment-meta">
               {commentDate}&nbsp;

src/client/js/components/PageComments.js

@@ -116,6 +116,21 @@ class PageComments extends React.Component {
     });
   }
 
+  // inserts reply after each corresponding comment
+  reorderBasedOnReplies(comments, replies) {
+    // const connections = this.findConnections(comments, replies);
+    // const replyConnections = this.findConnectionsWithinReplies(replies);
+    const repliesReversed = replies.slice().reverse();
+    for (let i = 0; i < comments.length; i++) {
+      for (let j = 0; j < repliesReversed.length; j++) {
+        if (repliesReversed[j].replyTo === comments[i]._id) {
+          comments.splice(i + 1, 0, repliesReversed[j]);
+        }
+      }
+    }
+    return comments;
+  }
+
   /**
    * generate Elements of Comment
    *
@@ -123,8 +138,9 @@ class PageComments extends React.Component {
    *
    * @memberOf PageComments
    */
-  generateCommentElements(comments) {
-    return comments.map((comment) => {
+  generateCommentElements(comments, replies) {
+    const commentsWithReplies = this.reorderBasedOnReplies(comments, replies);
+    return commentsWithReplies.map((comment) => {
       return (
         <Comment
           key={comment._id}
@@ -151,6 +167,9 @@ class PageComments extends React.Component {
     const currentComments = [];
     const newerComments = [];
     const olderComments = [];
+    const currentReplies = [];
+    const newerReplies = [];
+    const olderReplies = [];
 
     let comments = this.state.comments;
     if (this.state.isLayoutTypeGrowi) {
@@ -164,21 +183,35 @@ class PageComments extends React.Component {
     comments.forEach((comment) => {
       // comparing ObjectId
       // eslint-disable-next-line eqeqeq
-      if (comment.revision == revisionId) {
-        currentComments.push(comment);
+      if (comment.replyTo === undefined) {
+        // comment is not a reply
+        if (comment.revision === revisionId) {
+          currentComments.push(comment);
+        }
+        else if (Date.parse(comment.createdAt) / 1000 > revisionCreatedAt) {
+          newerComments.push(comment);
+        }
+        else {
+          olderComments.push(comment);
+        }
+      }
+      else
+      // comment is a reply
+      if (comment.revision === revisionId) {
+        currentReplies.push(comment);
       }
       else if (Date.parse(comment.createdAt) / 1000 > revisionCreatedAt) {
-        newerComments.push(comment);
+        newerReplies.push(comment);
       }
       else {
-        olderComments.push(comment);
+        olderReplies.push(comment);
       }
     });
 
     // generate elements
-    const currentElements = this.generateCommentElements(currentComments);
-    const newerElements = this.generateCommentElements(newerComments);
-    const olderElements = this.generateCommentElements(olderComments);
+    const currentElements = this.generateCommentElements(currentComments, currentReplies);
+    const newerElements = this.generateCommentElements(newerComments, newerReplies);
+    const olderElements = this.generateCommentElements(olderComments, olderReplies);
     // generate blocks
     const currentBlock = (
       <div className="page-comments-list-current" id="page-comments-list-current">

src/client/styles/scss/_comment_growi.scss

@@ -85,10 +85,6 @@
         vertical-align: 25%;
       }
     }
-
-    .page-comment-reply {
-      text-align: right;
-    }
   }
 
   // show when hover

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 === '' ? undefined : commentForm.replyTo;
+    const replyTo = commentForm.replyTo;
 
     // check whether accessible
     const isAccessible = await Page.isAccessiblePageByViewer(pageId, req.user);