fix pagination in profile

This commit is contained in:
Fran
2026-01-24 01:43:34 -03:00
parent 1c79c5fcda
commit 9eb92b0c06
3 changed files with 47 additions and 40 deletions

View File

@@ -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,7 +48,6 @@
cargando = true;
try {
const res = await fetch(
`${$apiBase}/api/posts/user/${params.perfil}?page=${pageNumber}&pageSize=20`,
{
@@ -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;
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,9 +150,7 @@
</h1>
<hr class="mb-8" />
{#if cargando && !finished}
<CardCargando />
{:else if mensajeError !== ''}
{#if mensajeError !== ''}
<CardError {mensajeError} />
{:else}
<div class="flex flex-col gap-2">
@@ -164,6 +165,10 @@
{#if cargando && !finished}
<CardCargando />
{/if}
{#if finished && $posts.length === 0}
<p class="text-center text-muted-foreground">No hay posts para mostrar</p>
{/if}
</div>
{/if}
</div>

View File

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

View File

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