reactjs - Return infinite data from the dribbble API -

i'm making app using data returned dribbble api: http://developer.dribbble.com/v1/ , how return infinite dribbble shots? each shot amount (for example 10 shots) appear in 2 , 2 seconds? know isn't elegant or userful want start , more sophisticated in future. i'm making app using react.js

import _ 'lodash'; import react, { component } 'react'; import reactdom 'react-dom'; import dribbble './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, question two-part question:

1. how modify dribble api urls "infinite" shots
2. how make react app ask "infinite" shots

so, let's tackle first part first.

under "pagination" section of the dribble api docs, note that:

requests return multiple items paginated 30 items default. can specify further pages page parameter

so, means give 30 items @ time, , each full 30-item set page. items 0-29 on page=1, items 30-59 on page=2, etc.

great, so, getting shots, means need construct url looks like:

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

so, that's part 1. now, part 2, how app ask every page. don't want make hundreds/thousands of requests @ once shots (because kill user's device, dribble ban you, and, don't know how many pages there are). can do, load 30 list, let user scroll bottom of list, , when there, load next 30, , on. in way, have "infinite" pagination through shots.

so, how this? well, let's add scrolling app. i'm going plugin react-waypoint here, since it's works great, , company supports :)

import _ 'lodash'; import react, { component } 'react'; import reactdom 'react-dom'; import waypoint 'react-waypoint'; import dribbble './dribbble';  export default class dribbbles extends react.component {   constructor(props) {     super(props);     this.state = { page: 1, shots: [] };      // remember have bind `this` non-lifecycle methods     // use `this` when working inside es6 react classes     this.getshots = this.getshots.bind(this);   }    componentdidmount() {     this.getshots();   }    // every time ask data, add data have   // then, bump page number, next time ask 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 put `;` after returns avoid bugs     return (       <div>         <ul>{shots}</ul>         <waypoint           onenter={this.getshots}         />       </div>     );   } } 

so, is: first, load initial list of shots. every time scrolls bottom of list, waypoint tells our app load more shots. once shots loaded, list gets longer, , user has more scrolling, , process keeps repeating itself.

i can't test above code perfect since don't have dribble account, but, should need. feel free ask questions, , please let me know if don't understand anything.