Created
September 14, 2018 20:21
-
-
Save kheengz/cd97d85291631437554d661d3b406e46 to your computer and use it in GitHub Desktop.
React Auto Load data on bottom scroll of page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var InfiniteData = React.createClass({ | |
getInitialState: function () { | |
return ({data: [], requestSent: false}); | |
}, | |
componentDidMount: function () { | |
window.addEventListener('scroll', this.handleOnScroll); | |
this.initFakeData(); | |
}, | |
componentWillUnmount: function () { | |
window.removeEventListener('scroll', this.handleOnScroll); | |
}, | |
initFakeData: function () { | |
var data = this.createFakeData(this.state.data.length, 12); | |
this.setState({ | |
data: data, | |
loadedAllData: false, | |
}); | |
}, | |
createFakeData: function (startKey, counter) { | |
var i = 0; | |
var data = []; | |
for (i = 0; i < counter; i++) { | |
var fakeData = (<div key={startKey + i} className="data-info">Fake Data {startKey + i}</div>); | |
data.push(fakeData); | |
} | |
return data; | |
}, | |
querySearchResult: function () { | |
if (this.state.requestSent) { | |
return; | |
} | |
// enumerate a slow query | |
setTimeout(this.doQuery, 2000); | |
this.setState({requestSent: true}); | |
}, | |
doQuery: function () { | |
// used jQuery | |
$.ajax({ | |
url: "#", | |
data: null, | |
method: "GET", | |
success: function (data, textStatus, jqXHR) { | |
var fakeData = this.createFakeData(this.state.data.length, 6); | |
var newData = this.state.data.concat(fakeData); | |
this.setState({ | |
data: newData, | |
requestSent: false, | |
loadedAllData: newData.length >= 29, | |
}); | |
}.bind(this), | |
error: function (jqXHR, textStatus, errorThrown) { | |
this.setState({requestSent: false}); | |
}.bind(this) | |
}); | |
}, | |
handleOnScroll: function () { | |
// http://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom | |
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; | |
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight; | |
var clientHeight = document.documentElement.clientHeight || window.innerHeight; | |
var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight; | |
if (scrolledToBottom && !this.state.loadedAllData) { | |
this.querySearchResult(); | |
} | |
}, | |
render: function () { | |
return ( | |
<div> | |
<div className="data-container"> | |
{this.state.data} | |
</div> | |
{(() => { | |
if (this.state.requestSent) { | |
return ( | |
<div className="data-loading"> | |
<i className="fa fa-refresh fa-spin"></i> | |
</div> | |
); | |
} else { | |
return ( | |
<div className="data-loading"></div> | |
); | |
} | |
})()} | |
</div> | |
); | |
} | |
}); | |
ReactDOM.render( | |
<InfiniteData/>, | |
document.getElementById("example") | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment