MoreFollows refactor
This commit is contained in:
Alex Gleason
parent
387c26939a
commit
2319d9f080
5 changed files with 69 additions and 111 deletions
|
|
@ -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 (
|
||||
<div className='morefollows-indicator'>
|
||||
<div>
|
||||
<div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
|
||||
<FormattedMessage
|
||||
id='morefollows_indicator.follows_1_label'
|
||||
tagName='strong'
|
||||
defaultMessage='...and {moreFollows} more follow on a remote site.'
|
||||
values={{
|
||||
moreFollows: <span>{moreFollows}</span>,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
render() {
|
||||
return (
|
||||
<div className='morefollows-indicator'>
|
||||
<div>
|
||||
<div className='morefollows-indicator__label' style={{ visibility: this.props.visible ? 'visible' : 'hidden' }}>
|
||||
{this.getMessage()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (isFollowing && moreFollows > 1) {
|
||||
return (
|
||||
<div className='morefollows-indicator'>
|
||||
<div>
|
||||
<div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
|
||||
<FormattedMessage
|
||||
id='morefollows_indicator.follows_2_label'
|
||||
tagName='strong'
|
||||
defaultMessage='...and {moreFollows} more follows on remote sites.'
|
||||
values={{
|
||||
moreFollows: <span>{moreFollows}</span>,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (!isFollowing && moreFollows === 1) {
|
||||
return (
|
||||
<div className='morefollows-indicator'>
|
||||
<div>
|
||||
<div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
|
||||
<FormattedMessage
|
||||
id='morefollows_indicator.followers_1_label'
|
||||
tagName='strong'
|
||||
defaultMessage='...and {moreFollows} more follower on a remote site.'
|
||||
values={{
|
||||
moreFollows: <span>{moreFollows}</span>,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (!isFollowing && moreFollows > 1) {
|
||||
return (
|
||||
<div className='morefollows-indicator'>
|
||||
<div>
|
||||
<div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
|
||||
<FormattedMessage
|
||||
id='morefollows_indicator.followers_2_label'
|
||||
tagName='strong'
|
||||
defaultMessage='...and {moreFollows} more followers on remote sites.'
|
||||
values={{
|
||||
moreFollows: <span>{moreFollows}</span>,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (null);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<MoreFollows visible={!isLoading} count={diffCount} type={scrollKey} />
|
||||
);
|
||||
}
|
||||
|
||||
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) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
|
||||
const moreFollows = (hasMoreFollows !== undefined && isFollowing !== undefined) ? <MoreFollows visible={!isLoading} moreFollows={hasMoreFollows} isFollowing={isFollowing} /> : null;
|
||||
let scrollableArea = null;
|
||||
|
||||
if (showLoading) {
|
||||
|
|
@ -252,7 +259,7 @@ export default class ScrollableList extends PureComponent {
|
|||
})}
|
||||
</IntersectionObserverArticleContainer>
|
||||
))}
|
||||
{moreFollows}
|
||||
{this.getMoreFollows()}
|
||||
{loadMore}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<ScrollableList
|
||||
scrollKey='followers'
|
||||
hasMore={hasMore}
|
||||
hasMoreFollows={hasMoreFollows}
|
||||
isFollowing={isFollowing}
|
||||
diffCount={diffCount}
|
||||
onLoadMore={this.handleLoadMore}
|
||||
emptyMessage={<FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<ScrollableList
|
||||
scrollKey='following'
|
||||
hasMore={hasMore}
|
||||
hasMoreFollows={hasMoreFollows}
|
||||
isFollowing={isFollowing}
|
||||
diffCount={diffCount}
|
||||
onLoadMore={this.handleLoadMore}
|
||||
emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue