You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
1.9 KiB

  1. import { connect } from 'react-redux';
  2. import PureRenderMixin from 'react-addons-pure-render-mixin';
  3. import ImmutablePropTypes from 'react-immutable-proptypes';
  4. import LoadingIndicator from '../../components/loading_indicator';
  5. import { ScrollContainer } from 'react-router-scroll';
  6. import Column from '../ui/components/column';
  7. import AccountAuthorizeContainer from './containers/account_authorize_container';
  8. import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
  9. import { defineMessages, injectIntl } from 'react-intl';
  10. const messages = defineMessages({
  11. heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }
  12. });
  13. const mapStateToProps = state => ({
  14. accountIds: state.getIn(['user_lists', 'follow_requests', 'items'])
  15. });
  16. const FollowRequests = React.createClass({
  17. propTypes: {
  18. params: React.PropTypes.object.isRequired,
  19. dispatch: React.PropTypes.func.isRequired,
  20. accountIds: ImmutablePropTypes.list,
  21. intl: React.PropTypes.object.isRequired
  22. },
  23. mixins: [PureRenderMixin],
  24. componentWillMount () {
  25. this.props.dispatch(fetchFollowRequests());
  26. },
  27. handleScroll (e) {
  28. const { scrollTop, scrollHeight, clientHeight } = e.target;
  29. if (scrollTop === scrollHeight - clientHeight) {
  30. this.props.dispatch(expandFollowRequests());
  31. }
  32. },
  33. render () {
  34. const { intl, accountIds } = this.props;
  35. if (!accountIds) {
  36. return (
  37. <Column>
  38. <LoadingIndicator />
  39. </Column>
  40. );
  41. }
  42. return (
  43. <Column icon='users' heading={intl.formatMessage(messages.heading)}>
  44. <ScrollContainer scrollKey='follow_requests'>
  45. <div className='scrollable' onScroll={this.handleScroll}>
  46. {accountIds.map(id =>
  47. <AccountAuthorizeContainer key={id} id={id} />
  48. )}
  49. </div>
  50. </ScrollContainer>
  51. </Column>
  52. );
  53. }
  54. });
  55. export default connect(mapStateToProps)(injectIntl(FollowRequests));