Implementación de Botón para Cargar Más con Paginación API

Mi solución:
Decidí hacer todo en una misma función para evitar el código repetido

	async function getTrendingMovies(page = 1){
    const { data } = await api('/trending/movie/day', {
        params: {
            page,
        }
    });

    const movies = data.results;

    movieContainer(movies, genericSection, {
        lazy: true,
        clean: page == 1
    });

    const btnLoadMore = document.createElement('button');
    btnLoadMore.innerText = "Load more";
    btnLoadMore.addEventListener('click', () => {
        btnLoadMore.style.display = 'none';
        getTrendingMovies(page + 1);
    });
    genericSection.appendChild(btnLoadMore); 
}

No se compliquen tanto la vida con otra función, puede reutilizar la misma solo añadiendo al boton un addEventListener que llame nuevamente a la misma función, solo que le deben agregar a la función un parámetro por defecto que indique la página.

Alli tambien agregue lo de quitar el botón viejo cuando se le da click, para que solo quede el nuevo al final.

si recargamos la primera es Spiderman después… LA penúltima es ETERNALS ajjajajaja

Yo lo que hice y me pareció sencillo es lo siguiente:

La mejor forma de eliimiinar el contenido de una sección es hacerlo desde el fiile navigation.js así solo lo liimpia cuando es la primera vez que entremos allí, luego cuando agreguemos más pelíiculas no eliimina las anteriores.
.
.
Sii no quieren dupliciar la función de obtener datos de forma paginada pueden modiificar la misma función agregando parámetros opcionales con valores pordefecto para que no rompa nada de la siguiiente manera

const getTrendingMovies = async (nextCollection= false, page = 1) => {
	const dinPage = nextCollection ? page + 1 : page;
	...
	// creamos el botón
	const btnLoadMoreTrendingMovies = createButtonLoadMore(genericSectionUpdate);
	btnLoadMoreTrendingMovies.addEventListener('click', () => {
            btnLoadMoreTrendingMovies.remove();
            trendingMovies(true, dinPage);
        });
}

Sii observamos si la funciión se ejecuta normalmente con los valores pordefecto, se agregará la página 1 y agregará el botón, al detectar el evento click el botón, entonces llamamos a la misma función pero esta vez le deciimos que si es paginado y le pasamos el número de página que antes estaba para que la próxima vez le adiicione la siguiente. Por lo que veo, esta misma función se puede ir modificando a futuro decidiendo si queremos paginación con botón más o scroll infinito sin necesidad de crear más funciones.
.
Espero que les guste mi propuesta!
.
Commit actual: Click aquí

Commit con los cambios: Click aquí

Usé el truco que hicieron algunos para poner en True comparando con la página 1 y además utilicé un closure para que no ande volando la variable page.

function getTrendingMoviesScroll(){
page = 1
  async function getPaginatedScroll(){
    console.log(page);
    const {data} = await api('trending/movie/day',{
      params:{
        page: page
      },
    });
    const movies = data.results;
    createMovies(movies,genericSection,{clean:page==1});
    const btnLoadMore = document.createElement('button');
    
    btnLoadMore.innerText = 'Cargar más';
    btnLoadMore.addEventListener('click',getPaginatedScroll);
    genericSection.appendChild(btnLoadMore);
    page++;
  }
  return getPaginatedScroll;
}

En el archivo navigation mando entonces a llamár esta función en lugar de la anterior

function trendsPage() {
  console.log('TRENDS!!');

  headerSection.classList.remove('header-container--long');
  headerSection.style.background = '';
  arrowBtn.classList.remove('inactive');
  arrowBtn.classList.remove('header-arrow--white');
  headerTitle.classList.add('inactive');
  headerCategoryTitle.classList.remove('inactive');
  searchForm.classList.add('inactive');

  trendingPreviewSection.classList.add('inactive');
  categoriesPreviewSection.classList.add('inactive');
  genericSection.classList.remove('inactive');
  movieDetailSection.classList.add('inactive');

  headerCategoryTitle.innerHTML = 'Tendencias';
  
  getTrendingMoviesScroll()();
  /* getTrendingMovies(); */
}

Asi es com yo cree el infinite scroll.

async function showTrendsPage() {
    let movies = await apiModule.getTrendingMovies(pageNumber)
    pageNumber++

    let createMovies = new Movies({section: genericSection, movies: movies})
    createMovies.applyMovies({clean: false})


    let btn = document.createElement('button')
    btn.classList.add('genericSection--button')
    btn.innerText = "AGREGAR MAS"
    genericSection.appendChild(btn)
    btn.addEventListener('click', () => {
        showTrendsPage()
        btn.remove()
    })
   
}

Yo saque el boton en una funcion aparte para que cada funcion tenga una propia responsabilidad, y luego de hacer el llamado a la API eliminaba el boton.

Bueno por mi parte pude solucionar el bug del botón repetido con las siguientes 2 líneas en la función “getPaginatedTrendingMovies” antes de las acciones que crean el botón.

  const btnLoadMoreExist = document.querySelector('#btn-load-more');
  genericSection.removeChild(btnLoadMoreExist);

Si no estan usando AXIOS - Recuerden pasar correctamente los Query Parameters…
Juan en el video pasa el Query parameter con el simbolo “?”, y eso nos devuelve un error en consola…
La forma correcta de pasar el Query es a traves del simbolo “&”.
La URL que le paseremos a Fetch() sin AXIOS quedaría asi: https://api.themoviedb.org/3/trending/movie/day?api_key=${API_KEY}&page=2`

Es más sencillo llamar a la variable let page = 1 directamente en lugar de llamarlo primero dentro de la función y después dentro de params. por ejemplo:

let pagination = 2

async function getPaginationTrendingMovies() {
    const { data } = await URL_API('/trending/movie/day', {
        params: {
            page: pagination++	// Aquí se hace el incremento directamente
        }
    })
}

Así no tenemos que volver a crear el botón ni mucho menos dejar varios botones sin usar por cada click,

Solución con una linea de código.

Simplemente agregué el removechild al momento de que se ejecuta la fn getPagesTrend (damos click), eso de primeras elimina el botón que acabamos de crear, y ejecuta la fn(getPagesTrend) que crea nuevamente el btn y que al volver a dar click otra vez ejecuta la fn y nuevamente lo elimina y así sucesivamente.
Lo que si hay que declarar el boton por fuera de las funciones para que no de ningún error y para que las 2 funciones entiendan y sepan que se hace referencia al mismo btn.

async function getTrends(){ //FN tendencias
. //llamado api
.
.
		btnLoadmore = document.createElement('button')
    btnLoadmore.innerText= 'Cargar más';
    movieCategory.appendChild(btnLoadmore)
    btnLoadmore.addEventListener('click', getPagesTrend)
}

let btnLoadmore;
let page = 1;

async function getPagesTrend(){  //FN Paginación
    movieCategory.removeChild(btnLoadmore);
.
. //llamado api, creando nuevamente btn
.
}

Sé que en JS no es necesario, pero procuro escribir la función que llamo arriba del código. Por si me cambio a otros lenguaje que no tenga Hoisting.