fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-21 16:27:32 -03:00
Code Issues Packages Projects Releases Wiki Activity

add pagination in following and followers

Browse Source
This commit is contained in:
Fran
2026-01-24 09:02:49 -03:00
parent 9eb92b0c06
commit 54593dd2eb
8 changed files with 136 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/[perfil]/+page.ts
View File

@@ -13,8 +13,8 @@ export const load: PageLoad = async ({ params, depends, fetch }) => {
if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
const [seguidos, seguidores, countSeguidores, countSeguidos] = await Promise.all([
obtenerSeguidosPorUsuario(usuario.id, 5, fetch),
obtenerSeguidoresPorUsuario(usuario.id, 5, fetch),
obtenerSeguidosPorUsuario(usuario.id, 1, 5, fetch),
obtenerSeguidoresPorUsuario(usuario.id, 1, 5, fetch),
obtenerCantidadDeSeguidores(usuario.id, fetch),
obtenerCantidadDeSeguidos(usuario.id, fetch)
]);

61
src/routes/[perfil]/seguidores/+page.svelte
View File

@@ -1,15 +1,41 @@
<script lang="ts">
import ArrowLeft from '@lucide/svelte/icons/chevron-left';
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import type { UserResponseDto } from '../../../types';
import UserCard from '@/components/UserCard.svelte';
import { goto } from '$app/navigation';
import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario';
type Data = {
usuario: UserResponseDto;
seguidores: UserResponseDto[];
totalCount: number;
};
let { data }: { data: Data } = $props();
let currentPage = $state(1);
let isLoading = $state(false);
const limit = 100;
let totalPages = $derived(Math.ceil(data.totalCount / limit));
async function loadPage(page: number) {
if (isLoading) return;
isLoading = true;
const response = await obtenerSeguidoresPorUsuario(data.usuario.id, page, limit);
if (response) {
data.seguidores = response.response as UserResponseDto[];
data.totalCount = response.totalCount;
currentPage = page;
}
isLoading = false;
}
</script>
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
@@ -25,9 +51,14 @@
<ArrowLeft />
</button>
</div>
{#if data.seguidores.length === 0}
{#if isLoading}
<div class="py-8 text-center text-muted-foreground">
<p>No hay seguidores para mostrar.</p>
<p>Cargando...</p>
</div>
{:else if data.seguidores.length === 0}
<div class="py-8 text-center text-muted-foreground">
<p>No hay seguidos para mostrar.</p>
</div>
{:else}
<div class="flex flex-col sm:grid" style="grid-template-columns: repeat(2, 1fr); gap: 1rem;">
@@ -38,5 +69,29 @@
{/each}
</div>
{/if}
{#if totalPages > 1}
<div class="mt-6 flex items-center justify-center gap-2">
<button
class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => loadPage(currentPage - 1)}
disabled={currentPage === 1 || isLoading}
>
<ChevronLeft class="h-5 w-5" />
</button>
<span class="px-4 text-sm text-muted-foreground">
Página {currentPage} de {totalPages}
</span>
<button
class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => loadPage(currentPage + 1)}
disabled={currentPage === totalPages || isLoading}
>
<ChevronRight class="h-5 w-5" />
</button>
</div>
{/if}
</div>
</div>
</div>

4
src/routes/[perfil]/seguidores/+page.ts
View File

@@ -1,14 +1,16 @@
import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario';
import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';
import type { UserResponseDto, UsersResponseDto } from '../../../types';
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);
const seguidoresResponse: UsersResponseDto | null = await obtenerSeguidoresPorUsuario(
usuario.id,
1,
100,
fetch
);

59
src/routes/[perfil]/seguidos/+page.svelte
View File

@@ -1,15 +1,41 @@
<script lang="ts">
import ArrowLeft from '@lucide/svelte/icons/chevron-left';
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
import ChevronRight from '@lucide/svelte/icons/chevron-right';
import type { UserResponseDto } from '../../../types';
import UserCard from '@/components/UserCard.svelte';
import { goto } from '$app/navigation';
import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario';
type Data = {
usuario: UserResponseDto;
seguidos: UserResponseDto[];
totalCount: number;
};
let { data }: { data: Data } = $props();
let currentPage = $state(1);
let isLoading = $state(false);
const limit = 100;
let totalPages = $derived(Math.ceil(data.totalCount / limit));
async function loadPage(page: number) {
if (isLoading) return;
isLoading = true;
const response = await obtenerSeguidosPorUsuario(data.usuario.id, page, limit);
if (response) {
data.seguidos = response.response as UserResponseDto[];
data.totalCount = response.totalCount;
currentPage = page;
}
isLoading = false;
}
</script>
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
@@ -25,7 +51,12 @@
<ArrowLeft />
</button>
</div>
{#if data.seguidos.length === 0}
{#if isLoading}
<div class="py-8 text-center text-muted-foreground">
<p>Cargando...</p>
</div>
{:else if data.seguidos.length === 0}
<div class="py-8 text-center text-muted-foreground">
<p>No hay seguidos para mostrar.</p>
</div>
@@ -38,5 +69,29 @@
{/each}
</div>
{/if}
{#if totalPages > 1}
<div class="mt-6 flex items-center justify-center gap-2">
<button
class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => loadPage(currentPage - 1)}
disabled={currentPage === 1 || isLoading}
>
<ChevronLeft class="h-5 w-5" />
</button>
<span class="px-4 text-sm text-muted-foreground">
Página {currentPage} de {totalPages}
</span>
<button
class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
onclick={() => loadPage(currentPage + 1)}
disabled={currentPage === totalPages || isLoading}
>
<ChevronRight class="h-5 w-5" />
</button>
</div>
{/if}
</div>
</div>
</div>

4
src/routes/[perfil]/seguidos/+page.ts
View File

@@ -10,12 +10,14 @@ export const load: PageLoad = async ({ params, fetch }) => {
const seguidosResponse: UsersResponseDto | null = await obtenerSeguidosPorUsuario(
usuario.id,
1,
100,
fetch
);
return {
usuario,
seguidos: seguidosResponse?.response || []
seguidos: seguidosResponse?.response || [],
totalCount: seguidosResponse?.totalCount ?? 0
};
};