decidim-comments 0.3.2 → 0.4.0

data/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/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/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/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/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();
     });
   });

data/app/frontend/comments/down_vote_button.component.tsx

@@ -4,6 +4,7 @@ import { graphql } from "react-apollo";
 import VoteButton from "./vote_button.component";
 
 import {
+  AddCommentFormCommentableFragment,
   AddCommentFormSessionFragment,
   CommentFragment,
   DownVoteButtonFragment,
@@ -17,6 +18,8 @@ interface DownVoteButtonProps {
   } | null;
   comment: DownVoteButtonFragment;
   downVote?: () => void;
+  rootCommentable: AddCommentFormCommentableFragment;
+  orderBy: string;
 }
 
 export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
@@ -49,49 +52,65 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
 };
 
 const downVoteMutation = require("../mutations/down_vote.mutation.graphql");
+const getCommentsQuery = require("../queries/comments.query.graphql");
 
-const DownVoteButtonWithMutation = graphql(downVoteMutation, {
+const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps>(downVoteMutation, {
   props: ({ ownProps, mutate }) => ({
-    downVote: () => mutate({
-      variables: {
-        id: ownProps.comment.id,
-      },
-      optimisticResponse: {
-        __typename: "Mutation",
-        comment: {
-          __typename: "CommentMutation",
-          downVote: {
-            __typename: "Comment",
-            ...ownProps.comment,
-            downVotes: ownProps.comment.downVotes + 1,
-            downVoted: true,
+    downVote() {
+      if (mutate) {
+        mutate({
+          variables: {
+            id: ownProps.comment.id,
           },
-        },
-      },
-      updateQueries: {
-        GetComments: (prev: GetCommentsQuery, { mutationResult: { data } }: { mutationResult: { data: DownVoteMutation }}) => {
-          const commentReducer = (comment: CommentFragment): CommentFragment => {
-            const replies = comment.comments || [];
+          optimisticResponse: {
+            __typename: "Mutation",
+            comment: {
+              __typename: "CommentMutation",
+              downVote: {
+                __typename: "Comment",
+                ...ownProps.comment,
+                downVotes: ownProps.comment.downVotes + 1,
+                downVoted: true,
+              },
+            },
+          },
+          update: (store, result: DownVoteMutation) => {
+            const variables = {
+              commentableId: ownProps.rootCommentable.id,
+              commentableType: ownProps.rootCommentable.type,
+              orderBy: ownProps.orderBy,
+            };
+
+            const commentReducer = (comment: CommentFragment): CommentFragment => {
+              const replies = comment.comments || [];
 
-            if (comment.id === ownProps.comment.id && data.comment) {
-              return data.comment.downVote;
-            }
-            return {
-              ...comment,
-              comments: replies.map(commentReducer),
+              if (comment.id === ownProps.comment.id && result.comment) {
+                return result.comment.downVote;
+              }
+
+              return {
+                ...comment,
+                comments: replies.map(commentReducer),
+              };
             };
-          };
 
-          return {
-            ...prev,
-            commentable: {
-              ...prev.commentable,
-              comments: prev.commentable.comments.map(commentReducer),
-            },
-          };
-        },
-      },
-    }),
+            const prev = store.readQuery<GetCommentsQuery>({ query: getCommentsQuery, variables });
+
+            store.writeQuery({
+              query: getCommentsQuery,
+              data: {
+                ...prev,
+                commentable: {
+                  ...prev.commentable,
+                  comments: prev.commentable.comments.map(commentReducer),
+                },
+              },
+              variables,
+            });
+          },
+        });
+      }
+    },
   }),
 })(DownVoteButton);
 

data/app/frontend/comments/up_vote_button.component.test.tsx

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