React Infinite scrolling function by online API

Question

I'm using YTS API and I would like to make Infinite scrolling function. There is a page parameter and limit parameter. It seems it can work with them but I have no idea of how to use it. I'm a beginner user of React. Could you guys help me? Thanks in advance.

fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=20')
fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=2')

This is the link of YTS API https://yts.am/api#list_movies

check my answer https://stackoverflow.com/questions/51708018/make-2nd-api-calls-when-all-contents-are-loaded-lazy-loading-from-the-first-ap/51708344#51708344 — CodeZombie, Aug 08 '18 at 05:04

score 1 · Accepted Answer · answered Aug 08 '18 at 05:44

1

I would try using React-Waypoint and dispatch an action to fetch the data every time it enters the screen.
The best way IMO is using redux but here's an example without:

state = { currentPage: 0, data: [] };

getNextPage = () => {
  fetch(`https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=${this.state.currentPage}`).
    then((res) => this.setState((prevState) => ({currentPage: prevState.currentPage + 1, data: res.body}));
}

render(){
  <div>
    {
      this.state.data.map((currentData) => <div>{currentData}</div>)
    }
    <Waypoint onEnter={this.getNextPage}/>
  </div>
}

answered Aug 08 '18 at 05:44

Matan Bobi

2,693
1
15
27

Hi, I try to do what you advised. but It's still didn't work... Could you see my code? – cat_lover Aug 09 '18 at 11:40
Hi @cat_lover, I see your code and the main problem I see is that the `_renderList` function should render the list and not make another fetch request. – Matan Bobi Aug 14 '18 at 14:00

cat_lover · Answer 2 · 2018-08-09T12:17:58.287

I would like to show {this._renderList() } infinitely

import React, {Component} from 'react';
import L_MovieList from './L_MovieList';
import L_Ranking from './L_Ranking';
import './L_Right_List.css';
import Waypoint from 'react-waypoint';
class L_BoxOffice extends Component {
  state = {
    currentPage: 0,
    data : []

  };
  constructor(props) {
    super(props);
    this.state = {
      movies: []
    }
    this._renderRankings = this._renderRankings.bind(this);
    this._renderList = this._renderList.bind(this);
  }
  componentWillMount() {
    this._getMovies();
  }
  _renderRankings = () => {
    const movies = this.state.movies.map((movie, i) => {
      console.log(movie)
      return <L_Ranking title={movie.title_english} key={movie.id} genres={movie.genres} index={i}/>
    })
    return movies
  }
  _renderList = () => {
    fetch(`https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=${this.state.currentPage}`)
      .then((res) => this.setState((prevState) => ({currentPage: prevState.currentPage + 1, data: res.body}));
    const movies = this.state.movies.map((movie) => {
      console.log(movie)
      return <L_MovieList title={movie.title_english} poster={movie.medium_cover_image} key={movie.id} genres={movie.genres} language={movie.language} runtime={movie.runtime} year={movie.year} rating={movie.rating} likes={movie.likes} trcode={movie.yt_trailer_code}/>
    })
    return movies
  }
  _getMovies = async () => {
    const movies = await this._callApi() 
    this.setState({ 
      movies 
    })
  }
  _callApi = () => {
    return fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10').then(potato => potato.json()) 
      .then(json => json.data.movies)
      .catch(err => console.log(err))
  }
  getNextPage = () => {
  fetch(`https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=${this.state.currentPage}`).
    then((res) => this.setState((prevState) => ({currentPage: prevState.currentPage + 1, data: res.body}));
}

  render() {
    const {movies} = this.state;
    let sub_title;
    let right_information;
    if (this.props.page == 'main') {
      sub_title = <div>Today Box Office</div>;
      right_information = <div>
        aaa</div>;
    } else if (this.props.page == 'box_office') {
      right_information = <div className={movies
          ? "L_Right_List"
          : "L_Right_List--loading"}>
        {this._renderList()}
        {
          this.state.data.map((currentData) => <div>{this._renderList()}</div>)
        }
        <Waypoint onEnter={this.getNextPage}/>
      </div>;
    }
    return (<div style={{
        backgroundColor: '#E5E5E5',
        paddingTop: '20px',
        paddingLeft: '20px'
      }}>
      {sub_title}
      <div className={movies
          ? "L_Left_Ranking"
          : "L_Left_Ranking--loading"}>
        <div className="L_Left_Ranking_title">영화랭킹</div>
        {this._renderRankings()}
      </div>
      {right_information}

    </div>);
  }
}

export default L_BoxOffice;

React Infinite scrolling function by online API

2 Answers2