diff --git a/app/gabsocial/components/more_follows.js b/app/gabsocial/components/more_follows.js index 86bc4ee45..3e6f6ec83 100644 --- a/app/gabsocial/components/more_follows.js +++ b/app/gabsocial/components/more_follows.js @@ -1,93 +1,57 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; -export default class MoreFollows extends React.PureComponent { +const messages = defineMessages({ + following_singular: { + id: 'morefollows.following_label_singular', + defaultMessage: '…and {count} more follow on a remote site.', + }, + following_plural: { + id: 'morefollows.following_label_plural', + defaultMessage: '…and {count} more follows on remote sites.', + }, + followers_singular: { + id: 'morefollows.followers_label_singular', + defaultMessage: '…and {count} more follower on a remote site.', + }, + followers_plural: { + id: 'morefollows.followers_label_plural', + defaultMessage: '…and {count} more followers on remote sites.', + }, +}); + + +export default @injectIntl +class MoreFollows extends React.PureComponent { static propTypes = { visible: PropTypes.bool, - moreFollows: PropTypes.number, - isFollowing: PropTypes.bool, + count: PropTypes.number, + type: PropTypes.string, + intl: PropTypes.object.isRequired, } static defaultProps = { visible: true, } - render() { - const { moreFollows, isFollowing, visible } = this.props; + getMessage = () => { + const { type, count, intl } = this.props; + const messageKey = `${type}_${count > 1 ? 'plural' : 'singular'}`; + return intl.formatMessage(messages[messageKey], { count }); + } - if (isFollowing === true && moreFollows === 1) { - return ( -
-
-
- {moreFollows}, - }} - /> -
+ render() { + return ( +
+
+
+ {this.getMessage()}
- ); - } else if (isFollowing && moreFollows > 1) { - return ( -
-
-
- {moreFollows}, - }} - /> -
-
-
- ); - } else if (!isFollowing && moreFollows === 1) { - return ( -
-
-
- {moreFollows}, - }} - /> -
-
-
- ); - } else if (!isFollowing && moreFollows > 1) { - return ( -
-
-
- {moreFollows}, - }} - /> -
-
-
- ); - } else { - return (null); - } +
+ ); } } diff --git a/app/gabsocial/components/scrollable_list.js b/app/gabsocial/components/scrollable_list.js index ae796f16e..617cae7b4 100644 --- a/app/gabsocial/components/scrollable_list.js +++ b/app/gabsocial/components/scrollable_list.js @@ -22,14 +22,13 @@ export default class ScrollableList extends PureComponent { isLoading: PropTypes.bool, showLoading: PropTypes.bool, hasMore: PropTypes.bool, - hasMoreFollows: PropTypes.number, + diffCount: PropTypes.number, prepend: PropTypes.node, alwaysPrepend: PropTypes.bool, emptyMessage: PropTypes.node, children: PropTypes.node, onScrollToTop: PropTypes.func, onScroll: PropTypes.func, - isFollowing: PropTypes.bool, }; state = { @@ -207,14 +206,22 @@ export default class ScrollableList extends PureComponent { this.props.onLoadMore(); } - render() { - const { children, scrollKey, showLoading, isLoading, hasMore, hasMoreFollows, isFollowing, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props; - const childrenCount = React.Children.count(children); + getMoreFollows = () => { + const { scrollKey, isLoading, diffCount } = this.props; + const isMoreFollows = ['followers', 'following'].some(k => k === scrollKey); + if (!(diffCount && isMoreFollows)) return null; + return ( + + ); + } + + render() { + const { children, scrollKey, showLoading, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props; + const childrenCount = React.Children.count(children); const trackScroll = true; //placeholder const loadMore = (hasMore && onLoadMore) ? : null; - const moreFollows = (hasMoreFollows !== undefined && isFollowing !== undefined) ? : null; let scrollableArea = null; if (showLoading) { @@ -252,7 +259,7 @@ export default class ScrollableList extends PureComponent { })} ))} - {moreFollows} + {this.getMoreFollows()} {loadMore}
diff --git a/app/gabsocial/features/followers/index.js b/app/gabsocial/features/followers/index.js index 7fe3106c4..d50676453 100644 --- a/app/gabsocial/features/followers/index.js +++ b/app/gabsocial/features/followers/index.js @@ -16,7 +16,7 @@ import AccountContainer from '../../containers/account_container'; import Column from '../ui/components/column'; import ScrollableList from '../../components/scrollable_list'; import MissingIndicator from 'gabsocial/components/missing_indicator'; -import { getHasMoreFollowsCount } from 'gabsocial/utils/accounts'; +import { getFollowDifference } from 'gabsocial/utils/accounts'; const mapStateToProps = (state, { params: { username }, withReplies = false }) => { const me = state.get('me'); @@ -31,7 +31,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) = accountId = account ? account.getIn(['id'], null) : -1; } - const hasMoreFollows = getHasMoreFollowsCount(state, accountId, false); + const diffCount = getFollowDifference(state, accountId, 'followers'); const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false); const isLocked = state.getIn(['accounts', accountId, 'locked'], false); const isFollowing = state.getIn(['relationships', accountId, 'following'], false); @@ -43,7 +43,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) = isAccount: !!state.getIn(['accounts', accountId]), accountIds: state.getIn(['user_lists', 'followers', accountId, 'items']), hasMore: !!state.getIn(['user_lists', 'followers', accountId, 'next']), - hasMoreFollows, + diffCount, }; }; @@ -55,7 +55,7 @@ class Followers extends ImmutablePureComponent { dispatch: PropTypes.func.isRequired, accountIds: ImmutablePropTypes.list, hasMore: PropTypes.bool, - hasMoreFollows: PropTypes.number, + diffCount: PropTypes.number, isAccount: PropTypes.bool, unavailable: PropTypes.bool, }; @@ -85,8 +85,7 @@ class Followers extends ImmutablePureComponent { }, 300, { leading: true }); render() { - const { accountIds, hasMore, hasMoreFollows, isAccount, accountId, unavailable } = this.props; - const isFollowing = false; + const { accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props; if (!isAccount && accountId !== -1) { return ( @@ -119,8 +118,7 @@ class Followers extends ImmutablePureComponent { } > diff --git a/app/gabsocial/features/following/index.js b/app/gabsocial/features/following/index.js index 2952d7995..faeb3708a 100644 --- a/app/gabsocial/features/following/index.js +++ b/app/gabsocial/features/following/index.js @@ -16,7 +16,7 @@ import AccountContainer from '../../containers/account_container'; import Column from '../ui/components/column'; import ScrollableList from '../../components/scrollable_list'; import MissingIndicator from 'gabsocial/components/missing_indicator'; -import { getHasMoreFollowsCount } from 'gabsocial/utils/accounts'; +import { getFollowDifference } from 'gabsocial/utils/accounts'; const mapStateToProps = (state, { params: { username }, withReplies = false }) => { const me = state.get('me'); @@ -31,7 +31,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) = accountId = account ? account.getIn(['id'], null) : -1; } - const hasMoreFollows = getHasMoreFollowsCount(state, accountId, true); + const diffCount = getFollowDifference(state, accountId, 'following'); const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false); const isLocked = state.getIn(['accounts', accountId, 'locked'], false); const isFollowing = state.getIn(['relationships', accountId, 'following'], false); @@ -43,7 +43,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) = isAccount: !!state.getIn(['accounts', accountId]), accountIds: state.getIn(['user_lists', 'following', accountId, 'items']), hasMore: !!state.getIn(['user_lists', 'following', accountId, 'next']), - hasMoreFollows, + diffCount, }; }; @@ -57,7 +57,7 @@ class Following extends ImmutablePureComponent { hasMore: PropTypes.bool, isAccount: PropTypes.bool, unavailable: PropTypes.bool, - hasMoreFollows: PropTypes.number, + diffCount: PropTypes.number, }; componentWillMount() { @@ -85,8 +85,7 @@ class Following extends ImmutablePureComponent { }, 300, { leading: true }); render() { - const { accountIds, hasMore, isAccount, hasMoreFollows, accountId, unavailable } = this.props; - const isFollowing = true; + const { accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props; if (!isAccount && accountId !== -1) { return ( @@ -119,8 +118,7 @@ class Following extends ImmutablePureComponent { } > diff --git a/app/gabsocial/utils/accounts.js b/app/gabsocial/utils/accounts.js index 2558d4357..4b9a4c369 100644 --- a/app/gabsocial/utils/accounts.js +++ b/app/gabsocial/utils/accounts.js @@ -30,17 +30,8 @@ export const isModerator = account => ( account.getIn(['pleroma', 'is_moderator']) === true ); -export const getHasMoreFollowsCount = (state, accountId, isFollowing) => { - let moreFollowsCount = undefined; //variable text in defaultMessage with null value preventing rendering - let emptyList = ImmutableList(); - if (isFollowing) { - let followingList = ImmutableList(); - followingList = state.getIn(['user_lists', 'following', accountId, 'items'], emptyList); - moreFollowsCount = parseInt(state.getIn(['accounts_counters', accountId, 'following_count']), 0) - followingList.size; - } else { - let followersList = ImmutableList(); - followersList = state.getIn(['user_lists', 'followers', accountId, 'items'], emptyList); - moreFollowsCount = parseInt(state.getIn(['accounts_counters', accountId, 'followers_count']), 0) - followersList.size; - } - return moreFollowsCount; +export const getFollowDifference = (state, accountId, type) => { + const listSize = state.getIn(['user_lists', type, accountId, 'items'], ImmutableList()).size; + const counter = state.getIn(['accounts_counters', accountId, `${type}_count`], 0); + return counter - listSize; };