added editor toggle and older reply toggle

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

@@ -89,6 +89,14 @@ export default class Comment extends React.Component {
     );
   }
 
+  toggleOlderReplies() {
+    this.setState((prevState) => {
+      return {
+        showOlderReplies: !prevState.showOlderReplies,
+      };
+    });
+  }
+
   renderHtml(markdown) {
     const context = {
       markdown,
@@ -126,11 +134,26 @@ export default class Comment extends React.Component {
     if (!isLayoutTypeGrowi) {
       replyList = replyList.slice().reverse();
     }
-    return 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">
+
+    const hiddenRepliesCount = replyList.length <= 2 ? 0 : replyList.length - 2;
+
+    const iconForOlder = (this.state.isLayoutTypeGrowi)
+      ? <i className="fa fa-angle-double-up"></i>
+      : <i className="fa fa-angle-double-down"></i>;
+    const toggleOlder = (hiddenRepliesCount === 0)
+      ? <div></div>
+      : (
+        <a className="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older">
+          {iconForOlder} Show Older Replies {iconForOlder}
+        </a>
+      );
+
+    const toggleElements = [];
+    for (let i = 0; i < hiddenRepliesCount; i++) {
+      toggleElements.push(
+        <div key={replyList[i]._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}
+            comment={replyList[i]}
             deleteBtnClicked={this.props.deleteBtnClicked}
             crowiRenderer={this.props.crowiRenderer}
             crowi={this.props.crowi}
@@ -138,9 +161,40 @@ export default class Comment extends React.Component {
             revisionCreatedAt={this.props.revisionCreatedAt}
             revisionId={this.props.revisionId}
           />
-        </div>
+        </div>,
       );
-    });
+    }
+
+    const toggleBlock = (
+      <div className="page-comments-list-older collapse out" id="page-comments-list-older">
+        {toggleElements}
+      </div>
+    );
+
+    const shownBlock = [];
+    for (let i = hiddenRepliesCount; i < replyList.length; i++) {
+      shownBlock.push(
+        <div key={replyList[i]._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={replyList[i]}
+            deleteBtnClicked={this.props.deleteBtnClicked}
+            crowiRenderer={this.props.crowiRenderer}
+            crowi={this.props.crowi}
+            replyList={[]}
+            revisionCreatedAt={this.props.revisionCreatedAt}
+            revisionId={this.props.revisionId}
+          />
+        </div>,
+      );
+    }
+
+    return (
+      <div>
+        {toggleBlock}
+        {toggleOlder}
+        {shownBlock}
+      </div>
+    );
   }
 
   render() {

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

@@ -60,6 +60,7 @@ class CommentEditor extends React.Component {
     this.handleSelect = this.handleSelect.bind(this);
     this.onSlackEnabledFlagChange = this.onSlackEnabledFlagChange.bind(this);
     this.onSlackChannelsChange = this.onSlackChannelsChange.bind(this);
+    this.toggleEditor = this.toggleEditor.bind(this);
   }
 
   componentWillMount() {
@@ -95,6 +96,10 @@ class CommentEditor extends React.Component {
     this.setState({ slackChannels: value });
   }
 
+  toggleEditor() {
+    this.props.commentButtonClickedHandler(this.props.replyTo);
+  }
+
   /**
    * Post comment with CommentContainer and update state
    */
@@ -121,7 +126,7 @@ class CommentEditor extends React.Component {
         });
         // reset value
         this.editor.setValue('');
-        this.props.commentButtonClickedHandler(this.props.replyTo);
+        this.toggleEditor();
       })
       .catch((err) => {
         const errorMessage = err.message || 'An unknown error occured when posting comment';
@@ -218,7 +223,7 @@ class CommentEditor extends React.Component {
     const submitButton = (
       <Button
         bsStyle="primary"
-        className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b"
+        className="fcbtn btn btn-primary btn-outline btn-rounded btn-1b"
         onClick={this.postHandler}
       >
         Comment
@@ -300,6 +305,12 @@ class CommentEditor extends React.Component {
                     </div>
                     )
                   }
+                  <div>
+                    <Button bsStyle="danger" className="fcbtn btn btn-xs btn-danger btn-outline btn-rounded" onClick={this.toggleEditor}>
+                      Cancel
+                    </Button>
+                  </div>
+                  &nbsp;&nbsp;&nbsp;&nbsp;
                   <div className="hidden-xs">{submitButton}</div>
                 </div>
                 <div className="visible-xs mt-2">

src/client/js/components/PageComments.jsx

@@ -73,6 +73,12 @@ class PageComments extends React.Component {
 
   deleteComment() {
     const comment = this.state.commentToDelete;
+    const comments = this.props.commentContainer.state.comments;
+    comments.forEach((reply) => {
+      if (reply.replyTo === comment._id) {
+        this.props.commentContainer.deleteComment(reply);
+      }
+    });
 
     this.props.commentContainer.deleteComment(comment)
       .then(() => {