Paginación con botón antes del infinite scroll
Contenido del curso
Optimización de imágenes
Paginación
Almacenamiento local
Bonus
Próximos pasos
Paginación con botón antes del infinite scroll
Paginación con botón antes del infinite scroll
Contenido del curso
Néstor Saavedra
Said Cueter
Daniel Flores
Ameth Ordoñez Erazo
maximo galarza
Ricardo Alfonso Chavez Vilcapoma
Carlos Rodríguez
Ernesto Alejandro Toledo Romero
Ariel Ezequiel Biazzo Genua
Sebastian Giraldo
Diego Alvaro Parra Abad
Jonathan Guidi
Germán de Jesús Hernández García
Dario Paladines
Angel Daniel Almanza Trejo
Juan Castro
ProfesorAngel Daniel Almanza Trejo
Javier Núñez
Ulqernesh Karvenae
Daniel Salazar Munoz
Leonardo Jaimovich
Oscar Fuentes Esteves
Juan Castro
ProfesorMi 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); }
Me gusto tu solucion. El truco de colocar a clean: page == 1 no se me fuese ocurrido.
Genio! Que buena solución!
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 . }
Para que el boton no se duplicara al final quise ponerlo como una constante fuera de la funcion y despues buscar una forma de removerlo cada que llamara la funcion, lo curioso es que solo con sacarlo de las funciones solo aparece una vez alguien sabe porque pasa esto ?
const btnLoadMore = document.createElement('button'); btnLoadMore.innerText = 'Cargar más'; btnLoadMore.addEventListener('click', getPaginatedTrendingMovies); let page = 1; async function getTrendingMovies() { const { data } = await api('trending/movie/day'); const movies = data.results; createMovies(movies, genericSection); genericSection.appendChild(btnLoadMore); } async function getPaginatedTrendingMovies() { page++; const { data } = await api('trending/movie/day', { params: { page: page, } }); const movies = data.results; createMovies(movies, genericSection, false); genericSection.appendChild(btnLoadMore); }
Porque sin importar cuántas veces llames a la función, como la creación del botón está por fuera, pos solo se ejecuta una vez. :D
Osea la funcion se ejecuta y todo si agrega las demas peliculas, o te refieres a que solo puedes agregar una sola vez un mismo elemento de html ?
Para no tener que crear un nuevo boton cada vez que se recarga la página y borrar el anterior, lo que hice fue agregar estilos al boton para que aparezca esté fijo siempre.
.btn { position: fixed; z-index: 1; bottom: 50px; }
Yo lo hice con un observer, primero para el tema del boton no se este duplicado en el html tener el el cuerpo 2 contenedores 1 para las imgs y el otro para el o boton con eso siempre estara al final y no se duplicara
Luego cuando el observer detecte al final del documento es cuando ejecutamos la funcion
y bueno como use la misma plantilla para trending como para genre tengo que hacer una validacion para la api pero en este punto fue lo mismo que el profe solo que el restablecer el contenedor a 0 no lo hacia en el generateImgs sino el la misma logica por tanto no fue necesario pasarle mas parametros
Yo aniadi estas dos lineasen la funcion getPaginatedTrendingMovies para eliminar el boton de carga
const oldBtnCarga = document.querySelector('#btnCarga') genericSection.removeChild(oldBtnCarga) ``` const oldBtnCarga = document.querySelector('#btnCarga') genericSection.removeChild(oldBtnCarga) 
No hay una mejor forma, o estratégia. Depende que objetivo tengas para tu app
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.
Jejeje. En mi caso AMO CON LOCURA llamar primero a las funciones y luego sí crearlas. Se me hace mucho más organizado, legible y todo bueno que hay en el mundo. Pero tienes razón en que si tuviera que migrarlo a otro lenguaje, muy seguramente eso causaría un poquillo de problemas, no muy difíciles, más bien tediosos de resolver.