Merge pull request #1000 from weseek/feat/thread_comments_validator

editor toggle and older reply toggle

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

@@ -93,6 +93,14 @@ export default class Comment extends React.Component {
     );
   }
 
+  toggleOlderReplies() {
+    this.setState((prevState) => {
+      return {
+        showOlderReplies: !prevState.showOlderReplies,
+      };
+    });
+  }
+
   renderHtml(markdown) {
     const context = {
       markdown,
@@ -130,7 +138,46 @@ export default class Comment extends React.Component {
     if (!isLayoutTypeGrowi) {
       replyList = replyList.slice().reverse();
     }
-    return replyList.map((reply) => {
+
+    const areThereHiddenReplies = 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 = (areThereHiddenReplies)
+      ? (
+        <a className="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older">
+          {iconForOlder} Show Older Replies {iconForOlder}
+        </a>
+      )
+      : <div></div>;
+
+    const shownReplies = replyList.slice(replyList.length - 2, replyList.length);
+    const hiddenReplies = replyList.slice(0, replyList.length - 2);
+
+    const toggleElements = hiddenReplies.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}
+            replyList={[]}
+            revisionCreatedAt={this.props.revisionCreatedAt}
+            revisionId={this.props.revisionId}
+          />
+        </div>
+      );
+    });
+
+    const toggleBlock = (
+      <div className="page-comments-list-older collapse out" id="page-comments-list-older">
+        {toggleElements}
+      </div>
+    );
+
+    const shownBlock = shownReplies.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
@@ -145,6 +192,14 @@ export default class Comment extends React.Component {
         </div>
       );
     });
+
+    return (
+      <div>
+        {toggleBlock}
+        {toggleOlder}
+        {shownBlock}
+      </div>
+    );
   }
 
   render() {

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

@@ -59,6 +59,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() {
@@ -94,6 +95,10 @@ class CommentEditor extends React.Component {
     this.setState({ slackChannels: value });
   }
 
+  toggleEditor() {
+    this.props.commentButtonClickedHandler(this.props.replyTo);
+  }
+
   /**
    * Post comment with CommentContainer and update state
    */
@@ -120,7 +125,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';
@@ -216,7 +221,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
@@ -298,6 +303,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(() => {