CODEWITHSUNDEEP
reactjs
user173420
user173420

Reputation: 376

React Pagination and search component number bug

I have a search that displays no more that 10 items in total. I'm 100% sure there more than 10 results.

I think the issue is here: <span>{movies.length} results found</span>

with this variable const maxPages = Math.floor(movies.length / PAGE_SIZE);

I'm quite new with react, I really hope i explained myself properly. Demo here

Upvotes: 1

Views: 145

Answers (1)

Erfan
Erfan

Reputation: 1802

The api from which you receive movies data sends a json response like this:

{
"Search": [
    {
        "Title": "Captain Marvel",
        "Year": "2019",
        "imdbID": "tt4154664",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BMTE0YWFmOTMtYTU2ZS00ZTIxLWE3OTEtYTNiYzBkZjViZThiXkEyXkFqcGdeQXVyODMzMzQ4OTI@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel One-Shot: Agent Carter",
        "Year": "2013",
        "imdbID": "tt3067038",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BZDIwZTM4M2QtMWFhYy00N2VmLWFlMjItMzI3NjBjYTc0OTMxXkEyXkFqcGdeQXVyNTE1NjY5Mg@@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel One-Shot: All Hail the King",
        "Year": "2014",
        "imdbID": "tt3438640",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BZGFkMTZkMDQtNzM4Yy00YWEwLTkzOWEtZTMyNDRlNmJhYWJhXkEyXkFqcGdeQXVyNTE1NjY5Mg@@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel One-Shot: Item 47",
        "Year": "2012",
        "imdbID": "tt2247732",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BMjNlMzAxNmQtOGEwZi00NTEyLWI0NWYtMTlhNmE2YTA3ZDVhXkEyXkFqcGdeQXVyNTE1NjY5Mg@@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel One-Shot: A Funny Thing Happened on the Way to Thor's Hammer",
        "Year": "2011",
        "imdbID": "tt2011109",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BYmVlYTg3N2QtMWM2OS00YWQyLWI2M2MtMDc0ZjBkZjk1MTY3XkEyXkFqcGdeQXVyNTE1NjY5Mg@@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel One-Shot: The Consultant",
        "Year": "2011",
        "imdbID": "tt2011118",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BNGE4YjU5MDAtYzYzMC00M2RlLTk0NDgtNDU1MjgyMGI0MjI3XkEyXkFqcGdeQXVyNTE1NjY5Mg@@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel Studios: Legends",
        "Year": "2021–",
        "imdbID": "tt13650480",
        "Type": "series",
        "Poster": "https://m.media-amazon.com/images/M/MV5BNGE3ODYyNDYtODk1NS00ODRmLTk5YTYtOGMyMTZkYTEyODhlXkEyXkFqcGdeQXVyODQ4MjU1MDk@._V1_SX300.jpg"
    },
    {
        "Title": "Lego Marvel Super Heroes",
        "Year": "2013",
        "imdbID": "tt2620204",
        "Type": "game",
        "Poster": "https://m.media-amazon.com/images/M/MV5BOTA5ODA2NTI2M15BMl5BanBnXkFtZTgwNTcxMzU1MDE@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel Studios: Assembled",
        "Year": "2021–",
        "imdbID": "tt14094206",
        "Type": "series",
        "Poster": "https://m.media-amazon.com/images/M/MV5BNWMyNWYyMmYtZjNiZi00MzFmLTg2MjYtYWEzZWY1MzBhY2I2XkEyXkFqcGdeQXVyNTE1NjY5Mg@@._V1_SX300.jpg"
    },
    {
        "Title": "Marvel Studios: Assembling a Universe",
        "Year": "2014",
        "imdbID": "tt3591568",
        "Type": "movie",
        "Poster": "https://m.media-amazon.com/images/M/MV5BZjNiN2NhYzQtYmI1NC00NGRmLWE2MWYtNjAxNjMzZmYxNDJhXkEyXkFqcGdeQXVyODQ4MjU1MDk@._V1_SX300.jpg"
    }


  ],
    "totalResults": "226",
    "Response": "True"
  }

As you can see, there is a property named "totalResults" which is what you are looking for to display the number of results. I suggest you save it in a new state and use it wherever you like.

Defining a new state after all other states:

const [totalResults,setTotalResults]=useState(0)

Now in getMovies:

 const getMovies = (term='marvel') => {
  setLoading(true);
  axios.get(`https://www.omdbapi.com/?apikey=cbb48c03&s=${encodeURIComponent(term)}&plot=full`)
    .then(response => {
    setMovies(response.data.Search || []);
    setTotalResults(response.data.totalResults) /// here is the edit
  }).catch(error => {
    setMovies([]);
  }).finally(() => setLoading(false));
}

Also change this part:

       <div className="pagination-left">
<span>{totalResults} results found</span>  // another edit
          </div>

Also, there is a server side pagination which sends only 10 records per page,

Also it supports a page parameter that you can use to receive new records for each page number.

  axios.get(`https://www.omdbapi.com/?apikey=cbb48c03&s=${encodeURIComponent(term)}&plot=full&page=${pageNumber}`)

Upvotes: 1

Related Questions