From b0664a5e6cee9be602098fb9a2f98a9e61b2ab9b Mon Sep 17 00:00:00 2001 From: Akihiko Odaki Date: Tue, 6 Mar 2018 03:31:40 +0900 Subject: [PATCH] Replace onScrollToBottom with onLoadMore (#6615) onScrollToBottom was a function to run instead of onScrollToTop and onScroll when scrolling to the bottom. The behavior to prevent onScrollToTop was inconvenient because the viewport can be at the bottom and at the top at the same time if the viewport is larger than the container. onScrollToBottom was also called when the button to load more is clicked on contray to the name suggests, which led notifications and status_list_container components to mark the scrolled location is not at the top mistakenly. onLoadMore is a replacement for onScrollToBottom. It will be called independently from onScrollToTop and onScroll. --- .../mastodon/components/scrollable_list.js | 12 +++++++----- app/javascript/mastodon/components/status_list.js | 2 +- .../mastodon/features/account_timeline/index.js | 4 ++-- .../mastodon/features/favourited_statuses/index.js | 4 ++-- .../mastodon/features/notifications/index.js | 7 +++---- .../features/ui/containers/status_list_container.js | 5 +---- 6 files changed, 16 insertions(+), 18 deletions(-) diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index 71228ca6c..ac3e404df 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -17,7 +17,7 @@ export default class ScrollableList extends PureComponent { static propTypes = { scrollKey: PropTypes.string.isRequired, - onScrollToBottom: PropTypes.func, + onLoadMore: PropTypes.func.isRequired, onScrollToTop: PropTypes.func, onScroll: PropTypes.func, trackScroll: PropTypes.bool, @@ -45,9 +45,11 @@ export default class ScrollableList extends PureComponent { const offset = scrollHeight - scrollTop - clientHeight; this._oldScrollPosition = scrollHeight - scrollTop; - if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) { - this.props.onScrollToBottom(); - } else if (scrollTop < 100 && this.props.onScrollToTop) { + if (400 > offset && this.props.onLoadMore && !this.props.isLoading) { + this.props.onLoadMore(); + } + + if (scrollTop < 100 && this.props.onScrollToTop) { this.props.onScrollToTop(); } else if (this.props.onScroll) { this.props.onScroll(); @@ -138,7 +140,7 @@ export default class ScrollableList extends PureComponent { handleLoadMore = (e) => { e.preventDefault(); - this.props.onScrollToBottom(); + this.props.onLoadMore(); } _recentlyMoved () { diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index eb65838ce..3bebf702c 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -12,7 +12,7 @@ export default class StatusList extends ImmutablePureComponent { scrollKey: PropTypes.string.isRequired, statusIds: ImmutablePropTypes.list.isRequired, featuredStatusIds: ImmutablePropTypes.list, - onScrollToBottom: PropTypes.func, + onLoadMore: PropTypes.func, onScrollToTop: PropTypes.func, onScroll: PropTypes.func, trackScroll: PropTypes.bool, diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js index 95ae5fd06..f5f2475ea 100644 --- a/app/javascript/mastodon/features/account_timeline/index.js +++ b/app/javascript/mastodon/features/account_timeline/index.js @@ -52,7 +52,7 @@ export default class AccountTimeline extends ImmutablePureComponent { } } - handleScrollToBottom = () => { + handleLoadMore = () => { if (!this.props.isLoading && this.props.hasMore) { this.props.dispatch(expandAccountTimeline(this.props.params.accountId, this.props.withReplies)); } @@ -80,7 +80,7 @@ export default class AccountTimeline extends ImmutablePureComponent { featuredStatusIds={featuredStatusIds} isLoading={isLoading} hasMore={hasMore} - onScrollToBottom={this.handleScrollToBottom} + onLoadMore={this.handleLoadMore} /> ); diff --git a/app/javascript/mastodon/features/favourited_statuses/index.js b/app/javascript/mastodon/features/favourited_statuses/index.js index 67b107bc8..6f1c863b4 100644 --- a/app/javascript/mastodon/features/favourited_statuses/index.js +++ b/app/javascript/mastodon/features/favourited_statuses/index.js @@ -62,7 +62,7 @@ export default class Favourites extends ImmutablePureComponent { this.column = c; } - handleScrollToBottom = debounce(() => { + handleLoadMore = debounce(() => { this.props.dispatch(expandFavouritedStatuses()); }, 300, { leading: true }) @@ -89,7 +89,7 @@ export default class Favourites extends ImmutablePureComponent { scrollKey={`favourited_statuses-${columnId}`} hasMore={hasMore} isLoading={isLoading} - onScrollToBottom={this.handleScrollToBottom} + onLoadMore={this.handleLoadMore} /> ); diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index 77abfae25..cb9d025ea 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -51,14 +51,13 @@ export default class Notifications extends React.PureComponent { }; componentWillUnmount () { - this.handleScrollToBottom.cancel(); + this.handleLoadMore.cancel(); this.handleScrollToTop.cancel(); this.handleScroll.cancel(); this.props.dispatch(scrollTopNotifications(false)); } - handleScrollToBottom = debounce(() => { - this.props.dispatch(scrollTopNotifications(false)); + handleLoadMore = debounce(() => { this.props.dispatch(expandNotifications()); }, 300, { leading: true }); @@ -143,7 +142,7 @@ export default class Notifications extends React.PureComponent { isLoading={isLoading} hasMore={hasMore} emptyMessage={emptyMessage} - onScrollToBottom={this.handleScrollToBottom} + onLoadMore={this.handleLoadMore} onScrollToTop={this.handleScrollToTop} onScroll={this.handleScroll} shouldUpdateScroll={shouldUpdateScroll} diff --git a/app/javascript/mastodon/features/ui/containers/status_list_container.js b/app/javascript/mastodon/features/ui/containers/status_list_container.js index 59b53d823..fc2867cf0 100644 --- a/app/javascript/mastodon/features/ui/containers/status_list_container.js +++ b/app/javascript/mastodon/features/ui/containers/status_list_container.js @@ -56,10 +56,7 @@ const makeMapStateToProps = () => { const mapDispatchToProps = (dispatch, { timelineId, loadMore }) => ({ - onScrollToBottom: debounce(() => { - dispatch(scrollTopTimeline(timelineId, false)); - loadMore(); - }, 300, { leading: true }), + onLoadMore: debounce(loadMore, 300, { leading: true }), onScrollToTop: debounce(() => { dispatch(scrollTopTimeline(timelineId, true));