actualizada interfaz de seguidos y seguidores

src/lib/components/CardPerfil.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Pen from '@lucide/svelte/icons/pen';
+	import ArrowRight from '@lucide/svelte/icons/chevron-right';
 	import AvatarFallback from './ui/avatar/avatar-fallback.svelte';
 	import AvatarImage from './ui/avatar/avatar-image.svelte';
 	import Avatar from './ui/avatar/avatar.svelte';
@@ -139,24 +140,29 @@
 					<CardHeader class="flex justify-between">
 						<CardTitle>Seguidos:</CardTitle>
 						{#if Array.isArray(data?.seguidos?.response)}
-							<Badge variant="secondary">{data.seguidos.response.length || 0}</Badge>
+							<Badge variant="secondary">{data.countSeguidos || 0}</Badge>
 						{/if}
 					</CardHeader>
 					<CardContent>
 						{#if (data.seguidos.response?.length || 0) === 0}
 							<h3>No hay Seguidos</h3>
 						{:else}
-							<div class="flex -space-x-2">
+							<div class="flex items-center justify-between">
-								{#each data.seguidos.response as seguidos (seguidos.id)}
+								<div class="flex -space-x-2">
-									<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
+									{#each data.seguidos.response as seguidos (seguidos.id)}
-										<Avatar class="h-8 w-8 border-2 border-background">
+										<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
-											<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
+											<Avatar class="h-8 w-8 border-2 border-background">
-											<AvatarFallback class="text-xs">
+												<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
-												{seguidos.displayName?.[0] || ''}
+												<AvatarFallback class="text-xs">
-											</AvatarFallback>
+													{seguidos.displayName?.[0] || ''}
-										</Avatar>
+												</AvatarFallback>
-									</a>
+											</Avatar>
-								{/each}
+										</a>
+									{/each}
+								</div>
+								{#if data.seguidos.response?.length < data.countSeguidos}
+									<Button variant="ghost" class="mt-1 ml-4">Ver más<ArrowRight /></Button>
+								{/if}
 							</div>
 						{/if}
 					</CardContent>
@@ -167,24 +173,29 @@
 					<CardHeader class="flex justify-between">
 						<CardTitle>Seguidores:</CardTitle>
 						{#if Array.isArray(data?.seguidores?.response)}
-							<Badge variant="secondary">{data.seguidores.response.length || 0}</Badge>
+							<Badge variant="secondary">{data.countSeguidores || 0}</Badge>
 						{/if}
 					</CardHeader>
 					<CardContent>
 						{#if (data.seguidores.response?.length || 0) === 0}
 							<h3>No hay Seguidores</h3>
 						{:else}
-							<div class="flex -space-x-2">
+							<div class="flex items-center justify-between">
-								{#each data.seguidores.response as seguidores (seguidores.id)}
+								<div class="flex -space-x-2">
-									<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
+									{#each data.seguidores.response as seguidores (seguidores.id)}
-										<Avatar class="h-8 w-8 border-2 border-background">
+										<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
-											<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
+											<Avatar class="h-8 w-8 border-2 border-background">
-											<AvatarFallback class="text-xs">
+												<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
-												{seguidores.displayName?.[0] || ''}
+												<AvatarFallback class="text-xs">
-											</AvatarFallback>
+													{seguidores.displayName?.[0] || ''}
-										</Avatar>
+												</AvatarFallback>
-									</a>
+											</Avatar>
-								{/each}
+										</a>
+									{/each}
+								</div>
+								{#if data.seguidores.response?.length < data.countSeguidores}
+									<Button variant="ghost" class="mt-1 ml-4">Ver más<ArrowRight /></Button>
+								{/if}
 							</div>
 						{/if}
 					</CardContent>

src/lib/hooks/obtenerCantidadDeSeguidores.ts

@@ -0,0 +1,22 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+
+export async function obtenerCantidadDeSeguidores(id: string, fetch2?: Function) {
+	const fetchFn = fetch2 || fetch;
+	try {
+		const response = await fetchFn(`${get(apiBase)}/api/users/${id}/followers/count`, {
+			method: 'GET',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+
+		if (!response.ok) {
+			return 0;
+		}
+		return await response.json();
+	} catch {
+		return 0;
+	}
+}

src/lib/hooks/obtenerCantidadDeSeguidos.ts

@@ -0,0 +1,22 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+
+export async function obtenerCantidadDeSeguidos(id: string, fetch2?: Function) {
+	const fetchFn = fetch2 || fetch;
+	try {
+		const response = await fetchFn(`${get(apiBase)}/api/users/${id}/following/count`, {
+			method: 'GET',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+
+		if (!response.ok) {
+			return 0;
+		}
+		return await response.json();
+	} catch {
+		return 0;
+	}
+}

src/routes/[perfil]/+page.ts

@@ -3,16 +3,26 @@ import type { User, UserResponseDto } from '../../types.js';
 import { error } from '@sveltejs/kit';
 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 }) {
 	depends('perfil:general');
 	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
 	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
 
-	const [seguidos, seguidores] = await Promise.all([
+	const [seguidos, seguidores, countSeguidores, countSeguidos] = await Promise.all([
-		obtenerSeguidosPorUsuario(usuario.id, 3, fetch),
+		obtenerSeguidosPorUsuario(usuario.id, 5, fetch),
-		obtenerSeguidoresPorUsuario(usuario.id, 3, fetch)
+		obtenerSeguidoresPorUsuario(usuario.id, 5, fetch),
+		obtenerCantidadDeSeguidores(usuario.id, fetch),
+		obtenerCantidadDeSeguidos(usuario.id, fetch)
 	]);
 
-	return { ...usuario, seguidos, seguidores };
+	return {
+		...usuario,
+		seguidos,
+		seguidores,
+		countSeguidores: countSeguidores.count,
+		countSeguidos: countSeguidos.count
+	};
 }