Para implementar el infine scrolling en todas las secciones, lo que hice fue lo siguiente:
- Crear (en main.js) una función llamada getPaginatedMovies que reciba todos los posibles parámetros y realice la lógica de chequear los condicionales y hacer el llamado a la API de la siguiente página de resultados:
async function getPaginatedMovies(
endPoint,
{
categoryId,
query
} = {},
) {
const {
scrollTop,
scrollHeight,
clientHeight
} = document.documentElement;
const scrollAtBottom = (scrollTop + clientHeight) >= (scrollHeight - 15);
const pageIsNotMax = page < maxPage;
if (scrollAtBottom && pageIsNotMax) {
page++;
const { data } = await api(endPoint, {
params: {
page,
with_genres: categoryId,
query,
},
});
const movies = data.results;
printMoviePosters(movies, genericSection, true);
}
}
- (en main.js) Creé una función específica de paginación para cada sección, en las que que llamaba a la función global de paginación, y si era necesario volvía a sacar la info del hash para pasarla por parámetro:
function getPaginatedTrendingMovies() {
getPaginatedMovies('/trending/movie/day');
}
function getPaginatedMoviesByCategory() {
const [_, categoryData] = location.hash.split('=');
const [categoryId] = categoryData.split('-');
getPaginatedMovies('/discover/movie', {categoryId});
}
function getPaginatedMoviesBySearch() {
const [_, undecodedQuery] = location.hash.split('=');
const query = decodeURI(undecodedQuery);
getPaginatedMovies('/search/movie', {undefined, query});
}
- (en navigation.js) La función de cada página asigna ahora a infiniteScroll su función propia de paginación:
function searchPage () {
// función recortada
infiniteScroll = getPaginatedMoviesBySearch;
}
function categoriesPage () {
// función recortada
infiniteScroll = getPaginatedMoviesByCategory;
}
function trendsPage () {
// función recortada
infiniteScroll = getPaginatedTrendingMovies;
}
- Luego me dí cuenta que si navegaba entre diferentes secciones, al compartir función page mantenía acumulado el último número en el que quedaba, por lo que si llegaba a la página 4 en trendings, al cargar una categoría y scrollear, no me cargaba la página 2 sino la 5, y así sucesivamente.
Por lo tanto, (en navigation.js) reasigné a 1 la varible page antes de asignarle la función a infiniteScroll:
page = 1;
infiniteScroll = getPaginatedTrendingMovies;
De esta forma logré que las 3 secciones tengan infinite scrolling, intentando mantenerme DRY
*Cualquier error o correción, siempre súper bienvenido!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.