Lazy loading que atualiza o estado da aplicacao qdo chega no bottom atualizando o estado page somando mais 1 Deixado um listener no estado PAGE, toda vez que ele for atualizado, o metodo de chamada da api é rechamado, assim é concatenado mais 10 itens no array de estado Data da aplicacao
getDataHandler = () => {
this.getAllPassData().then(res => {
const filteredData = this.filteredItems(res);
if(this.state.page > 1){
const data = this.paginateArray(filteredData, this.state.page);
this.setState({ data: [...this.state.data,...data.data]});
}else{
const data = this.paginateArray(filteredData);
this.setState({ data: data ? data.data : res });
}
});
};
loadMoreHandler(){
this.setState({page: this.state.page + 1})
}
handleScroll = () => {
if (this.hasReachedBottom()) {
this.loadMoreHandler();
}
}
hasReachedBottom() {
const distanceScrolledFromTop = document.scrollingElement || document.documentElement;
return (
parseInt(distanceScrolledFromTop.scrollTop + distanceScrolledFromTop.clientHeight ) ===
distanceScrolledFromTop.scrollHeight - 1
);
}
componentDidMount() {
window.addEventListener("scroll", this.handleScroll, false);
this.getDataHandler();
}
componentWillUnmount() {
window.removeEventListener("scroll", this.handleScroll, false);
}
componentDidUpdate(_, prevState) {
const { page } = this.state;
if(prevState.page !== page){
this.getDataHandler();
}
}