decidim-comments 0.0.2 → 0.0.3

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

@@ -0,0 +1,6 @@
+fragment AddCommentForm on Session {
+  verifiedUserGroups {
+    id
+    name
+  }
+}

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

@@ -1,5 +1,5 @@
-mutation addComment($commentableId: String!, $commentableType: String!, $body: String!, $alignment: Int)  {
-  addComment(commentableId: $commentableId, commentableType: $commentableType, body: $body, alignment: $alignment) {
+mutation addComment($commentableId: String!, $commentableType: String!, $body: String!, $alignment: Int, $userGroupId: ID)  {
+  addComment(commentableId: $commentableId, commentableType: $commentableType, body: $body, alignment: $alignment, userGroupId: $userGroupId) {
     ...CommentThread
   }
 }

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

@@ -68,12 +68,12 @@ class Comment extends Component {
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
   _renderReplyButton() {
-    const { comment: { canHaveReplies }, currentUser } = this.props;
+    const { comment: { canHaveReplies }, session } = this.props;
     const { showReplyForm } = this.state;
 
-    if (currentUser && canHaveReplies) {
+    if (session && canHaveReplies) {
       return (
-        <button 
+        <button
           className="comment__reply muted-link"
           aria-controls="comment1-reply"
           onClick={() => this.setState({ showReplyForm: !showReplyForm })}
@@ -92,10 +92,10 @@ class Comment extends Component {
    * @returns {Void|DOMElement} - Render the reply button or not if user can reply
    */
   _renderAdditionalReplyButton() {
-    const { comment: { canHaveReplies, hasReplies }, currentUser, isRootComment } = this.props;
+    const { comment: { canHaveReplies, hasReplies }, session, isRootComment } = this.props;
     const { showReplyForm } = this.state;
-    
-    if (currentUser && canHaveReplies) {
+
+    if (session && canHaveReplies) {
       if (hasReplies && isRootComment) {
 
         return (
@@ -140,9 +140,9 @@ class Comment extends Component {
    * @returns {Void|DomElement} - A wrapper element with comment replies inside
    */
   _renderReplies() {
-    const { comment: { id, replies }, currentUser, votable, articleClassName } = this.props;
+    const { comment: { id, replies }, session, votable, articleClassName } = this.props;
     let replyArticleClassName = 'comment comment--nested';
-   
+
     if (articleClassName === 'comment comment--nested') {
       replyArticleClassName = `${replyArticleClassName} comment--nested--alt`;
     }
@@ -155,7 +155,7 @@ class Comment extends Component {
               <Comment
                 key={`comment_${id}_reply_${reply.id}`}
                 comment={reply}
-                currentUser={currentUser}
+                session={session}
                 votable={votable}
                 articleClassName={replyArticleClassName}
               />
@@ -164,7 +164,7 @@ class Comment extends Component {
         </div>
       );
     }
-    
+
     return null;
   }
 
@@ -174,7 +174,7 @@ class Comment extends Component {
    * @returns {Void|ReactElement} - Render the AddCommentForm component or not
    */
   _renderReplyForm() {
-    const { currentUser, comment } = this.props;
+    const { session, comment } = this.props;
     const { showReplyForm } = this.state;
 
     if (showReplyForm) {
@@ -182,7 +182,7 @@ class Comment extends Component {
         <AddCommentForm
           commentableId={comment.id}
           commentableType="Decidim::Comments::Comment"
-          currentUser={currentUser}
+          session={session}
           showTitle={false}
           submitButtonClassName="button small hollow"
           onCommentAdded={() => this.setState({ showReplyForm: false })}
@@ -207,7 +207,7 @@ class Comment extends Component {
     });
 
     let label = '';
-    
+
     if (alignment === 1) {
       label = I18n.t('components.comment.alignment.in_favor');
     } else {
@@ -251,8 +251,8 @@ Comment.propTypes = {
     propType(Comment.fragments.comment).isRequired,
     propType(Comment.fragments.commentData).isRequired
   ]).isRequired,
-  currentUser: PropTypes.shape({
-    name: PropTypes.string.isRequired
+  session: PropTypes.shape({
+    user: PropTypes.any.isRequired
   }),
   articleClassName: PropTypes.string.isRequired,
   isRootComment: PropTypes.bool,

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

@@ -1,25 +1,25 @@
 /* eslint-disable no-unused-expressions */
-import { shallow, mount }      from 'enzyme';
-import { filter }              from 'graphql-anywhere';
-import gql                     from 'graphql-tag';
+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 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 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';
-import generateCurrentUserData from '../support/generate_current_user_data';
+import stubComponent        from '../support/stub_component';
+import generateCommentsData from '../support/generate_comments_data';
+import generateUserData     from '../support/generate_user_data';
 
 describe("<Comment />", () => {
   let comment = {};
-  let currentUser = null;
+  let session = null;
 
   stubComponent(AddCommentForm);
   stubComponent(UpVoteButton);
@@ -28,8 +28,7 @@ describe("<Comment />", () => {
   beforeEach(() => {
     let commentsData = generateCommentsData(1);
     commentsData[0].replies = generateCommentsData(3);
-    const currentUserData = generateCurrentUserData();
-    
+
     const fragment = gql`
       ${commentFragment}
       ${commentDataFragment}
@@ -38,44 +37,46 @@ describe("<Comment />", () => {
     `;
 
     comment = filter(fragment, commentsData[0]);
-    currentUser = currentUserData;
+    session = {
+      user: generateUserData()
+    }
   });
 
   it("should render an article with class comment", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('article.comment')).to.present();
   });
 
   it("should render a time tag with comment's created at", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('time')).to.have.text(comment.created_at);
   });
 
   it("should render author's name in a link with class author__name", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('a.author__name')).to.have.text(comment.author.name);
   });
 
   it("should render author's avatar as a image tag", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('a.author__avatar img')).to.have.attr('src').equal(comment.author.avatarUrl);
   });
 
   it("should render comment's body on a div with class comment__content", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('div.comment__content')).to.have.text(comment.body);
   });
 
   it("should initialize with a state property showReplyForm as false", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper).to.have.state('showReplyForm', false);
   });
 
   it("should render a AddCommentForm component with the correct props when clicking the reply button", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find(AddCommentForm)).not.to.be.present();
     wrapper.find('button.comment__reply').simulate('click');
-    expect(wrapper.find(AddCommentForm)).to.have.prop('currentUser').deep.equal(currentUser);
+    expect(wrapper.find(AddCommentForm)).to.have.prop('session').deep.equal(session);
     expect(wrapper.find(AddCommentForm)).to.have.prop('commentableId').equal(comment.id);
     expect(wrapper.find(AddCommentForm)).to.have.prop('commentableType').equal("Decidim::Comments::Comment");
     expect(wrapper.find(AddCommentForm)).to.have.prop('showTitle').equal(false);
@@ -84,89 +85,89 @@ describe("<Comment />", () => {
 
   it("should not render the reply button if the comment cannot have replies", () => {
     comment.canHaveReplies = false;
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('button.comment__reply')).not.to.be.present();
   });
 
   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 />);
+    const wrapper = shallow(<Comment comment={comment} session={session} 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} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     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 />);
+    const wrapper = shallow(<Comment comment={comment} session={session} 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 />);
+    const wrapper = shallow(<Comment comment={comment} session={session} 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("session").deep.equal(session);
       expect(node).to.have.prop("articleClassName").equal("comment comment--nested")
       expect(node).to.have.prop("votable").equal(true);
     });
   });
 
   it("should render comment replies with articleClassName as 'comment comment--nested comment--nested--alt' when articleClassName is 'comment comment--nested'", () => {
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} articleClassName="comment comment--nested" />);
+    const wrapper = shallow(<Comment comment={comment} session={session} articleClassName="comment comment--nested" />);
     wrapper.find(Comment).forEach((node) => {
       expect(node).to.have.prop("articleClassName").equal("comment comment--nested comment--nested--alt")
     });
   });
 
   it("should have a default prop articleClassName with value 'comment'", () => {
-    const wrapper = mount(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = mount(<Comment comment={comment} session={session} />);
     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} />);
+    const wrapper = mount(<Comment comment={comment} session={session} />);
     expect(wrapper).to.have.prop("isRootComment").equal(false);
   });
 
   describe("when user is not logged in", () => {
     beforeEach(() => {
-      currentUser = null;
+      session = null;
     });
 
     it("should not render reply button", () => {
-      const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+      const wrapper = shallow(<Comment comment={comment} session={session} />);
       expect(wrapper.find('button.comment__reply')).not.to.be.present();
     });
   });
 
   it("should render a 'in favor' badge if comment's alignment is 1", () => {
     comment.alignment = 1;
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     expect(wrapper.find('span.success.label')).to.have.text('In favor');
   });
 
   it("should render a 'against' badge if comment's alignment is -1", () => {
     comment.alignment = -1;
-    const wrapper = shallow(<Comment comment={comment} currentUser={currentUser} />);
+    const wrapper = shallow(<Comment comment={comment} session={session} />);
     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 />);
+      const wrapper = shallow(<Comment comment={comment} session={session} 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 />);
+      const wrapper = shallow(<Comment comment={comment} session={session} votable />);
       expect(wrapper.find(DownVoteButton)).to.have.prop("comment").deep.equal(comment);
     })
   });

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

@@ -28,7 +28,7 @@ class CommentOrderSelector extends Component {
         <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.${orderBy}`) }</a>
+            <a>{ I18n.t(`components.comment_order_selector.order.${orderBy}`) }</a>
             <ul className="menu">
               <li>
                 <a href="" className="test" onClick={(event) => this._updateOrder(event, "best_rated")} >

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

@@ -15,15 +15,15 @@ import commentThreadFragment    from './comment_thread.fragment.graphql'
  */
 class CommentThread extends Component {
   render() {
-    const { comment, currentUser, votable } = this.props;
+    const { comment, session, 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)}
+            session={session}
             votable={votable}
             isRootComment
           />
@@ -39,7 +39,7 @@ class CommentThread extends Component {
    */
   _renderTitle() {
     const { comment: { author, hasReplies } } = this.props;
-    
+
     if (hasReplies) {
       return (
         <h6 className="comment-thread__title">
@@ -60,8 +60,8 @@ CommentThread.fragments = {
 };
 
 CommentThread.propTypes = {
-  currentUser: PropTypes.shape({
-    name: PropTypes.string.isRequired
+  session: PropTypes.shape({
+    user: PropTypes.any.isRequired
   }),
   comment: propType(CommentThread.fragments.comment).isRequired,
   votable: PropTypes.bool

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

@@ -2,18 +2,18 @@ import { shallow }             from 'enzyme';
 import { filter }              from 'graphql-anywhere';
 import gql                     from 'graphql-tag';
 
-import CommentThread           from './comment_thread.component';
-import Comment                 from './comment.component';
+import CommentThread         from './comment_thread.component';
+import Comment               from './comment.component';
 
-import commentThreadFragment   from './comment_thread.fragment.graphql'
+import commentThreadFragment from './comment_thread.fragment.graphql'
 
-import stubComponent           from '../support/stub_component';
-import generateCommentsData    from '../support/generate_comments_data';
-import generateCurrentUserData from '../support/generate_current_user_data';
+import stubComponent         from '../support/stub_component';
+import generateCommentsData  from '../support/generate_comments_data';
+import generateCUserData     from '../support/generate_user_data';
 
 describe('<CommentThread />', () => {
   let comment = {};
-  let currentUser = null;
+  let session = null;
 
   const commentFragment = gql`
     fragment Comment on Comment {
@@ -29,19 +29,21 @@ describe('<CommentThread />', () => {
 
   beforeEach(() => {
     const commentsData = generateCommentsData(1);
-  
+
     const fragment = gql`
       ${commentThreadFragment}
       ${commentFragment}
     `;
 
-    currentUser = generateCurrentUserData();
+    session = {
+      user: generateCUserData()
+    };
     comment = filter(fragment, commentsData[0]);
   });
 
   describe("when comment doesn't have replies", () => {
     it("should not render a title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
       expect(wrapper.find('h6.comment-thread__title')).not.to.present();
     });
   });
@@ -52,30 +54,30 @@ describe('<CommentThread />', () => {
     });
 
     it("should render a h6 comment-thread__title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
       expect(wrapper.find('h6.comment-thread__title')).to.have.text(`Conversation with ${comment.author.name}`);
     });
   });
 
   describe("should render a Comment", () => {
-    it("and pass the currentUser as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
-      expect(wrapper.find(Comment).first()).to.have.prop("currentUser").deep.equal(currentUser);
+    it("and pass the session as a prop to it", () => {
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
+      expect(wrapper.find(Comment).first()).to.have.prop("session").deep.equal(session);
     });
 
     it("and pass filter comment data as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} currentUser={currentUser} />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} />);
       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 />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} 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 />);
+      const wrapper = shallow(<CommentThread comment={comment} session={session} votable isRootComment />);
       expect(wrapper.find(Comment).first()).to.have.prop("isRootComment").equal(true);
     });
-  }); 
+  });
 });