📄 Función para Paginación con Firestore y Angular 🔥🔥🔥

En este código, aprenderemos cómo implementar la paginación de documentos desde Firebase Firestore usando Angular con Observables para manejar la suscripción en tiempo real. 📘📡💪

🔑 Parámetros de Entrada

Parámetro	Tipo	Descripción
pageSize	number	Número de elementos por página.
currentPage	number	Página actual (por defecto 1).
lastVisible	QueryDocumentSnapshot<DocumentData>	Último documento visible para la paginación (opcional).

🛑 ¿Qué devuelve? 📌📌📌

Un Observable con la siguiente información:

• items: Lista de elementos de la página actual.
• lastVisible: Último documento visible de la página actual.
• totalCount: Total de elementos disponibles.
• currentPage: Página actual.
• totalPages: Total de páginas calculadas.
• isLastPage: Indica si la página actual es la última.

---

🛠️ Paso a Paso 🚶‍♂️🚶‍♀️🚶

1. Crear la Consulta Base 🔍💡🚨

La consulta base se crea solo una vez para evitar duplicación:

const baseQuery = query(
  this.collectionRef, // Referencia a la colección de Firestore
  where('userId', 'array-contains', userId) // Filtrar por ID de usuario
);

---

2. Obtener el Total de Documentos 📊📌💪

Se usa la función getCountFromServer para obtener la cantidad total de documentos:

const countSnapshot = await getCountFromServer(baseQuery);
const totalCount = countSnapshot.data().count;

---

3. Configurar la Paginación 🔄⚙️📄

Se calcula cuántos elementos traer por página y si se debe iniciar desde el último documento visible:

let paginatedQuery = query(baseQuery, limit(pageSize));
if (lastVisible) {
  paginatedQuery = query(paginatedQuery, startAfter(lastVisible));
}

---

4. Escuchar Cambios en Tiempo Real 🔔🔥⏳

La función onSnapshot permite escuchar actualizaciones automáticas sin recargar la página:

queryUnsubscribe = onSnapshot(paginatedQuery, (snapshot) => {
  const items = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  const newLastVisible = snapshot.docs.length > 0 ? snapshot.docs[snapshot.docs.length - 1] : null;

  observer.next({ items, lastVisible: newLastVisible, totalCount, currentPage, totalPages, isLastPage });
});

---

5. Limpieza de Suscripciones 🧹🧼🚫

Siempre es importante liberar las suscripciones para evitar memory leaks:

return () => {
  queryUnsubscribe?.();
  collectionUnsubscribe?.();
  observer.complete();
};

---

🎯 Conclusión ✅📌🚀

Este código permite paginar los documentos de Firebase Firestore de manera eficiente y reactiva, garantizando que los datos siempre estén sincronizados con los cambios en la base de datos.

💪 Ideal para proyectos con listas grandes y aplicaciones que requieren actualizaciones en tiempo real.

---

💬 ¿Te gustaría ver este código en acción? 🔥 Deja un comentario y comparte si te sirvió. 🎯🚀💪