felvieira
10/24/2019 - 5:51 AM

Lazy Loading React JS

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();
    }
  }