decidim 0.3.2 → 0.4.0

data/decidim-comments/app/frontend/comments/comment.component.test.tsx

@@ -14,6 +14,11 @@ import generateUserData from "../support/generate_user_data";
 import { loadLocaleTranslations } from "../support/load_translations";
 
 describe("<Comment />", () => {
+  const orderBy = "older";
+  const rootCommentable = {
+    id: "1",
+    type: "Decidim::DummyResource",
+  };
   let comment: CommentFragment;
   let session: any = null;
 
@@ -31,17 +36,17 @@ describe("<Comment />", () => {
   });
 
   it("should render an article with class comment", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("article.comment").exists()).toBeTruthy();
   });
 
   it("should render a time tag with comment's created at", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("time").prop("dateTime")).toEqual(comment.createdAt);
   });
 
   it("should render author's name in a link with class author__name", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("a.author__name").text()).toEqual(comment.author.name);
   });
 
@@ -51,28 +56,28 @@ describe("<Comment />", () => {
     });
 
     it("should render 'Deleted user' inside a badge", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("span.label.label--small.label--basic").text()).toEqual("Deleted user");
     });
   });
 
   it("should render author's avatar as a image tag", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("a.author__avatar img").prop("src")).toEqual(comment.author.avatarUrl);
   });
 
   it("should render comment's body on a div with class comment__content", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__content").text()).toEqual(comment.body);
   });
 
   it("should initialize with a state property showReplyForm as false", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.state()).toHaveProperty("showReplyForm", false);
   });
 
   it("should render a AddCommentForm component with the correct props when clicking the reply button", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
     wrapper.find("button.comment__reply").simulate("click");
     expect(wrapper.find(AddCommentForm).prop("session")).toEqual(session);
@@ -83,24 +88,24 @@ describe("<Comment />", () => {
 
   it("should not render the additional reply button if the parent comment has no comments and isRootcomment", () => {
     comment.hasComments = false;
-    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
   });
 
   it("should not render the additional reply button if the parent comment has comments and not isRootcomment", () => {
     comment.hasComments = true;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeFalsy();
   });
 
   it("should render the additional reply button if the parent comment has comments and isRootcomment", () => {
     comment.hasComments = true;
-    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} isRootComment={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("div.comment__additionalreply").exists()).toBeTruthy();
   });
 
   it("should render comment's comments as a separate Comment components", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
     wrapper.find(Comment).forEach((node, idx) => {
       expect(node.prop("comment")).toEqual(comment.comments[idx]);
       expect(node.prop("session")).toEqual(session);
@@ -110,19 +115,19 @@ describe("<Comment />", () => {
   });
 
   it("should render comment's comments with articleClassName as 'comment comment--nested comment--nested--alt' when articleClassName is 'comment comment--nested'", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} articleClassName="comment comment--nested" />);
+    const wrapper = shallow(<Comment comment={comment} session={session} articleClassName="comment comment--nested" rootCommentable={rootCommentable} orderBy={orderBy} />);
     wrapper.find(Comment).forEach((node) => {
       expect(node.prop("articleClassName")).toEqual("comment comment--nested comment--nested--alt");
     });
   });
 
   it("should have a default prop articleClassName with value 'comment'", () => {
-    const wrapper = mount(<Comment comment={comment} session={session} />);
+    const wrapper = mount(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.prop("articleClassName")).toEqual("comment");
   });
 
   it("should have a default prop isRootComment with value false", () => {
-    const wrapper = mount(<Comment comment={comment} session={session} />);
+    const wrapper = mount(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.prop("isRootComment")).toBeFalsy();
   });
 
@@ -132,7 +137,7 @@ describe("<Comment />", () => {
     });
 
     it("should not render the reply button", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
     });
   });
@@ -143,49 +148,49 @@ describe("<Comment />", () => {
     });
 
     it("should not render reply button", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("button.comment__reply").exists()).toBeFalsy();
     });
 
     it("should not render the flag modal", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(".flag-modal").exists()).toBeFalsy();
     });
   });
 
   it("should render a 'in favor' badge if comment's alignment is 1", () => {
     comment.alignment = 1;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("span.alignment.label").text()).toEqual("In favor");
   });
 
   it("should render a 'against' badge if comment's alignment is -1", () => {
     comment.alignment = -1;
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find("span.alert.label").text()).toEqual("Against");
   });
 
   it("should render the flag modal", () => {
-    const wrapper = shallow(<Comment comment={comment} session={session} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(".flag-modal").exists()).toBeTruthy();
   });
 
   describe("when user has already reported the comment", () => {
     it("should not render the flag form", () => {
       comment.alreadyReported = true;
-      const wrapper = shallow(<Comment comment={comment} session= {session} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(".flag-modal form").exists()).toBeFalsy();
     });
   });
 
   describe("when the comment is votable", () => {
     it("should render an UpVoteButton component", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(UpVoteButton).prop("comment")).toEqual(comment);
     });
 
     it("should render an DownVoteButton component", () => {
-      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(DownVoteButton).prop("comment")).toEqual(comment);
     });
   });

