changes

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
+
 import dateFnsFormat from 'date-fns/format';
 
 import RevisionBody from '../Page/RevisionBody';
@@ -33,7 +33,6 @@ export default class Comment extends React.Component {
     this.getRevisionLabelClassName = this.getRevisionLabelClassName.bind(this);
     this.deleteBtnClickedHandler = this.deleteBtnClickedHandler.bind(this);
     this.renderHtml = this.renderHtml.bind(this);
-    this.replyBtnClickedHandler = this.replyBtnClickedHandler.bind(this);
   }
 
   componentWillMount() {
@@ -71,10 +70,6 @@ export default class Comment extends React.Component {
     this.props.deleteBtnClicked(this.props.comment);
   }
 
-  replyBtnClickedHandler() {
-    this.props.onReplyButtonClicked(this.props.comment);
-  }
-
   renderRevisionBody() {
     const config = this.props.crowi.getConfig();
     const isMathJaxEnabled = !!config.env.MATHJAX;
@@ -119,6 +114,25 @@ export default class Comment extends React.Component {
 
   }
 
+  renderReplies() {
+    return this.props.replyList.map((reply) => {
+      return (
+        <div key={reply._id} className="col-xs-offset-1 col-xs-11 col-sm-offset-1 col-sm-11 col-md-offset-1 col-md-11 col-lg-offset-1 col-lg-11">
+          <Comment
+            comment={reply}
+            deleteBtnClicked={this.props.deleteBtnClicked}
+            crowiRenderer={this.props.crowiRenderer}
+            crowi={this.props.crowi}
+            replyTo={this.props.comment._id}
+            replyList={[]}
+            revisionCreatedAt={this.props.revisionCreatedAt}
+            revisionId={this.props.revisionId}
+          />
+        </div>
+      );
+    });
+  }
+
   render() {
     const comment = this.props.comment;
     const creator = comment.creator;
@@ -131,36 +145,45 @@ export default class Comment extends React.Component {
     const revFirst8Letters = comment.revision.substr(-8);
     const revisionLavelClassName = this.getRevisionLabelClassName();
 
+    const revisionId = this.props.revisionId;
+    const revisionCreatedAt = this.props.revisionCreatedAt;
+    let isNewer;
+    if (comment.revision === revisionId) {
+      isNewer = 'page-comments-list-current';
+    }
+    else if (Date.parse(comment.createdAt) / 1000 > revisionCreatedAt) {
+      isNewer = 'page-comments-list-newer';
+    }
+    else {
+      isNewer = 'page-comments-list-older';
+    }
+
+
     return (
-      <div className={rootClassName}>
-        <UserPicture user={creator} />
-        <div className="page-comment-main">
-          <div className="page-comment-creator">
-            <Username user={creator} />
-          </div>
-          <div className="page-comment-body">{commentBody}</div>
-          <div className="text-right">
-            {
-              comment.replyTo === undefined
-              && (
-                <Button
-                  type="button"
-                  className="fcbtn btn btn-primary btn-sm btn-success btn-rounded btn-1b"
-                  onClick={this.replyBtnClickedHandler}
-                >
-                  Reply
-                </Button>
-              )
-            }
+      <div>
+        <div className={isNewer}>
+          <div className={rootClassName}>
+            <UserPicture user={creator} />
+            <div className="page-comment-main">
+              <div className="page-comment-creator">
+                <Username user={creator} />
+              </div>
+              <div className="page-comment-body">{commentBody}</div>
+              <div className="page-comment-meta">
+                {commentDate}&nbsp;
+                <a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a>
+              </div>
+              <div className="page-comment-control">
+                <button type="button" className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
+                  <i className="ti-close"></i>
+                </button>
+              </div>
+            </div>
           </div>
-          <div className="page-comment-meta">
-            {commentDate}&nbsp;
-            <a className={revisionLavelClassName} href={revHref}>{revFirst8Letters}</a>
-          </div>
-          <div className="page-comment-control">
-            <button type="button" className="btn btn-link" onClick={this.deleteBtnClickedHandler}>
-              <i className="ti-close"></i>
-            </button>
+        </div>
+        <div className="container-fluid">
+          <div className="row">
+            {this.renderReplies()}
           </div>
         </div>
       </div>
@@ -173,8 +196,9 @@ Comment.propTypes = {
   comment: PropTypes.object.isRequired,
   crowiRenderer: PropTypes.object.isRequired,
   deleteBtnClicked: PropTypes.func.isRequired,
-  onReplyButtonClicked: PropTypes.func.isRequired,
   crowi: PropTypes.object.isRequired,
-  revisionId: PropTypes.string,
+  revisionId: PropTypes.string.isRequired,
   replyTo: PropTypes.string,
+  replyList: PropTypes.array.isRequired,
+  revisionCreatedAt: PropTypes.number,
 };

src/client/js/components/PageComments.jsx

@@ -9,6 +9,7 @@ import { withTranslation } from 'react-i18next';
 import GrowiRenderer from '../util/GrowiRenderer';
 
 import CommentContainer from './PageComment/CommentContainer';
+import UserPicture from './User/UserPicture';
 import CommentEditor from './PageComment/CommentEditor';
 
 import Comment from './PageComment/Comment';
@@ -99,37 +100,14 @@ class PageComments extends React.Component {
   }
 
   // adds replies to specific comment object
-  addRepliesToComments(comments, replies) {
-    const commentsWithReplies = [];
-    const commentsCopy = comments.slice();
-    commentsCopy.forEach((comment) => {
-      comment.replyList = [];
-      replies.forEach((reply) => {
-        if (reply.replyTo === comment._id) {
-          comment.replyList.push(reply);
-        }
-      });
-      commentsWithReplies.push(comment);
-    });
-    return commentsWithReplies;
-  }
-
-  // returns replies
-  renderReplies(comment) {
-    return comment.replyList.map((reply) => {
-      return (
-        <div key={reply._id} className="col-xs-offset-1 col-xs-11 col-sm-offset-1 col-sm-11 col-md-offset-1 col-md-11 col-lg-offset-1 col-lg-11">
-          <Comment
-            comment={reply}
-            deleteBtnClicked={this.confirmToDeleteComment}
-            crowiRenderer={this.growiRenderer}
-            onReplyButtonClicked={() => { this.replyButtonClickedHandler(reply._id) }}
-            crowi={this.props.crowi}
-            replyTo={comment._id}
-          />
-        </div>
-      );
+  addRepliesToComments(comment, replies) {
+    const replyList = [];
+    replies.forEach((reply) => {
+      if (reply.replyTo === comment._id) {
+        replyList.push(reply);
+      }
     });
+    return replyList;
   }
 
   /**
@@ -140,11 +118,16 @@ class PageComments extends React.Component {
    * @memberOf PageComments
    */
   generateCommentElements(comments, replies) {
-    const commentsWithReplies = this.addRepliesToComments(comments, replies);
-    return commentsWithReplies.map((comment) => {
+    return comments.map((comment) => {
 
       const commentId = comment._id;
       const showEditor = this.state.showEditorIds.has(commentId);
+      const crowi = this.props.crowi;
+      const username = crowi.me;
+      const user = crowi.findUser(username);
+      const isLayoutTypeGrowi = this.state.isLayoutTypeGrowi;
+
+      const replyList = this.addRepliesToComments(comment, replies);
 
       return (
         <div key={commentId}>
@@ -152,22 +135,49 @@ class PageComments extends React.Component {
             comment={comment}
             deleteBtnClicked={this.confirmToDeleteComment}
             crowiRenderer={this.growiRenderer}
-            onReplyButtonClicked={() => { this.replyButtonClickedHandler(commentId) }}
             crowi={this.props.crowi}
             replyTo={undefined}
+            replyList={replyList}
+            revisionCreatedAt={this.props.revisionCreatedAt}
+            revisionId={this.props.revisionId}
           />
           <div className="container-fluid">
             <div className="row">
-              {this.renderReplies(comment)}
               <div className="col-xs-offset-1 col-xs-11 col-sm-offset-1 col-sm-11 col-md-offset-1 col-md-11 col-lg-offset-1 col-lg-11">
+                { !showEditor && (
+                  <div className="form page-comment-form">
+                    { username
+                    && (
+                      <div className="comment-form">
+                        { isLayoutTypeGrowi
+                        && (
+                          <div className="comment-form-user">
+                            <UserPicture user={user} />
+                          </div>
+                        )
+                        }
+                        <div className="comment-form-main">
+                          <button
+                            type="button"
+                            className={`btn btn-lg ${this.state.isLayoutTypeGrowi ? 'btn-link' : 'btn-primary'} center-block`}
+                            onClick={() => { return this.replyButtonClickedHandler(commentId) }}
+                          >
+                            <i className="icon-bubble"></i> Reply
+                          </button>
+                        </div>
+                      </div>
+                    )
+                  }
+                  </div>
+                )}
                 { showEditor && (
-                <CommentEditor
-                  crowi={this.props.crowi}
-                  crowiOriginRenderer={this.props.crowiOriginRenderer}
-                  editorOptions={this.props.editorOptions}
-                  slackChannels={this.props.slackChannels}
-                  replyTo={commentId}
-                />
+                  <CommentEditor
+                    crowi={this.props.crowi}
+                    crowiOriginRenderer={this.props.crowiOriginRenderer}
+                    editorOptions={this.props.editorOptions}
+                    slackChannels={this.props.slackChannels}
+                    replyTo={commentId}
+                  />
                 )}
               </div>
             </div>
@@ -179,11 +189,7 @@ class PageComments extends React.Component {
 
   render() {
     const currentComments = [];
-    const newerComments = [];
-    const olderComments = [];
     const currentReplies = [];
-    const newerReplies = [];
-    const olderReplies = [];
 
     let comments = this.props.commentContainer.state.comments;
     if (this.state.isLayoutTypeGrowi) {
@@ -191,100 +197,29 @@ class PageComments extends React.Component {
       comments = comments.slice().reverse(); // non-destructive reverse
     }
 
-    // divide by revisionId and createdAt
-    const revisionId = this.props.revisionId;
-    const revisionCreatedAt = this.props.revisionCreatedAt;
     comments.forEach((comment) => {
-      // comparing ObjectId
-      // eslint-disable-next-line eqeqeq
       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);
-        }
+      // comment is not a reply
+        currentComments.push(comment);
       }
-      else
+      else {
       // comment is a reply
-      if (comment.revision === revisionId) {
         currentReplies.push(comment);
       }
-      else if (Date.parse(comment.createdAt) / 1000 > revisionCreatedAt) {
-        newerReplies.push(comment);
-      }
-      else {
-        olderReplies.push(comment);
-      }
     });
 
     // generate elements
     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">
         {currentElements}
       </div>
     );
-    const newerBlock = (
-      <div className="page-comments-list-newer collapse in" id="page-comments-list-newer">
-        {newerElements}
-      </div>
-    );
-    const olderBlock = (
-      <div className="page-comments-list-older collapse in" id="page-comments-list-older">
-        {olderElements}
-      </div>
-    );
-
-    // generate toggle elements
-    const iconForNewer = (this.state.isLayoutTypeGrowi)
-      ? <i className="fa fa-angle-double-down"></i>
-      : <i className="fa fa-angle-double-up"></i>;
-    const toggleNewer = (newerElements.length === 0)
-      ? <div></div>
-      : (
-        <a className="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer">
-          {iconForNewer} Comments for Newer Revision {iconForNewer}
-        </a>
-      );
-    const iconForOlder = (this.state.isLayoutTypeGrowi)
-      ? <i className="fa fa-angle-double-up"></i>
-      : <i className="fa fa-angle-double-down"></i>;
-    const toggleOlder = (olderElements.length === 0)
-      ? <div></div>
-      : (
-        <a className="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older">
-          {iconForOlder} Comments for Older Revision {iconForOlder}
-        </a>
-      );
 
     // layout blocks
-    const commentsElements = (this.state.isLayoutTypeGrowi)
-      ? (
-        <div>
-          {olderBlock}
-          {toggleOlder}
-          {currentBlock}
-          {toggleNewer}
-          {newerBlock}
-        </div>
-      )
-      : (
-        <div>
-          {newerBlock}
-          {toggleNewer}
-          {currentBlock}
-          {toggleOlder}
-          {olderBlock}
-        </div>
-      );
+    const commentsElements = (<div>{currentBlock}</div>);
 
     return (
       <div>