b0664a5e6c
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.
90 lines
3.2 KiB
JavaScript
90 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import PropTypes from 'prop-types';
|
|
import { fetchAccount } from '../../actions/accounts';
|
|
import { refreshAccountTimeline, refreshAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
|
|
import StatusList from '../../components/status_list';
|
|
import LoadingIndicator from '../../components/loading_indicator';
|
|
import Column from '../ui/components/column';
|
|
import HeaderContainer from './containers/header_container';
|
|
import ColumnBackButton from '../../components/column_back_button';
|
|
import { List as ImmutableList } from 'immutable';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
const mapStateToProps = (state, { params: { accountId }, withReplies = false }) => {
|
|
const path = withReplies ? `${accountId}:with_replies` : accountId;
|
|
|
|
return {
|
|
statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableList()),
|
|
featuredStatusIds: state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], ImmutableList()),
|
|
isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
|
|
hasMore: !!state.getIn(['timelines', `account:${path}`, 'next']),
|
|
};
|
|
};
|
|
|
|
@connect(mapStateToProps)
|
|
export default class AccountTimeline extends ImmutablePureComponent {
|
|
|
|
static propTypes = {
|
|
params: PropTypes.object.isRequired,
|
|
dispatch: PropTypes.func.isRequired,
|
|
statusIds: ImmutablePropTypes.list,
|
|
featuredStatusIds: ImmutablePropTypes.list,
|
|
isLoading: PropTypes.bool,
|
|
hasMore: PropTypes.bool,
|
|
withReplies: PropTypes.bool,
|
|
};
|
|
|
|
componentWillMount () {
|
|
const { params: { accountId }, withReplies } = this.props;
|
|
|
|
this.props.dispatch(fetchAccount(accountId));
|
|
this.props.dispatch(refreshAccountFeaturedTimeline(accountId));
|
|
this.props.dispatch(refreshAccountTimeline(accountId, withReplies));
|
|
}
|
|
|
|
componentWillReceiveProps (nextProps) {
|
|
if ((nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) || nextProps.withReplies !== this.props.withReplies) {
|
|
this.props.dispatch(fetchAccount(nextProps.params.accountId));
|
|
this.props.dispatch(refreshAccountFeaturedTimeline(nextProps.params.accountId));
|
|
this.props.dispatch(refreshAccountTimeline(nextProps.params.accountId, nextProps.params.withReplies));
|
|
}
|
|
}
|
|
|
|
handleLoadMore = () => {
|
|
if (!this.props.isLoading && this.props.hasMore) {
|
|
this.props.dispatch(expandAccountTimeline(this.props.params.accountId, this.props.withReplies));
|
|
}
|
|
}
|
|
|
|
render () {
|
|
const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props;
|
|
|
|
if (!statusIds && isLoading) {
|
|
return (
|
|
<Column>
|
|
<LoadingIndicator />
|
|
</Column>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Column>
|
|
<ColumnBackButton />
|
|
|
|
<StatusList
|
|
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
|
|
scrollKey='account_timeline'
|
|
statusIds={statusIds}
|
|
featuredStatusIds={featuredStatusIds}
|
|
isLoading={isLoading}
|
|
hasMore={hasMore}
|
|
onLoadMore={this.handleLoadMore}
|
|
/>
|
|
</Column>
|
|
);
|
|
}
|
|
|
|
}
|