decidim 0.0.2 → 0.0.3

data/decidim-comments/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/decidim-comments/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/decidim-comments/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);
     });
-  }); 
+  });
 });

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

@@ -24,8 +24,8 @@ export class Comments extends Component {
     const { comments, reorderComments, orderBy, loading } = this.props;
     let commentClasses = "comments";
     let commentHeader = I18n.t("components.comments.title", { count: comments.length });
-    
-    if (loading) { 
+
+    if (loading) {
       commentClasses += " loading-comments"
       commentHeader = I18n.t("components.comments.loading");
     }
@@ -37,7 +37,7 @@ export class Comments extends Component {
             <h2 className="order-by__text section-heading">
               { commentHeader }
             </h2>
-            <CommentOrderSelector 
+            <CommentOrderSelector
               reorderComments={reorderComments}
               defaultOrderBy={orderBy}
             />
@@ -55,13 +55,13 @@ export class Comments extends Component {
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
   _renderCommentThreads() {
-    const { comments, currentUser, options: { votable } } = this.props;
+    const { comments, session, options: { votable } } = this.props;
 
     return comments.map((comment) => (
-      <CommentThread 
-        key={comment.id} 
-        comment={filter(CommentThread.fragments.comment, comment)} 
-        currentUser={currentUser}
+      <CommentThread
+        key={comment.id}
+        comment={filter(CommentThread.fragments.comment, comment)}
+        session={session}
         votable={votable}
       />
     ))
@@ -73,12 +73,12 @@ export class Comments extends Component {
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   _renderAddCommentForm() {
-    const { currentUser, commentableId, commentableType, options: { arguable } } = this.props;
+    const { session, commentableId, commentableType, options: { arguable } } = this.props;
 
-    if (currentUser) {
+    if (session) {
       return (
-        <AddCommentForm 
-          currentUser={currentUser}
+        <AddCommentForm
+          session={session}
           commentableId={commentableId}
           commentableType={commentableType}
           arguable={arguable}
@@ -95,8 +95,8 @@ Comments.propTypes = {
   comments: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired
   })),
-  currentUser: PropTypes.shape({
-    name: PropTypes.string.isRequired
+  session: PropTypes.shape({
+    user: PropTypes.any.isRequired
   }),
   commentableId: PropTypes.string.isRequired,
   commentableType: PropTypes.string.isRequired,
@@ -111,17 +111,21 @@ Comments.propTypes = {
  * Wrap the Comments component with a GraphQL query and children
  * fragments.
  */
+
+window.Comments = Comments;
+
 const CommentsWithData = graphql(gql`
   ${commentsQuery}
+  ${AddCommentForm.fragments.user}
   ${CommentThread.fragments.comment}
 `, {
   options: {
     pollInterval: 15000
   },
-  props: ({ ownProps, data: {loading, currentUser, comments, refetch }}) => ({
+  props: ({ ownProps, data: { loading, session, comments, refetch }}) => ({
     loading: loading,
     comments: comments || [],
-    currentUser: currentUser || null,
+    session,
     commentableId: ownProps.commentableId,
     commentableType: ownProps.commentableType,
     orderBy: ownProps.orderBy,
@@ -141,7 +145,7 @@ const CommentsWithData = graphql(gql`
  */
 const CommentsApplication = ({ locale, commentableId, commentableType, options }) => (
   <Application locale={locale}>
-    <CommentsWithData 
+    <CommentsWithData
       commentableId={commentableId}
       commentableType={commentableType}
       options={options}

data/decidim-comments/app/frontend/comments/comments.component.test.jsx

@@ -1,22 +1,22 @@
-import { shallow }             from 'enzyme';
-import { filter }              from 'graphql-anywhere';
-import gql                     from 'graphql-tag';
+import { shallow }          from 'enzyme';
+import { filter }           from 'graphql-anywhere';
+import gql                  from 'graphql-tag';
 
-import { Comments }            from './comments.component';
-import CommentThread           from './comment_thread.component';
-import AddCommentForm          from './add_comment_form.component';
-import CommentOrderSelector    from './comment_order_selector.component';
+import { Comments }         from './comments.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'
+import commentsQuery        from './comments.query.graphql'
 
-import stubComponent           from '../support/stub_component';
-import generateCommentsData    from '../support/generate_comments_data';
-import generateCurrentUserData from '../support/generate_current_user_data';
-import resolveGraphQLQuery     from '../support/resolve_graphql_query';
+import stubComponent        from '../support/stub_component';
+import generateCommentsData from '../support/generate_comments_data';
+import generateUserData     from '../support/generate_user_data';
+import resolveGraphQLQuery  from '../support/resolve_graphql_query';
 
 describe('<Comments />', () => {
   let comments = [];
-  let currentUser = null;
+  let session = null;
   const commentableId = "1";
   const commentableType = "Decidim::ParticipatoryProcess";
   const orderBy = "older";
@@ -28,6 +28,14 @@ describe('<Comments />', () => {
     }
   `;
 
+  const addCommentFragment = gql`
+    fragment AddCommentForm on User {
+      verifiedUserGroups {
+        id
+      }
+    }
+  `;
+
   stubComponent(CommentOrderSelector)
 
   stubComponent(CommentThread, {
@@ -36,21 +44,28 @@ describe('<Comments />', () => {
     }
   });
 
-  stubComponent(AddCommentForm);
+  stubComponent(AddCommentForm, {
+    fragments: {
+      user: addCommentFragment
+    }
+  });
 
   beforeEach(() => {
-    const currentUserData = generateCurrentUserData();
+    const userData = generateUserData();
     const commentsData = generateCommentsData(15);
 
     const query = gql`
       ${commentsQuery}
       ${commentThreadFragment}
+      ${addCommentFragment}
     `;
 
     const result = resolveGraphQLQuery(query, {
       filterResult: false,
       rootValue: {
-        currentUser: currentUserData,
+        session: {
+          user: userData
+        },
         comments: commentsData
       },
       variables: {
@@ -60,40 +75,40 @@ describe('<Comments />', () => {
       }
     });
 
-    currentUser = result.currentUser;
+    session = result.session;
     comments = result.comments;
   });
 
   it("should render loading-comments calss and the respective loading text", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} loading />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} loading />);
     expect(wrapper.find('.loading-comments')).to.be.present();
     expect(wrapper.find('h2')).to.have.text("Loading comments ...");
   });
 
   it("should render a div of id comments", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper.find('#comments')).to.be.present();
   });
 
   describe("should render a CommentThread component for each comment", () => {
     it("and pass filter comment data as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node, idx) => {
         expect(node).to.have.prop("comment").deep.equal(filter(commentThreadFragment, comments[idx]));
       });
     });
 
-    it("and pass the currentUser as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+    it("and pass the session as a prop to it", () => {
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node) => {
-        expect(node).to.have.prop("currentUser").deep.equal(currentUser);
+        expect(node).to.have.prop("session").deep.equal(session);
       });
     });
 
     it("and pass the option votable as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{ votable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{ votable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper).to.have.exactly(comments.length).descendants(CommentThread);
       wrapper.find(CommentThread).forEach((node) => {
         expect(node).to.have.prop("votable").equal(true);
@@ -102,41 +117,41 @@ describe('<Comments />', () => {
   });
 
   it("should render comments count", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
     const rex = new RegExp(`${comments.length} comments`);
     expect(wrapper.find('h2.section-heading')).to.have.text().match(rex);
   });
 
   it("should render a AddCommentForm component and pass 'options.arguable' as a prop", () => {
-    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{ arguable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
+    const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{ arguable: true }} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper).to.have.exactly(1).descendants(AddCommentForm);
     expect(wrapper.find(AddCommentForm)).to.have.prop('arguable').equal(true);
   });
 
-  describe("if currentUser is not present", () => {
+  describe("if session is not present", () => {
     beforeEach(() => {
-      currentUser = null;
+      session = null;
     });
 
     it("should not render a AddCommentForm component", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(AddCommentForm)).not.to.be.present();
     });
   });
 
   describe("should render a CommentOrderSelector component", () => {
     it("should render a CommentOrderSelector component", () => {
-        const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+        const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
         expect(wrapper.find(CommentOrderSelector)).to.be.present();
       });
 
     it("and pass the reorderComments as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentOrderSelector)).to.have.prop('reorderComments').deep.equal(reorderComments);
     });
 
     it("and pass the orderBy as a prop to it", () => {
-      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} currentUser={currentUser} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments comments={comments} commentableId={commentableId} commentableType={commentableType} session={session} options={{}} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentOrderSelector)).to.have.prop('defaultOrderBy').equal('older');
     });
   });

data/decidim-comments/app/frontend/comments/comments.query.graphql

@@ -1,7 +1,10 @@
 query GetComments($commentableId: String!, $commentableType: String!, $orderBy: String) {
-  currentUser {
-    name
-    avatarUrl
+  session {
+    user {
+      name
+      avatarUrl
+    }
+    ...AddCommentForm
   }
   comments(commentableId: $commentableId, commentableType: $commentableType, orderBy: $orderBy) {
     id

data/decidim-comments/app/frontend/comments/down_vote_button.component.jsx

@@ -12,15 +12,26 @@ import commentDataFragment from './comment_data.fragment.graphql';
 import upVoteFragment      from './up_vote.fragment.graphql';
 import downVoteFragment    from './down_vote.fragment.graphql';
 
-export const DownVoteButton = ({ comment: { downVotes, upVoted, downVoted }, downVote }) => (
-  <VoteButton
-    buttonClassName="comment__votes--down"
-    iconName="icon-chevron-bottom"
-    votes={downVotes}
-    voteAction={downVote}
-    disabled={upVoted || downVoted}
-  />
-);
+export const DownVoteButton = ({ 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}
+    />
+  );
+};
 
 DownVoteButton.fragments = {
   comment: gql`
@@ -35,7 +46,7 @@ DownVoteButton.propTypes = {
 
 const DownVoteButtonWithMutation = graphql(gql`
   ${downVoteMutation}
-  ${commentFragment}  
+  ${commentFragment}
   ${commentDataFragment}
   ${upVoteFragment}
   ${downVoteFragment}