diff --git a/src/components/comments/container/commentsContainer.js b/src/components/comments/container/commentsContainer.js index 507b34654..e2fd19520 100644 --- a/src/components/comments/container/commentsContainer.js +++ b/src/components/comments/container/commentsContainer.js @@ -11,8 +11,6 @@ import { getComments } from '../../../providers/steem/dsteem'; // Constants import { default as ROUTES } from '../../../constants/routeNames'; -// Utilities - // Component import { CommentsView } from '..'; @@ -36,14 +34,89 @@ class CommentsContainer extends Component { } componentWillReceiveProps(nextProps) { - const { commentCount } = this.props; + const { commentCount, selectedFilter } = this.props; if (nextProps.commentCount > commentCount) { this._getComments(); } + + if (selectedFilter !== nextProps.selectedFilter && nextProps.selectedFilter) { + const shortedComments = this._shortComments(nextProps.selectedFilter); + this.setState({ comments: shortedComments }); + } } // Component Functions + + _shortComments = (sortOrder) => { + const { comments: parent } = this.state; + + const allPayout = c => parseFloat(c.pending_payout_value.split(' ')[0]) + + parseFloat(c.total_payout_value.split(' ')[0]) + + parseFloat(c.curator_payout_value.split(' ')[0]); + + const absNegative = a => a.net_rshares < 0; + + const sortOrders = { + TRENDING: (a, b) => { + if (absNegative(a)) { + return 1; + } + + if (absNegative(b)) { + return -1; + } + + const apayout = allPayout(a); + const bpayout = allPayout(b); + if (apayout !== bpayout) { + return bpayout - apayout; + } + + return 0; + }, + REPUTATION: (a, b) => { + const keyA = a.author_reputation; + const keyB = b.author_reputation; + + if (keyA > keyB) return -1; + if (keyA < keyB) return 1; + + return 0; + }, + VOTES: (a, b) => { + const keyA = a.net_votes; + const keyB = b.net_votes; + + if (keyA > keyB) return -1; + if (keyA < keyB) return 1; + + return 0; + }, + AGE: (a, b) => { + if (absNegative(a)) { + return 1; + } + + if (absNegative(b)) { + return -1; + } + + const keyA = Date.parse(a.created); + const keyB = Date.parse(b.created); + + if (keyA > keyB) return -1; + if (keyA < keyB) return 1; + + return 0; + }, + }; + + parent.sort(sortOrders[sortOrder]); + + return parent; + }; + _getComments = () => { const { author, permlink } = this.props; @@ -87,18 +160,19 @@ class CommentsContainer extends Component { isLoggedIn, commentCount, author, - permlink, currentAccount, commentNumber, comments, fetchPost, isShowMoreButton, + selectedFilter, selectedPermlink: _selectedPermlink, } = this.props; return ( diff --git a/src/components/comments/view/commentsView.js b/src/components/comments/view/commentsView.js index 246902515..ac9d58ba4 100644 --- a/src/components/comments/view/commentsView.js +++ b/src/components/comments/view/commentsView.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { View, FlatList } from 'react-native'; +import { FlatList } from 'react-native'; // Components import { Comment } from '../../comment'; @@ -21,49 +21,46 @@ class CommentsView extends PureComponent { // Component Life Cycles // Component Functions - _handleOnDropdownSelect = () => {}; _keyExtractor = item => item.permlink; render() { const { avatarSize, + commentCount, commentNumber, comments, currentAccountUsername, + fetchPost, handleOnEditPress, handleOnReplyPress, handleOnUserPress, isLoggedIn, - marginLeft, isShowSubComments, - fetchPost, - commentCount, + marginLeft, } = this.props; return ( ( - - 0} - comment={item} - marginLeft={marginLeft} - commentNumber={commentNumber} - fetchPost={fetchPost} - commentCount={commentCount || item.children} - isShowSubComments={isShowSubComments} - avatarSize={avatarSize} - currentAccountUsername={currentAccountUsername} - handleOnReplyPress={handleOnReplyPress} - handleOnEditPress={handleOnEditPress} - handleOnUserPress={handleOnUserPress} - isLoggedIn={isLoggedIn} - showComentsToggle={this._showComentsToggle} - /> - + renderItem={({ item }) => ( + 0} + isShowSubComments={isShowSubComments} + key={item.permlink} + marginLeft={marginLeft} + /> )} /> ); diff --git a/src/components/commentsDisplay/view/commentDisplayStyles.js b/src/components/commentsDisplay/view/commentDisplayStyles.js index e6ec61aef..2f43b72f5 100644 --- a/src/components/commentsDisplay/view/commentDisplayStyles.js +++ b/src/components/commentsDisplay/view/commentDisplayStyles.js @@ -3,6 +3,5 @@ import EStyleSheet from 'react-native-extended-stylesheet'; export default EStyleSheet.create({ commentWrapper: { padding: 16, - paddingBottom: 50, }, }); diff --git a/src/components/commentsDisplay/view/commentsDisplayView.js b/src/components/commentsDisplay/view/commentsDisplayView.js index d4a14f6d2..9472fb922 100644 --- a/src/components/commentsDisplay/view/commentsDisplayView.js +++ b/src/components/commentsDisplay/view/commentsDisplayView.js @@ -1,9 +1,11 @@ import React, { PureComponent, Fragment } from 'react'; import { View } from 'react-native'; +import { injectIntl } from 'react-intl'; // Components import { FilterBar } from '../../filterBar'; import { Comments } from '../../comments'; +import COMMENT_FILTER from '../../../constants/options/comment'; // Styles import styles from './commentDisplayStyles'; @@ -16,31 +18,39 @@ class CommentsDisplayView extends PureComponent { constructor(props) { super(props); - this.state = {}; + this.state = { + selectedFilter: null, + }; } // Component Life Cycles // Component Functions - _handleOnDropdownSelect = () => {}; + _handleOnDropdownSelect = (index, option) => { + this.setState({ selectedFilter: option }); + }; render() { const { - author, permlink, commentCount, fetchPost, + author, commentCount, fetchPost, intl, permlink, } = this.props; - // TODO: implement comments filtering + const { selectedFilter } = this.state; + return ( {commentCount > 0 && ( intl.formatMessage({ id: `comment_filter.${item}` }).toUpperCase())} + defaultText={intl + .formatMessage({ id: `comment_filter.${COMMENT_FILTER[0]}` }) + .toUpperCase()} onDropdownSelect={this._handleOnDropdownSelect} /> postHeight; + // const isPostEnd = scrollHeight > postHeight; const isGetComment = scrollHeight + 300 > postHeight; const formatedTime = post && getTimeFromNow(post.created); @@ -140,7 +140,7 @@ class PostDisplayView extends PureComponent { size={16} /> - + Posted by diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index f43fe0972..88bf7f12e 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -199,5 +199,11 @@ "deep_link": { "no_existing_user": "No existing user", "no_existing_post": "No existing post" + }, + "comment_filter": { + "trending": "trending", + "reputation": "reputation", + "votes": "votes", + "age": "age" } } diff --git a/src/constants/options/comment.js b/src/constants/options/comment.js new file mode 100644 index 000000000..df630e8b3 --- /dev/null +++ b/src/constants/options/comment.js @@ -0,0 +1 @@ +export default ['trending', 'reputation', 'votes', 'age']; diff --git a/src/utils/authorReputation.js b/src/utils/authorReputation.js new file mode 100644 index 000000000..41e9093b4 --- /dev/null +++ b/src/utils/authorReputation.js @@ -0,0 +1,24 @@ +export default (input) => { + if (input === 0) { + return 25; + } + + if (!input) { + return input; + } + + let neg = false; + + if (input < 0) neg = true; + + let reputationLevel = Math.log10(Math.abs(input)); + reputationLevel = Math.max(reputationLevel - 9, 0); + + if (reputationLevel < 0) reputationLevel = 0; + + if (neg) reputationLevel *= -1; + + reputationLevel = reputationLevel * 9 + 25; + + return Math.floor(reputationLevel); +};