fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -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

3
src/lib/components/UserCard.svelte
View File

@@ -35,8 +35,5 @@
<BotonSeguir post={{ authorId: usu.id }} />
</div>
</div>
{#if usu.bio}
<div class="mt-4 rounded-full bg-accent p-4 text-muted-foreground">{usu.bio}</div>
{/if}
</CardContent>
</Card>

11
src/lib/hooks/obtenerSeguidoresPorUsuario.ts
View File

@@ -1,16 +1,19 @@
import { sesionStore } from '@/stores/usuario';
import type { UsersResponseDto } from '../../types';
import { get } from 'svelte/store';
import { apiBase } from '@/stores/url';
import { get } from 'svelte/store';
export async function obtenerSeguidoresPorUsuario(
id: string,
page: number = 1,
limit: number = 20,
fetch2: Function
fetch2?: Function
): Promise<UsersResponseDto | null> {
try {
const fetchFunc = fetch2 || fetch;
const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, {
const skip = (page - 1) * limit;
const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/followers?skip=${skip}&limit=${limit}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
@@ -27,4 +30,4 @@ export async function obtenerSeguidoresPorUsuario(
} catch (error) {
return null;
}
}
}

10
src/lib/hooks/obtenerSeguidosPorUsuario.ts
View File

@@ -5,13 +5,15 @@ import { get } from 'svelte/store';
export async function obtenerSeguidosPorUsuario(
id: string,
page: number = 1,
limit: number = 20,
fetch2?: Function
): Promise<UsersResponseDto | null> {
try {
const fetchFunc = fetch2 || fetch;
const skip = (page - 1) * limit;
const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, {
const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/following?skip=${skip}&limit=${limit}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
@@ -23,9 +25,9 @@ export async function obtenerSeguidosPorUsuario(
return null;
}
const users: UsersResponseDto = await response.json();
return users;
const data: UsersResponseDto = await response.json();
return data;
} catch (error) {
return null;
}
}
}

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