loadmore.jsx

import React, { Component } from 'react';
import Post from './Post';
import { connect } from 'react-redux';
import InfiniteScroll from 'react-infinite-scroller';
import CircularProgress from 'material-ui/CircularProgress';

import config from '../../config/config';

import actions from '../../redux/actions';

import {
  Grid,
  PanelContainer
} from '@sketchpixy/rubix';

@connect((state) => state)
export default class TimelineData extends Component {

  constructor (props) {
    super(props);

    this.state = {
      items: {},
      hasMoreItems: true,
      size: 0
    };
  }

  componentDidMount () {
    var $body = $('.timeline-infinite-scroll');
    $body.bind('scroll', function () {
      if ($body.scrollLeft() !== 0) {
        $body.scrollLeft(0);
      }
    });
  }

  componentWillUnmount () {
    const { dispatch } = this.props;
    dispatch(actions.setHasMore(true));
  }

  componentWillReceiveProps (nextProps) {
    console.log(nextProps);
  }

  loadItems (page) {
    const { selectedFilters } = this.props.timeline;
    let { items, hasMoreItems, size } = this.state;
    const payload = {
      keyword: selectedFilters.keywords,
      start: true,
      source: selectedFilters.sources,
      size,
      threat_type: 'threat',
      from: 0,
      date_start: selectedFilters.dateRange.start,
      date_end: selectedFilters.dateRange.end
    };

    let myHeaders = new Headers();
    myHeaders.append('Content-Type', 'application/json;charset=UTF-8');
    return fetch(`/api/get_threat_data`, {
      method: 'post',
      headers: myHeaders,
      credentials: 'include',
      body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(json => {
      if (json.data.success) {
        if (items.data.data !== json.data.data) {
          size = size + 10;
          this.setState({ items: json, size });
        } else {
          this.setState({ hasMoreItems: false });
        }
      }
    });
  }

  render () {
    const { range } = this.props.timeline.selectedFilters.dateRange;
    const { hasMore, posts } = this.props.timeline.posts;
    let { items  } = this.state;
    // items = posts;
    const { categories } = this.props.timeline.selectedFilters;
    const postsToRender = (Object.keys(posts).length !== 0)
    ? (items.data && items.data.success && (items.data.data.length >= 1)) ? (
        range.map((val, index) => (
          (index % 2 === 0) ? (
            <Post date={val} color='blue' key={index} posts={items} categories={categories} />
          ) : (
            <Post date={val} color='green' key={index} posts={items} categories={categories} />
          )
        ))
    ) : (
      <h3>No posts found! Please try again!</h3>
    ) : (
      <h3>No posts found! Please try again!</h3>
    );

    return (
      <Grid>
        <div className='timeline-data'>
          <PanelContainer controls={false}>
            <div className='alternate'>
              <div className='timeline-infinite-scroll'>
                <InfiniteScroll
                  id='check-scroller'
                  pageStart={0}
                  loadMore={this.loadItems.bind(this)}
                  hasMore={this.state.hasMoreItems}
                  useWindow={false}
                  loader={<div className='w-100 h-100 loader flex justify-center items-center'><CircularProgress /></div>}>
                  {postsToRender}
                </InfiniteScroll>
              </div>
            </div>
          </PanelContainer>
        </div>
      </Grid>
    );
  }
}