decidim-comments 0.0.6 → 0.0.7

data/app/frontend/comments/{comments.component.jsx → comments.component.tsx}

@@ -1,16 +1,24 @@
-import { Component, PropTypes } from 'react';
-import { graphql }              from 'react-apollo';
-import gql                      from 'graphql-tag';
-import { filter }               from 'graphql-anywhere';
-import { I18n }                 from 'react-i18nify';
+import * as React           from "react";
+import { graphql }          from "react-apollo";
 
-import Application              from '../application/application.component';
+import Application          from "../application/application.component";
 
-import CommentThread            from './comment_thread.component';
-import AddCommentForm           from './add_comment_form.component';
-import CommentOrderSelector     from './comment_order_selector.component';
+import AddCommentForm       from "./add_comment_form.component";
+import CommentOrderSelector from "./comment_order_selector.component";
+import CommentThread        from "./comment_thread.component";
 
-import commentsQuery            from './comments.query.graphql';
+import {
+  GetCommentsQuery,
+  GetCommentsQueryVariables,
+} from "../support/schema";
+
+const { I18n } = require("react-i18nify");
+
+interface CommentsProps extends GetCommentsQuery {
+  loading?: boolean;
+  orderBy: string;
+  reorderComments: (orderBy: string) => void;
+};
 
 /**
  * The core class of the Decidim Comments engine.
@@ -19,14 +27,22 @@ import commentsQuery            from './comments.query.graphql';
  * @class
  * @augments Component
  */
