decidim-comments 0.0.2 → 0.0.3

data/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/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/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/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}

data/app/frontend/comments/up_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 UpVoteButton = ({ comment: { upVotes, upVoted, downVoted }, upVote }) => (
-  <VoteButton
-    buttonClassName="comment__votes--up"
-    iconName="icon-chevron-top"
-    votes={upVotes} 
-    voteAction={upVote} 
-    disabled={upVoted || downVoted}
-  />
-);
+export const UpVoteButton = ({ 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}
+    />
+  );
+}
 
 UpVoteButton.fragments = {
   comment: gql`
@@ -58,10 +69,10 @@ const UpVoteButtonWithMutation = graphql(gql`
         }
       },
       updateQueries: {
-        GetComments: (prev, { mutationResult: { data } }) => {          
+        GetComments: (prev, { mutationResult: { data } }) => {
           const commentReducer = (comment) => {
             const replies = comment.replies || [];
-            
+
             if (comment.id === ownProps.comment.id) {
               return data.comment.upVote;
             }
@@ -78,7 +89,7 @@ const UpVoteButtonWithMutation = graphql(gql`
         }
       }
     })
-  })  
+  })
 })(UpVoteButton);
 
 export default UpVoteButtonWithMutation;

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

@@ -1,18 +1,26 @@
-import { PropTypes } from 'react';
+import { Component, PropTypes } from 'react';
 import Icon          from '../application/icon.component';
 
-const VoteButton = ({ buttonClassName, iconName, votes, voteAction, disabled }) => (
-  <button className={buttonClassName} onClick={() => voteAction()} disabled={disabled}>
-    <Icon name={iconName} iconExtraClassName="icon--small" />
-    { ` ${votes}` }
-  </button>
-);
+class VoteButton extends Component {
+  render() {
+    const { buttonClassName, iconName, votes, voteAction, disabled, selectedClass } = this.props;
+    let voteClasses = `${buttonClassName} ${selectedClass}`;
+
+    return (
+      <button className={voteClasses} onClick={() => voteAction()} disabled={disabled}>
+        <Icon name={iconName} iconExtraClassName="icon--small" />
+        { ` ${votes}` }
+      </button>
+    );
+  }
+}
 
 VoteButton.propTypes = {
   buttonClassName: PropTypes.string.isRequired,
   iconName: PropTypes.string.isRequired,
   votes: PropTypes.number.isRequired,
   voteAction: PropTypes.func.isRequired,
+  selectedClass: PropTypes.string,
   disabled: PropTypes.bool
 };
 

data/app/frontend/comments/vote_button_component.test.jsx

@@ -21,7 +21,7 @@ describe("<VoteButton />", () => {
   });
 
   it("should render a Icon component with the correct name prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} />); 
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} />);
     expect(wrapper.find(Icon)).to.have.prop("name").equal('vote-icon');
   });
 
@@ -32,7 +32,12 @@ describe("<VoteButton />", () => {
   });
 
   it("should disable the button based on the disabled prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled />);    
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled />);
     expect(wrapper.find('button')).to.be.disabled();
   })
+
+  it("should render a button with the given selectedClass", () => {
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled selectedClass="is-vote-selected" />);
+    expect(wrapper.find('.is-vote-selected')).to.be.present();
+  })
 });