tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Infinite scroll for followers/following lists

Browse Source
This commit is contained in:
Eugen Rochko
2016-11-13 20:42:54 +01:00
parent 49b7896953
commit dbfe1e4be6
9 changed files with 219 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/components/features/followers/index.jsx
View File

@ -1,13 +1,16 @@
import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator';
import { fetchFollowers } from '../../actions/accounts';
import { ScrollContainer } from 'react-router-scroll';
import AccountContainer from './containers/account_container';
import { connect } from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import LoadingIndicator from '../../components/loading_indicator';
import {
fetchFollowers,
expandFollowers
} from '../../actions/accounts';
import { ScrollContainer } from 'react-router-scroll';
import AccountContainer from './containers/account_container';
const mapStateToProps = (state, props) => ({
accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId)])
accountIds: state.getIn(['user_lists', 'followers', Number(props.params.accountId), 'items'])
});
const Followers = React.createClass({
@ -30,6 +33,14 @@ const Followers = React.createClass({
}
},
handleScroll (e) {
const { scrollTop, scrollHeight, clientHeight } = e.target;
if (scrollTop === scrollHeight - clientHeight) {
this.props.dispatch(expandFollowers(Number(this.props.params.accountId)));
}
},
render () {
const { accountIds } = this.props;
@ -39,8 +50,10 @@ const Followers = React.createClass({
return (
<ScrollContainer scrollKey='followers'>
<div className='scrollable'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
<div className='scrollable' onScroll={this.handleScroll}>
<div>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div>
</div>
</ScrollContainer>
);