Add messages informing that collections are empty (fixes #4115) (#8418)

* Add messages informing that collections are empty

Adds empty messages to blocked users, domain blocks, favourited statuses, users
that favourited toot, follow requests, followers of given user, user's being
followed by given user, lists, muted users, toots' boosts.

Switched from using ScrollContainer to ScrollableList and/or added empty
message's text.

Fixes #4115

* Update localization files with strings for #4115

* Fix whitespace issues pointed out by codeclimate

1 files changed, 19 insertions, 27 deletions

diff --git a/app/javascript/mastodon/features/followers/index.js b/app/javascript/mastodon/features/followers/index.js
index 5bb8fdd6a..5eb05367e 100644
--- a/app/javascript/mastodon/features/followers/index.js
+++ b/app/javascript/mastodon/features/followers/index.js
@@ -3,18 +3,19 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { debounce } from 'lodash';
 import LoadingIndicator from '../../components/loading_indicator';
 import {
   fetchAccount,
   fetchFollowers,
   expandFollowers,
 } from '../../actions/accounts';
-import { ScrollContainer } from 'react-router-scroll-4';
+import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import HeaderContainer from '../account_timeline/containers/header_container';
-import LoadMore from '../../components/load_more';
 import ColumnBackButton from '../../components/column_back_button';
+import ScrollableList from '../../components/scrollable_list';
 
 const mapStateToProps = (state, props) => ({
   accountIds: state.getIn(['user_lists', 'followers', props.params.accountId, 'items']),
@@ -44,24 +45,13 @@ export default class Followers extends ImmutablePureComponent {
     }
   }
 
-  handleScroll = (e) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.target;
-
-    if (scrollTop === scrollHeight - clientHeight && this.props.hasMore) {
-      this.props.dispatch(expandFollowers(this.props.params.accountId));
-    }
-  }
-
-  handleLoadMore = (e) => {
-    e.preventDefault();
+  handleLoadMore = debounce(() => {
     this.props.dispatch(expandFollowers(this.props.params.accountId));
-  }
+  }, 300, { leading: true });
 
   render () {
     const { shouldUpdateScroll, accountIds, hasMore } = this.props;
 
-    let loadMore = null;
-
     if (!accountIds) {
       return (
         <Column>
@@ -70,23 +60,25 @@ export default class Followers extends ImmutablePureComponent {
       );
     }
 
-    if (hasMore) {
-      loadMore = <LoadMore onClick={this.handleLoadMore} />;
-    }
+    const emptyMessage = <FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />;
 
     return (
       <Column>
         <ColumnBackButton />
 
-        <ScrollContainer scrollKey='followers' shouldUpdateScroll={shouldUpdateScroll}>
-          <div className='scrollable' onScroll={this.handleScroll}>
-            <div className='followers'>
-              <HeaderContainer accountId={this.props.params.accountId} hideTabs />
-              {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
-              {loadMore}
-            </div>
-          </div>
-        </ScrollContainer>
+        <HeaderContainer accountId={this.props.params.accountId} hideTabs />
+
+        <ScrollableList
+          scrollKey='followers'
+          hasMore={hasMore}
+          onLoadMore={this.handleLoadMore}
+          shouldUpdateScroll={shouldUpdateScroll}
+          emptyMessage={emptyMessage}
+        >
+          {accountIds.map(id =>
+            <AccountContainer key={id} id={id} withNote={false} />
+          )}
+        </ScrollableList>
       </Column>
     );
   }