data/decidim-comments/app/frontend/comments/comment.component.tsx

@@ -9,6 +9,7 @@ import DownVoteButton from "./down_vote_button.component";
 import UpVoteButton from "./up_vote_button.component";
 
 import {
+  AddCommentFormCommentableFragment,
   AddCommentFormSessionFragment,
   CommentFragment,
 } from "../support/schema";
@@ -23,6 +24,8 @@ interface CommentProps {
   articleClassName?: string;
   isRootComment?: boolean;
   votable?: boolean;
+  rootCommentable: AddCommentFormCommentableFragment;
+  orderBy: string;
 }
 
 interface CommentState {
@@ -202,13 +205,13 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @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>
       );
     }
@@ -222,7 +225,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @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") {
@@ -240,6 +243,8 @@ class Comment extends React.Component<CommentProps, CommentState> {
                 session={session}
                 votable={votable}
                 articleClassName={replyArticleClassName}
+                rootCommentable={rootCommentable}
+                orderBy={orderBy}
               />
             ))
           }
@@ -256,7 +261,7 @@ class Comment extends React.Component<CommentProps, CommentState> {
    * @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) {
@@ -268,6 +273,8 @@ class Comment extends React.Component<CommentProps, CommentState> {
           submitButtonClassName="button small hollow"
           onCommentAdded={this.toggleReplyForm}
           autoFocus={true}
+          rootCommentable={rootCommentable}
+          orderBy={orderBy}
         />
       );
     }

data/decidim-comments/app/frontend/comments/comment_thread.component.test.tsx

@@ -10,6 +10,11 @@ import generateCUserData from "../support/generate_user_data";
 import { loadLocaleTranslations } from "../support/load_translations";
 
 describe("<CommentThread />", () => {
+  const orderBy = "older";
+  const rootCommentable = {
+    id: "1",
+    type: "Decidim::DummyResource",
+  };
   let comment: CommentFragment;
   let session: any = null;
 
@@ -25,7 +30,7 @@ describe("<CommentThread />", () => {
 
   describe("when comment doesn't have comments", () => {
     it("should not render a title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("h6.comment-thread__title").exists()).toBeFalsy();
     });
   });
@@ -36,7 +41,7 @@ describe("<CommentThread />", () => {
     });
 
     it("should render a h6 comment-thread__title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("h6.comment-thread__title").text()).toContain(`Conversation with ${comment.author.name}`);
     });
 
@@ -46,7 +51,7 @@ describe("<CommentThread />", () => {
       });
 
       it("should render a h6 comment-thread__title with 'Deleted user'", () => {
-        const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+        const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
         expect(wrapper.find("h6.comment-thread__title").text()).toContain("Conversation with Deleted user");
       });
     });
@@ -54,22 +59,22 @@ describe("<CommentThread />", () => {
 
   describe("should render a Comment", () => {
     it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("session", session);
     });
 
     it("and pass comment data as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("comment", comment);
     });
 
     it("and pass the votable as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("votable", true);
     });
 
     it("and pass the isRootComment equal true", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("isRootComment", true);
     });
   });

data/decidim-comments/app/frontend/comments/comment_thread.component.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import Comment from "./comment.component";
 
 import {
+  AddCommentFormCommentableFragment,
   AddCommentFormSessionFragment,
   CommentFragment,
 } from "../support/schema";
@@ -15,6 +16,8 @@ interface CommentThreadProps {
     user: any;
   } | null;
   votable?: boolean;
+  rootCommentable: AddCommentFormCommentableFragment;
+  orderBy: string;
 }
 
 /**
@@ -23,14 +26,14 @@ interface CommentThreadProps {
  * @augments Component
  * @todo It doesn't handle multiple comments yet
  */
