add pagination to the post hashtag

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 || ''}`

src/lib/stores/firebase.ts

@@ -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;
-}

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} />