Return infinite data from the dribbble API

I'm making a app by using data returned from a Dribbble API: http://developer.dribbble.com/v1/ And How do I return INFINITE Dribbble shots? for each shot amount (for example 10 shots) to appear in 2 and 2 seconds? I know that it isn't elegant or userful but I want to start with this and then do something more sophisticated in the future. I'm making this app by using React.JS

import _ from 'lodash';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dribbble from './dribbble';

export default class Dribbbles extends React.Component {
  constructor(props) {
    super(props);
    this.state = { work: [] };
}

componentDidMount() {
  this.ShotList();
}

ShotList() {
  return $.getJSON('https://api.dribbble.com/v1/shots?per_page=3&access_token=<token>&callback=?')
    .then((resp) => {
      this.setState({ work: resp.data.reverse() });
  });
}

render() {

  const works = this.state.work.map((val, i) => {
    return <Dribbble dados={val} key={i} />
  });

  return <ul>{works}</ul>
 }
}

So, your question is really a two-part question:

1. how to modify the Dribble API urls to get "infinite" Shots
2. how to make your React app actually ask for "infinite" Shots

So, let's tackle the first part first.

Under the "Pagination" section of the Dribble API docs, they note that:

Requests that return multiple items will be paginated to 30 items by default. You can specify further pages with the page parameter

So, what this means is that they will give us up to 30 items at a time, and each full 30-item set is a page. So items 0-29 are on page=1, items 30-59 are on page=2, etc.

Great, so, for getting Shots, that means all we need to do is construct a URL that looks like:

https://api.dribbble.com/v1/shots?page=<pageNumber> (with your access token attached of course).

So, that's part 1. Now, part 2, how to get your app to ask for every page. We don't want to make hundreds/thousands of requests at once for all the Shots (because that would kill the user's device, Dribble would ban you, and, we don't even know how many pages there are). What we can do, is load 30 into a list, let the user scroll to the bottom of the list, and when they get there, load the next 30, and so on. In this way, you will have "infinite" pagination through all the Shots.

So, how to do this? Well, let's add some scrolling into your app. I'm going to plugin react-waypoint here, since it's works great, and my company supports it :)

import _ from 'lodash';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Waypoint from 'react-waypoint';
import Dribbble from './dribbble';

export default class Dribbbles extends React.Component {
  constructor(props) {
    super(props);
    this.state = { page: 1, shots: [] };

    // Remember that you have to bind `this` to non-lifecycle methods that
    // use `this` when working inside ES6 React classes
    this.getShots = this.getShots.bind(this);
  }

  componentDidMount() {
    this.getShots();
  }

  // Every time we ask for data, we add it to the data we already have
  // Then, bump the page number, so next time we ask for the next page
  getShots() {
    return $.getJSON('https://api.dribbble.com/v1/shots?page=' + this.state.page + '&access_token=41ff524ebca5e8d0bf5d6f9f2c611c1b0d224a1975ce37579326872c1e7900b4&callback=?')
      .then((resp) => {
        var newShots = this.state.shots.concat(resp.data);
        this.setState({
          page: this.state.page + 1,
          shots: newShots
        });
    });
  }

  render() {
    const shots = this.state.shots.map((val, i) => {
      return <Dribbble dados={val} key={i} />
    });

    // Make sure to always put a `;` after your returns to avoid bugs
    return (
      <div>
        <ul>{shots}</ul>
        <Waypoint
          onEnter={this.getShots}
        />
      </div>
    );
  }
}

So, what this does is: first, we load the initial list of Shots. Every time someone scrolls to the bottom of the list, the Waypoint tells our app to load more Shots. Once those Shots are loaded, the list gets longer, and the user has to do more scrolling, and then the process just keeps repeating itself.

I can't test that the above code is perfect since I don't have a Dribble account, but, it should basically be all you need. Feel free to ask questions, and please let me know if you don't understand anything.