-class CommentThread extends React.Component<CommentThreadProps, undefined> {
+class CommentThread extends React.Component<CommentThreadProps> {
   public static defaultProps: any = {
     session: null,
     votable: false,
   };
 
   public render() {
-    const { comment, session, votable } = this.props;
+    const { comment, session, votable, rootCommentable, orderBy } = this.props;
 
     return (
       <div>
@@ -41,6 +44,8 @@ class CommentThread extends React.Component<CommentThreadProps, undefined> {
             session={session}
             votable={votable}
             isRootComment={true}
+            rootCommentable={rootCommentable}
+            orderBy={orderBy}
           />
         </div>
       </div>

data/decidim-comments/app/frontend/comments/comments.component.tsx

@@ -27,7 +27,7 @@ interface CommentsProps extends GetCommentsQuery {
  * @class
  * @augments Component
  */
-export class Comments extends React.Component<CommentsProps, undefined> {
+export class Comments extends React.Component<CommentsProps> {
   public static defaultProps: any = {
     loading: false,
     session: null,
@@ -91,7 +91,8 @@ export class Comments extends React.Component<CommentsProps, undefined> {
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
   private _renderCommentThreads() {
-    const { session, commentable: { comments, commentsHaveVotes } } = this.props;
+    const { session, commentable, orderBy } = this.props;
+    const { comments, commentsHaveVotes } = commentable;
 
     return comments.map((comment) => (
       <CommentThread
@@ -99,6 +100,8 @@ export class Comments extends React.Component<CommentsProps, undefined> {
         comment={comment}
         session={session}
         votable={commentsHaveVotes}
+        rootCommentable={commentable}
+        orderBy={orderBy}
       />
     ));
   }
@@ -109,7 +112,7 @@ export class Comments extends React.Component<CommentsProps, undefined> {
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   private _renderAddCommentForm() {
-    const { session, commentable } = this.props;
+    const { session, commentable, orderBy } = this.props;
     const { acceptsNewComments, commentsHaveAlignment } = commentable;
 
     if (acceptsNewComments) {
@@ -118,6 +121,8 @@ export class Comments extends React.Component<CommentsProps, undefined> {
           session={session}
           commentable={commentable}
           arguable={commentsHaveAlignment}
+          rootCommentable={commentable}
+          orderBy={orderBy}
         />
       );
     }
@@ -135,21 +140,27 @@ window.Comments = Comments;
 
 export const commentsQuery = require("../queries/comments.query.graphql");
 
-const CommentsWithData: any = graphql(commentsQuery, {
+const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQuery, {
   options: {
     pollInterval: 15000,
   },
-  props: ({ ownProps, data: { loading, session, commentable, refetch }}) => ({
-    loading,
-    session,
-    commentable,
-    orderBy: ownProps.orderBy,
-    reorderComments: (orderBy: string) => {
-      return refetch({
-        orderBy,
-      });
-    },
-  }),
+  props: ({ ownProps, data }) => {
+    if (data) {
+      const { loading, session, commentable, refetch } = data;
+
+      return {
+        loading,
+        session,
+        commentable,
+        orderBy: ownProps.orderBy,
+        reorderComments: (orderBy: string) => {
+          return refetch({
+            orderBy,
+          });
+        },
+      };
+    }
+  },
 })(Comments);
 
 export interface CommentsApplicationProps extends GetCommentsQueryVariables {

data/decidim-comments/app/frontend/comments/down_vote_button.component.test.tsx

@@ -10,6 +10,11 @@ import generateUserData from "../support/generate_user_data";
 import { DownVoteButtonFragment } from "../support/schema";
 
 describe("<DownVoteButton />", () => {
+  const orderBy = "older";
+  const rootCommentable = {
+    id: "1",
+    type: "Decidim::DummyResource",
+  };
   let comment: DownVoteButtonFragment;
   let session: any = null;
   const downVote = jasmine.createSpy("downVote");
@@ -23,7 +28,7 @@ describe("<DownVoteButton />", () => {
   });
 
   it("should render a VoteButton component with the correct props", () => {
-    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} />);
+    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(VoteButton).prop("buttonClassName")).toEqual("comment__votes--down");
     expect(wrapper.find(VoteButton).prop("iconName")).toEqual("icon-chevron-bottom");
     expect(wrapper.find(VoteButton).prop("votes")).toEqual(comment.downVotes);
@@ -31,13 +36,13 @@ describe("<DownVoteButton />", () => {
 
   it("should pass disabled prop as true if comment downVoted is true", () => {
     comment.downVoted = true;
-    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} />);
+    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(VoteButton).prop("disabled")).toBeTruthy();
   });
 
   it("should pass disabled prop as true if comment downVoted is true", () => {
     comment.downVoted = true;
-    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} />);
+    const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
     expect(wrapper.find(VoteButton).prop("disabled")).toBeTruthy();
   });
 
@@ -47,7 +52,7 @@ describe("<DownVoteButton />", () => {
     });
 
     it("should pass userLoggedIn as false", () => {
-      const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} />);
+      const wrapper = shallow(<DownVoteButton session={session} comment={comment} downVote={downVote} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(VoteButton).prop("userLoggedIn")).toBeFalsy();
     });
   });