Added comment votes screen

src/components/comment/view/commentStyles.js

@@ -41,7 +41,7 @@ export default EStyleSheet.create({
     alignSelf: 'center',
     justifyContent: 'center',
     alignItems: 'center',
-    fontSize: 10,
+    fontSize: 12,
     color: '$iconColor',
   },
   voteCountWrapper: {

src/components/comment/view/commentView.js

@@ -1,7 +1,8 @@
 import React, { PureComponent, Fragment } from 'react';
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, TouchableWithoutFeedback } from 'react-native';
 import ActionSheet from 'react-native-actionsheet';
 import { injectIntl } from 'react-intl';
+import get from 'lodash/get';
 
 import { getTimeFromNow } from '../../../utils/time';
 // Constants
@@ -51,6 +52,7 @@ class CommentView extends PureComponent {
       handleOnLongPress,
       handleOnReplyPress,
       handleOnUserPress,
+      handleOnVotersPress,
       isLoggedIn,
       isShowComments,
       isShowMoreButton,
@@ -84,15 +86,23 @@ class CommentView extends PureComponent {
               {isLoggedIn && (
                 <Fragment>
                   <Upvote isShowPayoutValue content={comment} />
-                  <IconButton
-                    size={18}
-                    iconStyle={styles.leftIcon}
+                  <TextWithIcon
+                    iconName="people"
+                    iconSize={20}
+                    wrapperStyle={styles.leftButton}
                     iconType="MaterialIcons"
-                    name="people"
+                    isClickable
+                    onPress={() =>
+                      handleOnVotersPress &&
+                      voteCount > 0 &&
+                      handleOnVotersPress(get(comment, 'active_votes'))
+                    }
+                    text={voteCount}
+                    textMarginLeft={20}
+                    textStyle={styles.voteCountText}
                   />
-                  <Text style={styles.voteCountText}>{voteCount}</Text>
                   <IconButton
-                    size={18}
+                    size={20}
                     iconStyle={styles.leftIcon}
                     style={styles.leftButton}
                     name="reply"
@@ -102,7 +112,7 @@ class CommentView extends PureComponent {
                   {currentAccountUsername === comment.author && (
                     <Fragment>
                       <IconButton
-                        size={18}
+                        size={20}
                         iconStyle={styles.leftIcon}
                         style={styles.leftButton}
                         name="create"
@@ -112,7 +122,7 @@ class CommentView extends PureComponent {
                       {!comment.children && !voteCount && (
                         <Fragment>
                           <IconButton
-                            size={18}
+                            size={20}
                             iconStyle={styles.leftIcon}
                             style={styles.leftButton}
                             name="delete-forever"

src/components/comments/view/commentsView.js

@@ -53,6 +53,7 @@ class CommentsView extends PureComponent {
       marginLeft,
       handleDeleteComment,
       handleCommentCopyAction,
+      handleOnVotersPress,
       intl,
     } = this.props;
     const { selectedComment } = this.state;
@@ -75,6 +76,7 @@ class CommentsView extends PureComponent {
               handleOnEditPress={handleOnEditPress}
               handleOnReplyPress={handleOnReplyPress}
               handleOnUserPress={handleOnUserPress}
+              handleOnVotersPress={handleOnVotersPress}
               isLoggedIn={isLoggedIn}
               isShowMoreButton={commentNumber === 1 && get(item, 'children') > 0}
               voteCount={get(item, 'vote_count')}

src/components/commentsDisplay/view/commentsDisplayView.js

@@ -31,7 +31,15 @@ class CommentsDisplayView extends PureComponent {
   };
 
   render() {
-    const { author, commentCount, fetchPost, intl, permlink, mainAuthor } = this.props;
+    const {
+      author,
+      commentCount,
+      fetchPost,
+      intl,
+      permlink,
+      mainAuthor,
+      handleOnVotersPress,
+    } = this.props;
     const { selectedFilter } = this.state;
 
     return (
@@ -56,6 +64,7 @@ class CommentsDisplayView extends PureComponent {
                 author={author}
                 permlink={permlink}
                 mainAuthor={mainAuthor}
+                handleOnVotersPress={handleOnVotersPress}
               />
             </View>
           </Fragment>

src/components/postView/view/postDisplayView.js

@@ -152,6 +152,7 @@ class PostDisplayView extends PureComponent {
       author,
       intl,
       handleOnRemovePress,
+      handleOnVotersPress,
     } = this.props;
     const { postHeight, scrollHeight, isLoadedComments } = this.state;
 
@@ -211,6 +212,7 @@ class PostDisplayView extends PureComponent {
               permlink={post.permlink}
               commentCount={post.children}
               fetchPost={fetchPost}
+              handleOnVotersPress={handleOnVotersPress}
             />
           )}
         </ScrollView>

src/utils/postParser.js

@@ -48,26 +48,7 @@ export const parsePost = async (post, currentUserName, isPromoted) => {
     post.is_down_voted = false;
   }
 
-  const totalPayout =
-    parseFloat(post.pending_payout_value) +
-    parseFloat(post.total_payout_value) +
-    parseFloat(post.curator_payout_value);
-
-  post.total_payout = totalPayout.toFixed(3);
-
-  const voteRshares = post.active_votes.reduce((a, b) => a + parseFloat(b.rshares), 0);
-  const ratio = totalPayout / voteRshares;
-
-  if (!isEmpty(post.active_votes)) {
-    forEach(post.active_votes, value => {
-      post.vote_perecent = value.voter === currentUserName ? value.percent : null;
-      value.value = (value.rshares * ratio).toFixed(3);
-      value.reputation = getReputation(get(value, 'reputation'));
-      value.percent /= 100;
-      value.is_down_vote = Math.sign(value.percent) < 0;
-      value.avatar = `https://steemitimages.com/u/${value.voter}/avatar/small`;
-    });
-  }
+  post.active_votes = parseActiveVotes(post, currentUserName);
 
   post.reblogs = await getPostReblogs(post);
   post.reblogCount = get(post, 'reblogs', []).length;
@@ -140,6 +121,9 @@ export const parseComments = async (comments, currentUserName) => {
       comment.is_voted = false;
       comment.is_down_voted = false;
     }
+
+    comment.active_votes = parseActiveVotes(comment, currentUserName);
+
     return comment;
   });
 
@@ -167,3 +151,28 @@ const isDownVoted = (activeVotes, currentUserName) => {
   }
   return false;
 };
+
+const parseActiveVotes = (post, currentUserName) => {
+  const totalPayout =
+    parseFloat(post.pending_payout_value) +
+    parseFloat(post.total_payout_value) +
+    parseFloat(post.curator_payout_value);
+
+  post.total_payout = totalPayout.toFixed(3);
+
+  const voteRshares = post.active_votes.reduce((a, b) => a + parseFloat(b.rshares), 0);
+  const ratio = totalPayout / voteRshares;
+
+  if (!isEmpty(post.active_votes)) {
+    forEach(post.active_votes, value => {
+      post.vote_perecent = value.voter === currentUserName ? value.percent : null;
+      value.value = (value.rshares * ratio).toFixed(3);
+      value.reputation = getReputation(get(value, 'reputation'));
+      value.percent /= 100;
+      value.is_down_vote = Math.sign(value.percent) < 0;
+      value.avatar = `https://steemitimages.com/u/${value.voter}/avatar/small`;
+    });
+  }
+
+  return post.active_votes;
+};