MoreFollows refactor

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,
+    count: PropTypes.number,
-    isFollowing: PropTypes.bool,
+    type: PropTypes.string,
+    intl: PropTypes.object.isRequired,
   }
 
   static defaultProps = {
     visible: true,
   }
 
+  getMessage = () => {
+    const { type, count, intl } = this.props;
+    const messageKey = `${type}_${count > 1 ? 'plural' : 'singular'}`;
+    return intl.formatMessage(messages[messageKey], { count });
+  }
+
   render() {
-    const { moreFollows, isFollowing, visible } = this.props;
-
-    if (isFollowing === true && moreFollows === 1) {
     return (
       <div className='morefollows-indicator'>
         <div>
-            <div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
+          <div className='morefollows-indicator__label' style={{ visibility: this.props.visible ? 'visible' : 'hidden' }}>
-              <FormattedMessage
+            {this.getMessage()}
-                id='morefollows_indicator.follows_1_label'
-                tagName='strong'
-                defaultMessage='...and {moreFollows} more follow 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.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);
-    }
   }
 
 }

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() {
+  getMoreFollows = () => {
-    const { children, scrollKey, showLoading, isLoading, hasMore, hasMoreFollows, isFollowing, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
+    const { scrollKey, isLoading, diffCount } = this.props;
-    const childrenCount = React.Children.count(children);
+    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>

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 { accountIds, hasMore, diffCount, isAccount, accountId, unavailable } = this.props;
-    const isFollowing = false;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -119,8 +118,7 @@ class Followers extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}
-          hasMoreFollows={hasMoreFollows}
+          diffCount={diffCount}
-          isFollowing={isFollowing}
           onLoadMore={this.handleLoadMore}
           emptyMessage={<FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />}
         >

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 { accountIds, hasMore, isAccount, diffCount, accountId, unavailable } = this.props;
-    const isFollowing = true;
 
     if (!isAccount && accountId !== -1) {
       return (
@@ -119,8 +118,7 @@ class Following extends ImmutablePureComponent {
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}
-          hasMoreFollows={hasMoreFollows}
+          diffCount={diffCount}
-          isFollowing={isFollowing}
           onLoadMore={this.handleLoadMore}
           emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
         >

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) => {
+export const getFollowDifference = (state, accountId, type) => {
-  let moreFollowsCount = undefined; //variable text in defaultMessage with null value preventing rendering
+  const listSize = state.getIn(['user_lists', type, accountId, 'items'], ImmutableList()).size;
-  let emptyList = ImmutableList();
+  const counter = state.getIn(['accounts_counters', accountId, `${type}_count`], 0);
-  if (isFollowing) {
+  return counter - listSize;
-    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;
 };