Loading on demand ... infinite scroll

I realize loading on demand and infinite scrolling is not part of this components job and that this issue has been raised several times before. The author wants the component to be agnostic of how to load data on demand via an infinite scroll - and that is perfectly reasonable.

The author kindly showed some example code in issue https://github.com/orgsync/react-list/issues/24 that shows a parent FetchList component that renders a child react-list component. The part I’m struggling with is how to trigger a further load. The author mentions setting the length property to the loaded items length + 1. Which is all fine and appears to work for an initial load of data. But how can I subsequently set that - I can’t call setState from the parent FetchList itemRender method because that’s called from render.

If anyone could help point me in the right direction here I would be deeply grateful. I’ve been struggling with this for some time now.

[simax]

I’ve simulated the AJAX call by just using a setTimeout and I now get infinite scrolling!.

This is the completed code of my prototype in case it helps others.

var React = require('react'),
  _ = require('underscore'),
  ReactList =require('react-list');

const ItemType1 = React.createClass({
  render() {
    return (<div style={{background: 'Red', height: this.props.itemHeight}}>
      <div key={this.props.key} style={{paddingTop: 50, paddingLeft: 200, color: 'White', fontSize: 40}}>
        {this.props.name}
      </div>
    </div>);
  }
});

const ItemType2 = React.createClass({
  render() {
    return (<div style={{background: 'Green', height: this.props.itemHeight}}>
      <div key={this.props.key} style={{paddingTop: 50, paddingLeft: 200, color: 'White', fontSize: 40}}>
        {this.props.name}
      </div>
    </div>);
  }
});


const UserNewsFeeds = React.createClass({

  pending: [],
  isLoading: false,

  getDataItems(from, dataItems) {
    let numberOfRows = from + 2;
    let min = 0.2;
    let max = 0.5;
    for (let i = from; i < numberOfRows; i++) {
      let h = Math.floor(1000 * Math.random() * (max - min + 1) + min);
      let name = `Item-${i.toString()}`;
      let compToRender = (i % 2) == 0
        ? <ItemType1 key={i} itemHeight={h} name={name}/>
        : <ItemType2 key={i} itemHeight={h} name={name}/>;

      dataItems.push(compToRender);
      }
  },

  myDataFetcher(from, cb) {
      let dataItems = [];
      this.getDataItems(from, dataItems);
      return cb(dataItems);
  },

  getInitialState() {
    return {
      items: []
    };
  },

  getItemsLength() {
    return this.state.items == undefined ? 1 : this.state.items.length;
  },

  request(index) {
    this.pending.push(index);
    this.fetch();
  },

  fetch() {
    if (this.isLoading || !this.pending.length) return;
    const from = _.first(this.pending);
    this.isLoading = true;
    return this.myDataFetcher(from, _.partial(this.handleFetch, from));
  },

  handleFetch(from, results) {
    this.isLoading = false;
    this.pending = _.without(this.pending, from);

    setTimeout(() => {
      let temp_items = _.clone(this.state.items);
      results.forEach((item) => {
        temp_items.push(item)
      });
      this.setState({items: temp_items});
    }, 1000);

    this.fetch();
  },

  renderItem(index, key) {
    if(!this.state.items[index]) this.request(index);
    return (<div key={key}>{this.state.items[index]}</div>);
    //return this.props.itemRenderer(index, key);
  },

  render() {
    return (
      <div>
        <h1>News feeds items</h1>
        <div style={{ overflow: 'auto', maxHeight: 400 }}>
          <ReactList {...this.props} type='variable' itemRenderer={this.renderItem} items={this.state.items} length={this.state.items.length + 1}/>
        </div>
      </div>
    );
  }

});

Many thanks to caseywebdev for his help in resolving my issues here.

[simax]

That’s making sense now. I’ll go away and plug the ajax bit in. Many thanks once again.