-export class Comments extends Component {
-  render() {
+export class Comments extends React.Component<CommentsProps, undefined> {
+  public static defaultProps: any = {
+    loading: false,
+    session: null,
+    commentable: {
+      comments: [],
+    },
+  };
+
+  public render() {
     const { commentable: { comments }, reorderComments, orderBy, loading } = this.props;
     let commentClasses = "comments";
     let commentHeader = I18n.t("components.comments.title", { count: comments.length });
 
     if (loading) {
-      commentClasses += " loading-comments"
+      commentClasses += " loading-comments";
       commentHeader = I18n.t("components.comments.loading");
     }
 
@@ -35,7 +51,7 @@ export class Comments extends Component {
         <section className={commentClasses}>
           <div className="row collapse order-by">
             <h2 className="order-by__text section-heading">
-              { commentHeader }
+              {commentHeader}
             </h2>
             <CommentOrderSelector
               reorderComments={reorderComments}
@@ -55,13 +71,13 @@ export class Comments extends Component {
    * @private
    * @returns {Void|DOMElement} - A warning message or nothing.
    */
-  _renderBlockedCommentsWarning() {
+  private _renderBlockedCommentsWarning() {
     const { commentable: { acceptsNewComments } } = this.props;
 
     if (!acceptsNewComments) {
       return (
         <div className="callout warning">
-          <p>{ I18n.t("components.comments.blocked_comments_warning") }</p>
+          <p>{I18n.t("components.comments.blocked_comments_warning")}</p>
         </div>
       );
     }
@@ -74,17 +90,17 @@ export class Comments extends Component {
    * @private
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
-  _renderCommentThreads() {
+  private _renderCommentThreads() {
     const { session, commentable: { comments, commentsHaveVotes } } = this.props;
 
     return comments.map((comment) => (
       <CommentThread
         key={comment.id}
-        comment={filter(CommentThread.fragments.comment, comment)}
+        comment={comment}
         session={session}
         votable={commentsHaveVotes}
       />
-    ))
+    ));
   }
 
   /**
@@ -92,7 +108,7 @@ export class Comments extends Component {
    * @private
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
-  _renderAddCommentForm() {
+  private _renderAddCommentForm() {
     const { session, commentable } = this.props;
     const { acceptsNewComments, commentsHaveAlignment } = commentable;
 
@@ -110,31 +126,6 @@ export class Comments extends Component {
   }
 }
 
-Comments.propTypes = {
-  loading: PropTypes.bool,
-  session: PropTypes.shape({
-    user: PropTypes.any.isRequired
-  }),
-  commentable: PropTypes.shape({
-    acceptsNewComments: PropTypes.bool,
-    commentsHaveAlignment: PropTypes.bool,
-    commentsHaveVotes: PropTypes.bool,
-    comments: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string.isRequired
-    }))
-  }),
-  orderBy: PropTypes.string.isRequired,
-  reorderComments: PropTypes.func.isRequired
-};
-
-Comments.defaultProps = {
-  loading: false,
-  session: null,
-  commentable: {
-    comments: []
-  }
-};
-
 /**
  * Wrap the Comments component with a GraphQL query and children
  * fragments.
@@ -142,34 +133,35 @@ Comments.defaultProps = {
 
 window.Comments = Comments;
 
-const CommentsWithData = graphql(gql`
-  ${commentsQuery}
-  ${AddCommentForm.fragments.session}
-  ${AddCommentForm.fragments.commentable}
-  ${CommentThread.fragments.comment}
-`, {
+export const commentsQuery = require("../queries/comments.query.graphql");
+
+const CommentsWithData: any = graphql(commentsQuery, {
   options: {
-    pollInterval: 15000
+    pollInterval: 15000,
   },
   props: ({ ownProps, data: { loading, session, commentable, refetch }}) => ({
     loading,
     session,
     commentable,
     orderBy: ownProps.orderBy,
-    reorderComments: (orderBy) => {
+    reorderComments: (orderBy: string) => {
       return refetch({
-        orderBy
+        orderBy,
       });
-    }
-  })
+    },
+  }),
 })(Comments);
 
+export interface CommentsApplicationProps extends GetCommentsQueryVariables {
+  locale: string;
+}
+
 /**
  * Wrap the CommentsWithData component within an Application component to
  * connect it with Apollo client and store.
  * @returns {ReactComponent} - A component wrapped within an Application component
  */
-const CommentsApplication = ({ locale, commentableId, commentableType }) => (
+const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType }) => (
   <Application locale={locale}>
     <CommentsWithData
       commentableId={commentableId}
@@ -179,10 +171,4 @@ const CommentsApplication = ({ locale, commentableId, commentableType }) => (
   </Application>
 );
 
-CommentsApplication.propTypes = {
-  locale: PropTypes.string.isRequired,
-  commentableId: PropTypes.string.isRequired,
-  commentableType: PropTypes.string.isRequired
-};
-
 export default CommentsApplication;

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

@@ -0,0 +1,39 @@
+import { shallow }          from "enzyme";
+import * as React from "react";
+
+import { DownVoteButton }   from "./down_vote_button.component";
+import VoteButton           from "./vote_button.component";
+
+import generateCommentsData from "../support/generate_comments_data";
+
+import { DownVoteFragment } from "../support/schema";
+
+describe("<DownVoteButton />", () => {
+  let comment: DownVoteFragment;
+  const downVote = jasmine.createSpy("downVote");
+
+  beforeEach(() => {
+    let commentsData = generateCommentsData(1);
+
+    comment = commentsData[0];
+  });
+
+  it("should render a VoteButton component with the correct props", () => {
+    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
+    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);
+  });
+
+  it("should pass disabled prop as true if comment downVoted is true", () => {
+    comment.downVoted = true;
+    const wrapper = shallow(<DownVoteButton comment={comment} downVote={downVote} />);
+    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 comment={comment} downVote={downVote} />);
+    expect(wrapper.find(VoteButton).prop("disabled")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,89 @@
+import * as React          from "react";
+import { graphql }         from "react-apollo";
+
+import VoteButton          from "./vote_button.component";
+
+import {
+  CommentFragment,
+  DownVoteFragment,
+  DownVoteMutation,
+  GetCommentsQuery,
+} from "../support/schema";
+
+interface DownVoteButtonProps {
+  comment: DownVoteFragment;
+  downVote?: () => void;
+}
+
+export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
+  comment: { downVotes, upVoted, downVoted },
+  downVote,
+}) => {
+  let selectedClass = "";
+
+  if (downVoted) {
+    selectedClass = "is-vote-selected";
+  } else if (upVoted) {
+     selectedClass = "is-vote-notselected";
+  }
+
+  return (
+    <VoteButton
+      buttonClassName="comment__votes--down"
+      iconName="icon-chevron-bottom"
+      votes={downVotes}
+      voteAction={downVote}
+      disabled={upVoted || downVoted}
+      selectedClass={selectedClass}
+    />
+  );
+};
+
+const downVoteMutation = require("../mutations/down_vote.mutation.graphql");
+
+const DownVoteButtonWithMutation = graphql(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,
+          },
+        },
+      },
+      updateQueries: {
+        GetComments: (prev: GetCommentsQuery, { mutationResult: { data } }: { mutationResult: { data: DownVoteMutation }}) => {
+          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),
+            };
+          };
+
+          return {
+            ...prev,
+            commentable: {
+              ...prev.commentable,
+              comments: prev.commentable.comments.map(commentReducer),
+            },
+          };
+        },
+      },
+    }),
+  }),
+})(DownVoteButton);
+
+export default DownVoteButtonWithMutation;

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

