decidim-comments 0.0.1 → 0.0.2

data/app/frontend/comments/add_comment_form.mutation.graphql

@@ -1,8 +1,5 @@
 mutation addComment($commentableId: String!, $commentableType: String!, $body: String!, $alignment: Int)  {
   addComment(commentableId: $commentableId, commentableType: $commentableType, body: $body, alignment: $alignment) {
-    ...CommentData
-    replies {
-      id
-    }
+    ...CommentThread
   }
 }

data/app/frontend/comments/comment.component.jsx

@@ -6,6 +6,8 @@ import { I18n }                 from 'react-i18nify';
 import classnames               from 'classnames';
 
 import AddCommentForm           from './add_comment_form.component';
+import UpVoteButton             from './up_vote_button.component';
+import DownVoteButton           from './down_vote_button.component';
 
 import commentFragment          from './comment.fragment.graphql';
 import commentDataFragment      from './comment_data.fragment.graphql';
@@ -26,8 +28,7 @@ class Comment extends Component {
 
   render() {
     const { comment: { id, author, body, createdAt }, articleClassName } = this.props;
-
-    const formattedCreatedAt = ` ${moment(createdAt, "YYYY-MM-DD HH:mm:ss z").format("LLL")}`;
+    const formattedCreatedAt = ` ${moment(createdAt).format("LLL")}`;
 
     return (
       <article id={`comment_${id}`} className={articleClassName}>
@@ -50,10 +51,12 @@ class Comment extends Component {
             { body }
           </p>
         </div>
-        {this._renderReplies()}
         <div className="comment__footer">
           {this._renderReplyButton()}
+          {this._renderVoteButtons()}
         </div>
+        {this._renderReplies()}
+        {this._renderAdditionalReplyButton()}
         {this._renderReplyForm()}
       </article>
     );
@@ -80,7 +83,55 @@ class Comment extends Component {
       );
     }
 
-    return <div>&nbsp;</div>;
+    return <span>&nbsp;</span>;
+  }
+
+   /**
+   * Render additional reply button if user can reply the comment at the bottom of a conversation
+   * @private
+   * @returns {Void|DOMElement} - Render the reply button or not if user can reply
+   */
+  _renderAdditionalReplyButton() {
+    const { comment: { canHaveReplies, hasReplies }, currentUser, isRootComment } = this.props;
+    const { showReplyForm } = this.state;
+    
+    if (currentUser && canHaveReplies) {
+      if (hasReplies && isRootComment) {
+
+        return (
+          <div className="comment__additionalreply">
+            <button
+              className="comment__reply muted-link"
+              aria-controls="comment1-reply"
+              onClick={() => this.setState({ showReplyForm: !showReplyForm })}
+            >
+              { I18n.t("components.comment.reply") }
+            </button>
+          </div>
+        );
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Render upVote and downVote buttons when the comment is votable
+   * @private
+   * @returns {Void|DOMElement} - Render the upVote and downVote buttons or not
+   */
+  _renderVoteButtons() {
+    const { comment, votable } = this.props;
+
+    if (votable) {
+      return (
+        <div className="comment__votes">
+          <UpVoteButton comment={comment} />
+          <DownVoteButton comment={comment} />
+        </div>
+      );
+    }
+
+    return <span>&nbsp;</span>;
   }
 
   /**
@@ -89,7 +140,7 @@ class Comment extends Component {
    * @returns {Void|DomElement} - A wrapper element with comment replies inside
    */
   _renderReplies() {
-    const { comment: { id, replies }, currentUser, articleClassName } = this.props;
+    const { comment: { id, replies }, currentUser, votable, articleClassName } = this.props;
     let replyArticleClassName = 'comment comment--nested';
    
     if (articleClassName === 'comment comment--nested') {
@@ -105,6 +156,7 @@ class Comment extends Component {
                 key={`comment_${id}_reply_${reply.id}`}
                 comment={reply}
                 currentUser={currentUser}
+                votable={votable}
                 articleClassName={replyArticleClassName}
               />
             ))
@@ -134,6 +186,7 @@ class Comment extends Component {
           showTitle={false}
           submitButtonClassName="button small hollow"
           onCommentAdded={() => this.setState({ showReplyForm: false })}
+          autoFocus
         />
       );
     }
@@ -178,14 +231,19 @@ Comment.fragments = {
   comment: gql`
     ${commentFragment}
     ${commentDataFragment}
+    ${UpVoteButton.fragments.comment}
+    ${DownVoteButton.fragments.comment}
   `,
   commentData: gql`
     ${commentDataFragment}
+    ${UpVoteButton.fragments.comment}
+    ${DownVoteButton.fragments.comment}
   `
 };
 
 Comment.defaultProps = {
-  articleClassName: 'comment'
+  articleClassName: 'comment',
+  isRootComment: false
 };
 
 Comment.propTypes = {
@@ -196,7 +254,9 @@ Comment.propTypes = {
   currentUser: PropTypes.shape({
     name: PropTypes.string.isRequired
   }),
-  articleClassName: PropTypes.string.isRequired
+  articleClassName: PropTypes.string.isRequired,
+  isRootComment: PropTypes.bool,
+  votable: PropTypes.bool
 };
 
 export default Comment;

data/app/frontend/comments/comment.component.test.jsx

@@ -1,12 +1,17 @@
+/* eslint-disable no-unused-expressions */
 import { shallow, mount }      from 'enzyme';
 import { filter }              from 'graphql-anywhere';
 import gql                     from 'graphql-tag';
 
 import Comment                 from './comment.component';
 import AddCommentForm          from './add_comment_form.component';
+import UpVoteButton            from './up_vote_button.component';
+import DownVoteButton          from './down_vote_button.component';
 
 import commentFragment         from './comment.fragment.graphql';
 import commentDataFragment     from './comment_data.fragment.graphql';
+import upVoteFragment          from './up_vote.fragment.graphql';
+import downVoteFragment        from './down_vote.fragment.graphql';
 
 import stubComponent           from '../support/stub_component';
 import generateCommentsData    from '../support/generate_comments_data';
@@ -17,6 +22,8 @@ describe("<Comment />", () => {
   let currentUser = null;
 
   stubComponent(AddCommentForm);
+  stubComponent(UpVoteButton);
+  stubComponent(DownVoteButton);
 
   beforeEach(() => {
     let commentsData = generateCommentsData(1);
@@ -26,6 +33,8 @@ describe("<Comment />", () => {
     const fragment = gql`
       ${commentFragment}
       ${commentDataFragment}
+      ${upVoteFragment}
+      ${downVoteFragment}
     `;
 
     comment = filter(fragment, commentsData[0]);
@@ -79,12 +88,34 @@ describe("<Comment />", () => {
     expect(wrapper.find('button.comment__reply')).not.to.be.present();
   });
 
-  it("should render comment replies a separate Comment components", () => {
+  it("should not render the additional reply button if the parent comment has no replies and isRootcomment", () => {
+    comment.canHaveReplies = true;
+    comment.hasReplies = false;
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} isRootComment />);
+    expect(wrapper.find('div.comment__additionalreply')).not.to.be.present();
+  });
+
+ it("should not render the additional reply button if the parent comment has replies and not isRootcomment", () => {
+    comment.canHaveReplies = true;
+    comment.hasReplies = true;
     const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper.find('div.comment__additionalreply')).not.to.be.present();
+  });
+
+  it("should render the additional reply button if the parent comment has replies and isRootcomment", () => {
+    comment.canHaveReplies = true;
+    comment.hasReplies = true;
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} isRootComment />);
+    expect(wrapper.find('div.comment__additionalreply')).to.be.present();
+  });
+
+  it("should render comment replies a separate Comment components", () => {
+    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} votable />);
     wrapper.find(Comment).forEach((node, idx) => {
       expect(node).to.have.prop("comment").deep.equal(comment.replies[idx]);
       expect(node).to.have.prop("currentUser").deep.equal(currentUser);
       expect(node).to.have.prop("articleClassName").equal("comment comment--nested")
+      expect(node).to.have.prop("votable").equal(true);
     });
   });
 
@@ -100,6 +131,11 @@ describe("<Comment />", () => {
     expect(wrapper).to.have.prop("articleClassName").equal("comment");
   });
 
+  it("should have a default prop isRootComment with value false", () => {
+    const wrapper = mount(<Comment comment={comment} currentUser={currentUser} />);
+    expect(wrapper).to.have.prop("isRootComment").equal(false);
+  });
+
   describe("when user is not logged in", () => {
     beforeEach(() => {
       currentUser = null;
@@ -122,4 +158,16 @@ describe("<Comment />", () => {
     const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
     expect(wrapper.find('span.alert.label')).to.have.text('Against');
   });
+
+  describe("when the comment is votable", () => {
+    it("should render an UpVoteButton component", () => {
+      const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} votable />);
+      expect(wrapper.find(UpVoteButton)).to.have.prop("comment").deep.equal(comment);
+    })
+
+    it("should render an DownVoteButton component", () => {
+      const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} votable />);
+      expect(wrapper.find(DownVoteButton)).to.have.prop("comment").deep.equal(comment);
+    })
+  });
 });

data/app/frontend/comments/comment_data.fragment.graphql

@@ -6,6 +6,9 @@ fragment CommentData on Comment {
     name,
     avatarUrl
   }
+  hasReplies
   canHaveReplies
   alignment
+  ...UpVote
+  ...DownVote
 }

data/app/frontend/comments/comment_order_selector.component.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, PropTypes } from 'react';
 import { I18n }      from 'react-i18nify';
 
 /**
@@ -7,22 +7,67 @@ import { I18n }      from 'react-i18nify';
  * @augments Component
  * @todo Needs a proper implementation
  */
-export default class CommentOrderSelector extends Component {
+class CommentOrderSelector extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      orderBy: this.props.defaultOrderBy
+    }
+  }
+
+  componentDidMount() {
+    $(document).foundation();
+  }
+
   render() {
+    const { orderBy } =  this.state;
+
     return (
       <div className="order-by__dropdown order-by__dropdown--right">
         <span className="order-by__text">{ I18n.t("components.comment_order_selector.title") }</span>
         <ul className="dropdown menu" data-dropdown-menu>
           <li>
-            <a>{ I18n.t("components.comment_order_selector.order.most_voted") }</a>
+            <a>{ I18n.t(`components.comment_order_selector.${orderBy}`) }</a>
             <ul className="menu">
-              <li><a>{ I18n.t("components.comment_order_selector.order.most_voted") }</a></li>
-              <li><a>{ I18n.t("components.comment_order_selector.order.recent") }</a></li>
-              <li><a>{ I18n.t("components.comment_order_selector.order.older") }</a></li>
+              <li>
+                <a href="" className="test" onClick={(event) => this._updateOrder(event, "best_rated")} >
+                  { I18n.t("components.comment_order_selector.order.best_rated") }
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={(event) => this._updateOrder(event, "recent")} >
+                  { I18n.t("components.comment_order_selector.order.recent") }
+                </a>
+              </li>
+              <li>
+                <a href="" onClick={(event) => this._updateOrder(event, "older")} >
+                  { I18n.t("components.comment_order_selector.order.older") }
+                </a>
+              </li>   
+              <li>
+                <a href="" onClick={(event) => this._updateOrder(event, "most_discussed")} >
+                  { I18n.t("components.comment_order_selector.order.most_discussed") }
+                </a>
+              </li>
             </ul>
           </li>
         </ul>
       </div>
     );
   }
+
+  _updateOrder(event, orderBy) {  
+    event.preventDefault();
+    this.setState({ orderBy });
+    this.props.reorderComments(orderBy);
+  }
+
 }
