up_vote_button.component.jsx in decidim-comments-0.0.3

- old
+ new

@@ -10,20 +10,31 @@
 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';
 
-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`
     ${upVoteFragment}
   `
 };
@@ -56,14 +67,14 @@
             upVoted: true
           }
         }
       },
       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;
             }
             return {
               ...comment,
@@ -76,9 +87,9 @@
             comments: prev.comments.map(commentReducer)
           }
         }
       }
     })
-  })  
+  })
 })(UpVoteButton);
 
 export default UpVoteButtonWithMutation;