From 9eb92b0c068d59f54e6e2aa4abeeb9eeba85fd4a Mon Sep 17 00:00:00 2001 From: Fran Date: Sat, 24 Jan 2026 01:43:34 -0300 Subject: [PATCH] fix pagination in profile --- src/routes/[perfil]/+page.svelte | 75 ++++++++++++++------------- src/routes/[perfil]/+page.ts | 7 +-- src/routes/[perfil]/seguidos/+page.ts | 5 +- 3 files changed, 47 insertions(+), 40 deletions(-) diff --git a/src/routes/[perfil]/+page.svelte b/src/routes/[perfil]/+page.svelte index 63765ea..94db45d 100644 --- a/src/routes/[perfil]/+page.svelte +++ b/src/routes/[perfil]/+page.svelte @@ -38,6 +38,8 @@ $inspect(data); let fetching = false; + // svelte-ignore state_referenced_locally + let currentProfile = $state(params.perfil); async function obtenerPosts() { if (fetching || finished) return; @@ -46,15 +48,14 @@ cargando = true; try { - const res = await fetch( - `${$apiBase}/api/posts/user/${params.perfil}?page=${pageNumber}&pageSize=20`, - { - headers: { - Authorization: `Bearer ${$sesionStore?.accessToken}` - } + `${$apiBase}/api/posts/user/${params.perfil}?page=${pageNumber}&pageSize=20`, + { + headers: { + Authorization: `Bearer ${$sesionStore?.accessToken}` } - ); + } + ); const nuevosPosts: Post[] = await res.json(); if (nuevosPosts.length === 0) { @@ -69,6 +70,8 @@ if (nuevosPosts.length < 20) { finished = true; } + } catch (error) { + mensajeError = 'Error al cargar los posts'; } finally { fetching = false; cargando = false; @@ -76,24 +79,24 @@ } $effect(() => { - params.perfil; + if (currentProfile !== params.perfil) { + currentProfile = params.perfil; + setPosts([]); + pageNumber = 1; + finished = false; + mensajeError = ''; + fetching = false; - setPosts([]); - pageNumber = 1; - finished = false; - mensajeError = ''; - - obtenerPosts(); + obtenerPosts(); + } }); $effect(() => { - if (!sentinel) return; - - if (finished) return; + if (!sentinel || finished) return; const observer = new IntersectionObserver( ([entry]) => { - if (entry.isIntersecting && !fetching) { + if (entry.isIntersecting && !fetching && !finished) { obtenerPosts(); } }, @@ -147,25 +150,27 @@
- {#if cargando && !finished} - - {:else if mensajeError !== ''} - - {:else} -
- {#each $posts as post (post.id)} -
- -
- {/each} + {#if mensajeError !== ''} + + {:else} +
+ {#each $posts as post (post.id)} +
+ +
+ {/each} -
+
- {#if cargando && !finished} - - {/if} -
- {/if} + {#if cargando && !finished} + + {/if} + + {#if finished && $posts.length === 0} +

No hay posts para mostrar

+ {/if} +
+ {/if} {#if postAModificar} diff --git a/src/routes/[perfil]/+page.ts b/src/routes/[perfil]/+page.ts index df6bef5..92492c6 100644 --- a/src/routes/[perfil]/+page.ts +++ b/src/routes/[perfil]/+page.ts @@ -1,12 +1,13 @@ import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario.js'; -import type { User, UserResponseDto } from '../../types.js'; +import type {UserResponseDto } from '../../types.js'; import { error } from '@sveltejs/kit'; +import type { PageLoad } from './$types'; import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js'; import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js'; import { obtenerCantidadDeSeguidores } from '@/hooks/obtenerCantidadDeSeguidores.js'; import { obtenerCantidadDeSeguidos } from '@/hooks/obtenerCantidadDeSeguidos.js'; -export async function load({ params, depends, fetch }) { +export const load: PageLoad = async ({ params, depends, fetch }) => { depends('perfil:general'); const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch); if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); @@ -25,4 +26,4 @@ export async function load({ params, depends, fetch }) { countSeguidores: countSeguidores.count, countSeguidos: countSeguidos.count }; -} +}; \ No newline at end of file diff --git a/src/routes/[perfil]/seguidos/+page.ts b/src/routes/[perfil]/seguidos/+page.ts index 4e0e506..a25c1ef 100644 --- a/src/routes/[perfil]/seguidos/+page.ts +++ b/src/routes/[perfil]/seguidos/+page.ts @@ -1,9 +1,10 @@ import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario'; import { error } from '@sveltejs/kit'; +import type { PageLoad } from './$types'; import type { UserResponseDto, UsersResponseDto } from '../../../types'; import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario'; -export async function load({ params, fetch }) { +export const load: PageLoad = async ({ params, fetch }) => { const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch); if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); @@ -17,4 +18,4 @@ export async function load({ params, fetch }) { usuario, seguidos: seguidosResponse?.response || [] }; -} +};