+
+CommentOrderSelector.propTypes = {
+  reorderComments: PropTypes.func.isRequired,
+  defaultOrderBy: PropTypes.string.isRequired
+};
+
+export default CommentOrderSelector;

data/app/frontend/comments/comment_order_selector.component.test.jsx

@@ -2,8 +2,19 @@ import { shallow }          from 'enzyme';
 import CommentOrderSelector from './comment_order_selector.component';
 
 describe('<CommentOrderSelector />', () => {
+  const orderBy = "older";
+  const reorderComments = sinon.spy();
+
   it("renders a div with classes order-by__dropdown order-by__dropdown--right", () => {
-    const wrapper = shallow(<CommentOrderSelector />);
+    const wrapper = shallow(<CommentOrderSelector reorderComments={reorderComments} defaultOrderBy={orderBy} />);
     expect(wrapper.find('div.order-by__dropdown.order-by__dropdown--right')).to.present();
   })
+
+   it("should set state order to best_rated if user clicks on the first element", () => {
+      const preventDefault = sinon.spy();
+      const wrapper = shallow(<CommentOrderSelector reorderComments={reorderComments} defaultOrderBy={orderBy} />);
+      wrapper.find('a.test').simulate('click', {preventDefault});
+      expect(reorderComments).to.calledWith("best_rated");
+    });
 })
