throttle.jsx

// @flow
import * as React from 'react';
import { Timeline, Sidebar, EmptyStates } from 'pipestyle';
import { t } from 'utils/I18n';
import ActivityItem from './ActivityItem';
import FakeActivities from './FakeActivities';

export default class PipeActivities extends React.Component {
  componentDidMount() {
    this.props.subscribeToMore();
  }

  throttle = (event) => throttle(() => this.onScroll(event), 100)

  onScroll = e => {
    const { loading, hasMore, fetchMore } = this.props;
    if (loading || !hasMore) return;

    const node = e.target;
    const isScrollEnd = node.offsetHeight + node.scrollTop >= node.scrollHeight;

    if (isScrollEnd) {
      fetchMore();
    }
  };

  render() {
    const { onClose, activities, loading } = this.props;

    return (
      <Sidebar
        title={t('activities.pipe_timeline._title')}
        isActive={true}
        onClickClose={onClose}
        onScroll={this.throttle}
      >
        <Timeline className="pp-no-padding">
          // [...]
        </Timeline>
      </Sidebar>
    );
  }
}