comment.component.tsx in decidim-0.4.0

- old
+ new

@@ -7,10 +7,11 @@
 import AddCommentForm from "./add_comment_form.component";
 import DownVoteButton from "./down_vote_button.component";
 import UpVoteButton from "./up_vote_button.component";
 
 import {
+  AddCommentFormCommentableFragment,
   AddCommentFormSessionFragment,
   CommentFragment,
 } from "../support/schema";
 
 const { I18n } = require("react-i18nify");
@@ -21,10 +22,12 @@
     user: any;
   } | null;
   articleClassName?: string;
   isRootComment?: boolean;
   votable?: boolean;
+  rootCommentable: AddCommentFormCommentableFragment;
+  orderBy: string;
 }
 
 interface CommentState {
   showReplyForm: boolean;
 }
@@ -200,17 +203,17 @@
    * Render upVote and downVote buttons when the comment is votable
    * @private
    * @returns {Void|DOMElement} - Render the upVote and downVote buttons or not
    */
   private _renderVoteButtons() {
-    const { session, comment, votable } = this.props;
+    const { session, comment, votable, rootCommentable, orderBy } = this.props;
 
     if (votable) {
       return (
         <div className="comment__votes">
-          <UpVoteButton session={session} comment={comment} />
-          <DownVoteButton session={session} comment={comment} />
+          <UpVoteButton session={session} comment={comment} rootCommentable={rootCommentable} orderBy={orderBy} />
+          <DownVoteButton session={session} comment={comment} rootCommentable={rootCommentable} orderBy={orderBy} />
         </div>
       );
     }
 
     return <span>&nbsp;</span>;
@@ -220,11 +223,11 @@
    * Render comment's comments alternating the css class
    * @private
    * @returns {Void|DomElement} - A wrapper element with comment's comments inside
    */
   private _renderReplies() {
-    const { comment: { id, hasComments, comments }, session, votable, articleClassName } = this.props;
+    const { comment: { id, hasComments, comments }, session, votable, articleClassName, rootCommentable, orderBy } = this.props;
     let replyArticleClassName = "comment comment--nested";
 
     if (articleClassName === "comment comment--nested") {
       replyArticleClassName = `${replyArticleClassName} comment--nested--alt`;
     }
@@ -238,10 +241,12 @@
                 key={`comment_${id}_reply_${reply.id}`}
                 comment={reply}
                 session={session}
                 votable={votable}
                 articleClassName={replyArticleClassName}
+                rootCommentable={rootCommentable}
+                orderBy={orderBy}
               />
             ))
           }
         </div>
       );
@@ -254,11 +259,11 @@
    * Render reply form based on the current component state
    * @private
    * @returns {Void|ReactElement} - Render the AddCommentForm component or not
    */
   private _renderReplyForm() {
-    const { session, comment } = this.props;
+    const { session, comment, rootCommentable, orderBy } = this.props;
     const { showReplyForm } = this.state;
 
     if (session && showReplyForm) {
       return (
         <AddCommentForm
@@ -266,9 +271,11 @@
           commentable={comment}
           showTitle={false}
           submitButtonClassName="button small hollow"
           onCommentAdded={this.toggleReplyForm}
           autoFocus={true}
+          rootCommentable={rootCommentable}
+          orderBy={orderBy}
         />
       );
     }
 
     return null;