From 70093ce186ec9942e394a6cff09081af02d047d6 Mon Sep 17 00:00:00 2001
From: Fran <Franciscorosecerna88@gmail.com>
Date: Fri, 6 Feb 2026 18:29:07 -0300
Subject: [PATCH] add pagination to the post hashtag

---
 src/lib/hooks/obtenerCantidadDeUsosdeHtag.ts |  8 +++-
 src/lib/stores/firebase.ts                   | 37 ------------------
 src/routes/htag/[htag]/+page.svelte          | 41 ++++++++++++++++++++
 3 files changed, 47 insertions(+), 39 deletions(-)
 delete mode 100644 src/lib/stores/firebase.ts

diff --git a/src/lib/hooks/obtenerCantidadDeUsosdeHtag.ts b/src/lib/hooks/obtenerCantidadDeUsosdeHtag.ts
index ae7904c..97384c7 100644
--- a/src/lib/hooks/obtenerCantidadDeUsosdeHtag.ts
+++ b/src/lib/hooks/obtenerCantidadDeUsosdeHtag.ts
@@ -2,11 +2,15 @@ import { apiBase } from '@/stores/url';
 import { sesionStore } from '@/stores/usuario';
 import { get } from 'svelte/store';
 
-export async function obtenerCantidadDeUsosdeHtag(htag: string, fetch2?: Function) {
+export async function obtenerCantidadDeUsosdeHtag(
+	htag: string, 
+	fetch2?: Function, 
+	page: number = 1, 
+	limit: number = 20,) {
 	if (!htag) return null;
 	const fetchFn = fetch2 || fetch;
 	try {
-		const req = await fetchFn(`${get(apiBase)}/api/posts/hashtag/${htag}`, {
+		const req = await fetchFn(`${get(apiBase)}/api/posts/hashtag/${htag}?page=${page}&pageSize=${limit}`, {
 			method: 'GET',
 			headers: {
 				Authorization: `Bearer ${get(sesionStore)?.accessToken || ''}`
diff --git a/src/lib/stores/firebase.ts b/src/lib/stores/firebase.ts
deleted file mode 100644
index d032b93..0000000
--- a/src/lib/stores/firebase.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { initializeApp, type FirebaseApp } from 'firebase/app';
-import { getAuth, type Auth } from 'firebase/auth';
-
-import {
-	PUBLIC_f_apiKey,
-	PUBLIC_f_appId,
-	PUBLIC_f_authDomain,
-	PUBLIC_f_messagingSenderId,
-	PUBLIC_f_projectId,
-	PUBLIC_f_storageBucket
-} from '$env/static/public';
-
-let app: FirebaseApp | null = null;
-let auth: Auth | null = null;
-
-const firebaseConfig = {
-	apiKey: PUBLIC_f_apiKey,
-	authDomain: PUBLIC_f_authDomain,
-	projectId: PUBLIC_f_projectId,
-	storageBucket: PUBLIC_f_storageBucket,
-	messagingSenderId: PUBLIC_f_messagingSenderId,
-	appId: PUBLIC_f_appId
-};
-
-export function getFirebaseApp(): FirebaseApp {
-	if (!app) {
-		app = initializeApp(firebaseConfig);
-	}
-	return app;
-}
-
-export function getFirebaseAuth(): Auth {
-	if (!auth) {
-		auth = getAuth(getFirebaseApp());
-	}
-	return auth;
-}
diff --git a/src/routes/htag/[htag]/+page.svelte b/src/routes/htag/[htag]/+page.svelte
index 90b028b..224a546 100644
--- a/src/routes/htag/[htag]/+page.svelte
+++ b/src/routes/htag/[htag]/+page.svelte
@@ -10,6 +10,26 @@
 	import { updatePost } from '@/hooks/updatePost';
 	import Separator from '@/components/ui/separator/separator.svelte';
 	import { page } from '$app/state';
+	import { obtenerCantidadDeUsosdeHtag } from '@/hooks/obtenerCantidadDeUsosdeHtag';
+
+	let currentPage = $state(1);
+	let loading = $state(false);
+
+	async function cargarPagina(pageNumber: number) {
+		loading = true;
+		const res = await obtenerCantidadDeUsosdeHtag(
+			data.htag,
+			fetch,
+			pageNumber,
+			20
+		);
+
+		if (res) {
+			setPosts(res.response);
+			currentPage = pageNumber;
+		}
+		loading = false;
+	}
 
 	interface props {
 		data: {
@@ -78,6 +98,27 @@
 		</div>
 	</div>
 </div>
+<div class="mt-6 flex items-center justify-center gap-4">
+	<button
+		class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+		onclick={() => cargarPagina(currentPage - 1)}
+		disabled={currentPage === 1 || loading}
+	>
+		Anterior
+	</button>
+
+	<span class="text-sm font-semibold">
+		Página {currentPage}
+	</span>
+
+	<button
+		class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+		onclick={() => cargarPagina(currentPage + 1)}
+		disabled={loading || (postsfiltro?.length ?? 0) < 20}
+	>
+		Siguiente
+	</button>
+</div>
 {#if postAModificar}
 	<div in:fade>
 		<ModalEditar callbackfn={handleEditar} bind:post={postAModificar} />