@@ -0,0 +1,39 @@
+import { shallow }          from "enzyme";
+import * as React from "react";
+
+import { UpVoteButton }     from "./up_vote_button.component";
+import VoteButton           from "./vote_button.component";
+
+import generateCommentsData from "../support/generate_comments_data";
+
+import { UpVoteFragment } from "../support/schema";
+
+describe("<UpVoteButton />", () => {
+  let comment: UpVoteFragment;
+  const upVote = jasmine.createSpy("upVote");
+
+  beforeEach(() => {
+    let commentsData = generateCommentsData(1);
+
+    comment = commentsData[0];
+  });
+
+  it("should render a VoteButton component with the correct props", () => {
+    const wrapper = shallow(<UpVoteButton comment={comment} upVote={upVote} />);
+    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);
+  });
+
+  it("should pass disabled prop as true if comment upVoted is true", () => {
+    comment.upVoted = true;
+    const wrapper = shallow(<UpVoteButton comment={comment} upVote={upVote} />);
+    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 comment={comment} upVote={upVote} />);
+    expect(wrapper.find(VoteButton).prop("disabled")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,89 @@
+import * as React           from "react";
+import { graphql }          from "react-apollo";
+
+import VoteButton           from "./vote_button.component";
+
+import {
+  CommentFragment,
+  GetCommentsQuery,
+  UpVoteFragment,
+  UpVoteMutation,
+} from "../support/schema";
+
+interface UpVoteButtonProps {
+  comment: UpVoteFragment;
+  upVote?: () => void;
+}
+
+export const UpVoteButton: React.SFC<UpVoteButtonProps> = ({
+  comment: { upVotes, upVoted, downVoted },
+  upVote,
+}) => {
+  let selectedClass = "";
+
+  if (upVoted) {
+    selectedClass = "is-vote-selected";
+  } else if (downVoted) {
+     selectedClass = "is-vote-notselected";
+  }
+
+  return (
+    <VoteButton
+      buttonClassName="comment__votes--up"
+      iconName="icon-chevron-top"
+      votes={upVotes}
+      voteAction={upVote}
+      disabled={upVoted || downVoted}
+      selectedClass={selectedClass}
+    />
+  );
+};
+
+const upVoteMutation = require("../mutations/up_vote.mutation.graphql");
+
+const UpVoteButtonWithMutation = graphql(upVoteMutation, {
+  props: ({ ownProps, mutate }) => ({
+    upVote: () => mutate({
+      variables: {
+        id: ownProps.comment.id,
+      },
+      optimisticResponse: {
+        __typename: "Mutation",
+        comment: {
+          __typename: "CommentMutation",
+          upVote: {
+            __typename: "Comment",
+            ...ownProps.comment,
+            upVotes: ownProps.comment.upVotes + 1,
+            upVoted: true,
+          },
+        },
+      },
+      updateQueries: {
+        GetComments: (prev: GetCommentsQuery, { mutationResult: { data } }: { mutationResult: { data: UpVoteMutation}}) => {
+          const commentReducer = (comment: CommentFragment): CommentFragment => {
+            const replies = comment.comments || [];
+
+            if (comment.id === ownProps.comment.id && data.comment) {
+              return data.comment.upVote;
+            }
+            return {
+              ...comment,
+              comments: replies.map(commentReducer),
+            };
+          };
+
+          return {
+            ...prev,
+            commentable: {
+              ...prev.commentable,
+              comments: prev.commentable.comments.map(commentReducer),
+            },
+          };
+        },
+      },
+    }),
+  }),
+})(UpVoteButton);
+
+export default UpVoteButtonWithMutation;