+

data/app/frontend/comments/comment_thread.component.jsx

@@ -15,13 +15,18 @@ import commentThreadFragment    from './comment_thread.fragment.graphql'
  */
 class CommentThread extends Component {
   render() {
-    const { comment, currentUser } = this.props;
+    const { comment, currentUser, votable } = this.props;
 
     return (
       <div>
         {this._renderTitle()}
         <div className="comment-thread">
-          <Comment comment={filter(Comment.fragments.comment, comment)} currentUser={currentUser} />
+          <Comment 
+            comment={filter(Comment.fragments.comment, comment)} 
+            currentUser={currentUser} 
+            votable={votable}
+            isRootComment
+          />
         </div>
       </div>
     );
@@ -33,9 +38,9 @@ class CommentThread extends Component {
    * @returns {Void|DOMElement} - The conversation's title
    */
   _renderTitle() {
-    const { comment: { author, replies } } = this.props;
+    const { comment: { author, hasReplies } } = this.props;
     
-    if (replies.length > 0) {
+    if (hasReplies) {
       return (
         <h6 className="comment-thread__title">
           { I18n.t("components.comment_thread.title", { authorName: author.name }) }
@@ -58,7 +63,8 @@ CommentThread.propTypes = {
   currentUser: PropTypes.shape({
     name: PropTypes.string.isRequired
   }),
-  comment: propType(CommentThread.fragments.comment).isRequired
+  comment: propType(CommentThread.fragments.comment).isRequired,
+  votable: PropTypes.bool
 };
 
 export default CommentThread;

data/app/frontend/comments/comment_thread.component.test.jsx

@@ -48,7 +48,7 @@ describe('<CommentThread />', () => {
 
   describe("when comment does have replies", () => {
     beforeEach(() => {
-      comment.replies = generateCommentsData(3);  
+      comment.hasReplies = true;
     });
 
     it("should render a h6 comment-thread__title with author name", () => {
@@ -66,6 +66,16 @@ describe('<CommentThread />', () => {
     it("and pass filter comment data as a prop to it", () => {
       const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
       expect(wrapper.find(Comment).first()).to.have.prop("comment").deep.equal(filter(commentFragment, comment));
-    });  
-  });
+    });
+
+    it("and pass the votable as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} votable />);
+      expect(wrapper.find(Comment).first()).to.have.prop("votable").equal(true);
+    });
+    
+    it("and pass the isRootComment equal true", () => {
+      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} votable isRootComment />);
+      expect(wrapper.find(Comment).first()).to.have.prop("isRootComment").equal(true);
+    });
+  }); 
 });

data/app/frontend/comments/comment_thread.fragment.graphql

@@ -2,8 +2,6 @@ fragment CommentThread on Comment {
   author {
     name
   }
-  replies {
-    id
-  }
+  hasReplies,
   ...Comment
 }

data/app/frontend/comments/comments.component.jsx

@@ -8,6 +8,7 @@ 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 commentsQuery            from './comments.query.graphql';
 
@@ -20,15 +21,26 @@ import commentsQuery            from './comments.query.graphql';
  */
 export class Comments extends Component {
   render() {
-    const { comments } = this.props;
+    const { comments, reorderComments, orderBy, loading } = this.props;
+    let commentClasses = "comments";
+    let commentHeader = I18n.t("components.comments.title", { count: comments.length });
+    
+    if (loading) { 
+      commentClasses += " loading-comments"
+      commentHeader = I18n.t("components.comments.loading");
+    }
 
     return (
       <div className="columns large-9" id="comments">
-        <section className="comments">
+        <section className={commentClasses}>
           <div className="row collapse order-by">
             <h2 className="order-by__text section-heading">
-              { I18n.t("components.comments.title", { count: comments.length }) }
+              { commentHeader }
             </h2>
+            <CommentOrderSelector 
+              reorderComments={reorderComments}
+              defaultOrderBy={orderBy}
+            />
           </div>
           {this._renderCommentThreads()}
           {this._renderAddCommentForm()}
@@ -36,24 +48,25 @@ export class Comments extends Component {
       </div>
     );
   }
- 
+
   /**
    * Iterates the comment's collection and render a CommentThread for each one
    * @private
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
   _renderCommentThreads() {
-    const { comments, currentUser } = this.props;
+    const { comments, currentUser, options: { votable } } = this.props;
 
     return comments.map((comment) => (
       <CommentThread 
         key={comment.id} 
         comment={filter(CommentThread.fragments.comment, comment)} 
         currentUser={currentUser}
+        votable={votable}
       />
     ))
   }
- 
+
   /**
    * If current user is present it renders the add comment form
    * @private
@@ -61,7 +74,7 @@ export class Comments extends Component {
    */
   _renderAddCommentForm() {
     const { currentUser, commentableId, commentableType, options: { arguable } } = this.props;
-    
+
     if (currentUser) {
       return (
         <AddCommentForm 
@@ -78,6 +91,7 @@ export class Comments extends Component {
 }
 
 Comments.propTypes = {
+  loading: PropTypes.bool,
   comments: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired
   })),
@@ -88,7 +102,9 @@ Comments.propTypes = {
   commentableType: PropTypes.string.isRequired,
   options: PropTypes.shape({
     arguable: PropTypes.bool
-  }).isRequired
+  }).isRequired,
+  orderBy: PropTypes.string.isRequired,
+  reorderComments: PropTypes.func.isRequired
 };
 
 /**
@@ -99,13 +115,22 @@ const CommentsWithData = graphql(gql`
   ${commentsQuery}
   ${CommentThread.fragments.comment}
 `, {
-  options: { pollInterval: 15000 },
-  props: ({ ownProps, data: { currentUser, comments }}) => ({
+  options: {
+    pollInterval: 15000
+  },
+  props: ({ ownProps, data: {loading, currentUser, comments, refetch }}) => ({
+    loading: loading,
     comments: comments || [],
     currentUser: currentUser || null,
     commentableId: ownProps.commentableId,
     commentableType: ownProps.commentableType,
-    options: ownProps.options
+    orderBy: ownProps.orderBy,
+    options: ownProps.options,
+    reorderComments: (orderBy) => {
+      return refetch({
+        orderBy
+      });
+    }
   })
 })(Comments);
 
@@ -120,6 +145,7 @@ const CommentsApplication = ({ locale, commentableId, commentableType, options }
       commentableId={commentableId}
       commentableType={commentableType}
       options={options}
+      orderBy="older"
     />
   </Application>
 );