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

actualizada interfaz de seguidos y seguidores

Browse Source
This commit is contained in:
fedpo
2026-01-08 17:32:50 -03:00
parent b69e2f19ab
commit 0e924bfc31
4 changed files with 93 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/lib/components/CardPerfil.svelte
View File

@@ -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">
{#each data.seguidos.response as seguidos (seguidos.id)}
<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
<AvatarFallback class="text-xs">
{seguidos.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</a>
{/each}
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
{#each data.seguidos.response as seguidos (seguidos.id)}
<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
<AvatarFallback class="text-xs">
{seguidos.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</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">
{#each data.seguidores.response as seguidores (seguidores.id)}
<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
<AvatarFallback class="text-xs">
{seguidores.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</a>
{/each}
<div class="flex items-center justify-between">
<div class="flex -space-x-2">
{#each data.seguidores.response as seguidores (seguidores.id)}
<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
<Avatar class="h-8 w-8 border-2 border-background">
<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
<AvatarFallback class="text-xs">
{seguidores.displayName?.[0] || ''}
</AvatarFallback>
</Avatar>
</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>

22
src/lib/hooks/obtenerCantidadDeSeguidores.ts Normal file
View File

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

22
src/lib/hooks/obtenerCantidadDeSeguidos.ts Normal file
View File

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

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

@@ -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([
obtenerSeguidosPorUsuario(usuario.id, 3, fetch),
obtenerSeguidoresPorUsuario(usuario.id, 3, fetch)
const [seguidos, seguidores, countSeguidores, countSeguidos] = await Promise.all([
obtenerSeguidosPorUsuario(usuario.id, 5, 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
};
}