diff --git a/src/components/upvote/container/upvoteContainer.js b/src/components/upvote/container/upvoteContainer.js index 441212430..f597fa381 100644 --- a/src/components/upvote/container/upvoteContainer.js +++ b/src/components/upvote/container/upvoteContainer.js @@ -53,7 +53,12 @@ class UpvoteContainer extends PureComponent { } = this.props; const author = get(content, 'author'); - const isVoted = get(content, 'is_voted'); + const isVoted = + get(content, 'is_voted', false) && parseInt(get(content, 'is_voted'), 10) / 10000; + const isDownVoted = + get(content, 'is_down_voted', false) && + (parseInt(get(content, 'is_down_voted'), 10) / 10000) * -1; + const totalPayout = get(content, 'total_payout'); const isDecinedPayout = get(content, 'is_declined_payout'); const permlink = get(content, 'permlink'); @@ -80,6 +85,7 @@ class UpvoteContainer extends PureComponent { isLoggedIn={isLoggedIn} isShowPayoutValue={isShowPayoutValue} isVoted={isVoted} + isDownVoted={isDownVoted} payoutDate={payoutDate} pendingPayout={pendingPayout} permlink={permlink} diff --git a/src/components/upvote/view/upvoteStyles.js b/src/components/upvote/view/upvoteStyles.js index 942de45c7..bf7e72451 100644 --- a/src/components/upvote/view/upvoteStyles.js +++ b/src/components/upvote/view/upvoteStyles.js @@ -48,8 +48,8 @@ export default EStyleSheet.create({ marginLeft: 8, }, percent: { - width: 40, color: '$primaryDarkGray', + marginRight: 5, }, slider: { flex: 1, diff --git a/src/components/upvote/view/upvoteView.js b/src/components/upvote/view/upvoteView.js index 145814f5a..6297f77b8 100644 --- a/src/components/upvote/view/upvoteView.js +++ b/src/components/upvote/view/upvoteView.js @@ -30,11 +30,15 @@ class UpvoteView extends Component { constructor(props) { super(props); this.state = { - sliderValue: get(props, 'upvotePercent', 1), + sliderValue: + get(props, 'isVoted', false) || + get(props, 'isDownVoted', 1) || + get(props, 'upvotePercent', 1), isVoting: false, isVoted: get(props, 'isVoted', false), amount: '0.00000', isShowDetails: false, + downvote: get(props, 'isDownVoted', false), }; } @@ -52,7 +56,12 @@ class UpvoteView extends Component { } if (upvotePercent !== get(nextProps, 'upvotePercent')) { - this.setState({ sliderValue: get(nextProps, 'upvotePercent') }); + this.setState({ + sliderValue: + get(nextProps, 'isVoted', false) || + get(nextProps, 'isDownVoted', 1) || + get(nextProps, 'upvotePercent', 1), + }); } } @@ -80,7 +89,7 @@ class UpvoteView extends Component { } }; - _upvoteContent = async () => { + _upvoteContent = closePopover => { const { author, currentAccount, @@ -89,40 +98,95 @@ class UpvoteView extends Component { permlink, pinCode, } = this.props; - const { sliderValue } = this.state; + const { sliderValue, downvote } = this.state; - this.setState( - { - isVoting: true, - }, - () => { - handleSetUpvotePercent(sliderValue); - }, - ); + if (!downvote) { + closePopover(); + this.setState( + { + isVoting: true, + }, + () => { + handleSetUpvotePercent(sliderValue); + }, + ); - const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 : 0; + const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 : 0; - vote(currentAccount, pinCode, author, permlink, weight) - .then(() => { - this.setState( - { - isVoted: !!sliderValue, + vote(currentAccount, pinCode, author, permlink, weight) + .then(() => { + this.setState( + { + isVoted: !!sliderValue, + isVoting: false, + }, + () => { + if (fetchPost) { + fetchPost(); + } + }, + ); + }) + .catch(err => { + Alert.alert('Failed!', err.message); + this.setState({ + isVoted: false, isVoting: false, - }, - () => { - if (fetchPost) { - fetchPost(); - } - }, - ); - }) - .catch(err => { - Alert.alert('Failed!', err.message); - this.setState({ - isVoted: false, - isVoting: false, + }); }); - }); + } else { + this.setState({ sliderValue: 1, downvote: false }); + } + }; + + _downvoteContent = closePopover => { + const { + author, + currentAccount, + fetchPost, + handleSetUpvotePercent, + permlink, + pinCode, + } = this.props; + const { sliderValue, downvote } = this.state; + + if (downvote) { + closePopover(); + this.setState( + { + isVoting: true, + }, + () => { + handleSetUpvotePercent(sliderValue); + }, + ); + + const weight = sliderValue ? (sliderValue * 100).toFixed(0) * 100 * -1 : 0; + + vote(currentAccount, pinCode, author, permlink, weight) + .then(() => { + this.setState( + { + isVoted: !!sliderValue, + isVoting: false, + }, + () => { + if (fetchPost) { + fetchPost(); + } + }, + ); + }) + .catch(err => { + Alert.alert('Failed!', err.message); + this.setState({ + isVoted: false, + isVoting: false, + }); + }); + } else { + this.setState({ sliderValue: 1, downvote: true }); + } }; _handleOnPopoverClose = () => { @@ -145,8 +209,9 @@ class UpvoteView extends Component { curationPayout, payoutDate, intl, + isDownVoted, } = this.props; - const { isVoting, amount, sliderValue, isVoted, isShowDetails } = this.state; + const { isVoting, amount, sliderValue, isVoted, isShowDetails, downvote } = this.state; let iconName = 'ios-arrow-dropup'; let iconType; @@ -156,9 +221,10 @@ class UpvoteView extends Component { iconType = 'AntDesign'; } - const _percent = `${(sliderValue * 100).toFixed(0)}%`; + const _percent = `${downvote ? '-' : ''}${(sliderValue * 100).toFixed(0)}%`; const _amount = `$${amount}`; const _totalPayout = totalPayout || '0.000'; + const sliderColor = downvote ? '#ec8b88' : '#357ce6'; return ( @@ -185,10 +251,10 @@ class UpvoteView extends Component { ) : ( )} @@ -253,8 +319,7 @@ class UpvoteView extends Component { { - closePopover(); - this._upvoteContent(); + this._upvoteContent(closePopover); }} style={styles.upvoteButton} > @@ -269,7 +334,7 @@ class UpvoteView extends Component { {_amount} {_percent} + this._downvoteContent(closePopover)} + style={styles.upvoteButton} + > + + )} diff --git a/src/utils/postParser.js b/src/utils/postParser.js index 762a07044..32ea62c19 100644 --- a/src/utils/postParser.js +++ b/src/utils/postParser.js @@ -42,8 +42,10 @@ export const parsePost = async (post, currentUserName, isPromoted) => { if (currentUserName) { post.is_voted = isVoted(post.active_votes, currentUserName); + post.is_down_voted = isDownVoted(post.active_votes, currentUserName); } else { post.is_voted = false; + post.is_down_voted = false; } const totalPayout = @@ -133,8 +135,10 @@ export const parseComments = async (comments, currentUserName) => { if (currentUserName && activeVotes && activeVotes.length > 0) { comment.is_voted = isVoted(activeVotes, currentUserName); + comment.is_down_voted = isDownVoted(comment.active_votes, currentUserName); } else { comment.is_voted = false; + comment.is_down_voted = false; } return comment; }); @@ -144,5 +148,22 @@ export const parseComments = async (comments, currentUserName) => { return _comments; }; -const isVoted = (activeVotes, currentUserName) => - activeVotes.some(v => v.voter === currentUserName && v.percent > 0); +const isVoted = (activeVotes, currentUserName) => { + const result = activeVotes.find( + element => get(element, 'voter') === currentUserName && get(element, 'percent', 0) > 0, + ); + if (result) { + return result.percent; + } + return false; +}; + +const isDownVoted = (activeVotes, currentUserName) => { + const result = activeVotes.find( + element => get(element, 'voter') === currentUserName && get(element, 'percent') < 0, + ); + if (result) { + return result.percent; + } + return false; +};