Film Finder, random page result

Web Development Front-End
1

I’ve finished Film Finder but I decided to challenge myself. I’m trying to get a random movie from a random page but for some reason, it works occasionally. I can’t understand what’s the problem, it just fails to fetch sometimes even though the number doesn’t go beyond the total pages. I attached all my files maybe there is a pro who can explain me…

I beg somebody to help!

Here is my code

const tmdbKey = 'API';
const tmdbBaseUrl = 'https://api.themoviedb.org/3';
const playBtn = document.getElementById('playBtn');

const getGenres = async() => {
const genreRequestEndpoint = '/genre/movie/list';
const requestParams = `?api_key=${tmdbKey}`;
const urlToFetch = tmdbBaseUrl + genreRequestEndpoint + requestParams;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
  const jsonResponse = await response.json();
  const genres = jsonResponse.genres;
  return genres;
}
} catch(error) {
  console.log(error);
}
};

const getMovies = async () => {
  const selectedGenre = getSelectedGenre();
  const discoverMovieEndpoint = '/discover/movie';
  const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
  const urlToFetch = tmdbBaseUrl + discoverMovieEndpoint + requestParams;

  try {
    const response = await fetch(urlToFetch);
    console.log("Response status:", response.status); // Log status for debugging
    if (response.ok) {
      const jsonResponse = await response.json();
      console.log("Total Pages:", jsonResponse.total_pages); // Log total pages
      const totalPages = jsonResponse.total_pages;

      // If totalPages is 1 or less, no need to fetch random pages
      if (totalPages <= 1) {
        console.log("Only 1 page of results, no need for random pages.");
        return jsonResponse.results; // Return movies from page 1
      }

      // Generate a random page number, ensuring it's within the totalPages range
      const randomPage = Math.floor(Math.random() * totalPages) + 1;
      const randomPageUrl = `${urlToFetch}&page=${randomPage}`;
      console.log("Fetching random page URL:", randomPageUrl); // Log the random page URL

      const randomPageResponse = await fetch(randomPageUrl);
      if (randomPageResponse.ok) {
        const randomPageJson = await randomPageResponse.json();
        const movies = randomPageJson.results;

        // If no movies are found on this random page, log it and return an empty array
        if (movies.length === 0) {
          console.log(`No movies found on page ${randomPage}.`);
          return [];
        }

        return movies;
      } else {
        console.log(`Failed to fetch random page ${randomPage}, status: ${randomPageResponse.status}`);
        return [];
      }
    } else {
      console.log("Failed to fetch movies, status:", response.status);
      return [];
    }
  } catch (error) {
    console.log("Error:", error);
    return [];
  }
};

const getMovieInfo = async (movie) => {
const movieId = movie.id;
const movieEndpoint =  `/movie/${movieId}`;
const requestParams = `?api_key=${tmdbKey}`;
const urlToFetch = tmdbBaseUrl + movieEndpoint + requestParams;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
  const jsonResponse = await response.json();
  const movieInfo = jsonResponse;
  return movieInfo;
}
} catch(error) {
console.log(error);
}
};

// Gets a list of movies and ultimately displays the info of a random movie from the list
const showRandomMovie = async () => {
  const movieInfo = document.getElementById('movieInfo');
  
  // Clear the current movie if it's there
  if (movieInfo.childNodes.length > 0) {
    clearCurrentMovie();
  }

  // Fetch movies from the selected genre
  const movies = await getMovies();
  
  // Get a random movie
  const randomMovie = getRandomMovie(movies);
  
  // Check if a valid movie was returned
  if (!randomMovie) {
    console.log("No valid random movie found.");
    return;  // Exit the function if no valid movie was found
  }

  // Fetch the movie details and display it
  const info = await getMovieInfo(randomMovie);
  displayMovie(info);
};

getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;