From 252e1d0b985ba2055976e2050033d1c44bc8e24f Mon Sep 17 00:00:00 2001 From: fede Date: Mon, 22 Dec 2025 20:19:42 -0300 Subject: [PATCH] algunos arreglos a la ui y correjido un cambio en una api --- bun.lock | 10 +- src/lib/components/CardPerfil.svelte | 103 +++++++++++++------ src/lib/hooks/obtenerSeguidoresPorUsuario.ts | 45 ++++---- src/lib/hooks/obtenerSeguidosPorUsuario.ts | 45 ++++---- src/routes/[perfil]/+page.svelte | 43 -------- src/routes/[perfil]/+page.ts | 12 ++- src/types.d.ts | 28 +++-- 7 files changed, 156 insertions(+), 130 deletions(-) diff --git a/bun.lock b/bun.lock index aff54d0..65a6ea0 100644 --- a/bun.lock +++ b/bun.lock @@ -4,7 +4,7 @@ "": { "name": "mini-x-front", "dependencies": { - "mode-watcher": "^1.1.0", + "mode-watcher": "^1.1.0" }, "devDependencies": { "@internationalized/date": "^3.8.1", @@ -25,9 +25,9 @@ "tailwindcss": "^4.1.14", "tw-animate-css": "^1.4.0", "typescript": "^5.9.3", - "vite": "^7.1.10", - }, - }, + "vite": "^7.1.10" + } + } }, "packages": { "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="], @@ -490,6 +490,6 @@ "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="], - "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], + "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="] } } diff --git a/src/lib/components/CardPerfil.svelte b/src/lib/components/CardPerfil.svelte index 2a49fcb..eb5198d 100644 --- a/src/lib/components/CardPerfil.svelte +++ b/src/lib/components/CardPerfil.svelte @@ -11,6 +11,9 @@ import { updateUsuario } from '@/hooks/updateUsuario'; import { sesionStore } from '@/stores/usuario'; import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario'; + import CardHeader from './ui/card/card-header.svelte'; + import CardTitle from './ui/card/card-title.svelte'; + import Badge from './ui/badge/badge.svelte'; let { data = $bindable() } = $props(); @@ -43,9 +46,8 @@ hoverimg = false; } - - - + + {#if cargando}
@@ -54,31 +56,34 @@
{:else if $sesionStore?.isAdmin || $sesionStore?.username == data.username} - +
+ +
+

{data.displayName}

@{data.username}

@@ -106,6 +111,46 @@

{data.bio}

- {/if} + {/if} +
+ + + + Seguidos: + {data.seguidos.response.length} + + + {#if data.seguidos.response.length === 0} +

No hay Seguidos

+ {:else} + {#each data.seguidos.response as seguidos (seguidos.id)} +

+ {seguidos.username} +

+ {/each} + {/if} + + + + + + + Seguidores: + {data.seguidores.response.length} + + + {#if data.seguidores.response.length === 0} +

No hay Seguidores

+ {:else} + {#each data.seguidores.response as seguidores (seguidores.id)} +

+ {seguidores.username} +

+ {/each} + {/if} + + + +
diff --git a/src/lib/hooks/obtenerSeguidoresPorUsuario.ts b/src/lib/hooks/obtenerSeguidoresPorUsuario.ts index 0a57e4c..bec0430 100644 --- a/src/lib/hooks/obtenerSeguidoresPorUsuario.ts +++ b/src/lib/hooks/obtenerSeguidoresPorUsuario.ts @@ -1,25 +1,28 @@ -import { sesionStore } from "@/stores/usuario"; -import type { UserResponseDto } from "../../types"; -import { get } from "svelte/store"; -import { apiBase } from "@/stores/url"; +import { sesionStore } from '@/stores/usuario'; +import type { UsersResponseDto } from '../../types'; +import { get } from 'svelte/store'; +import { apiBase } from '@/stores/url'; -export async function obtenerSeguidoresPorUsuario(id: string, limit:number = 20): Promise { - try { - const response = await fetch(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${get(sesionStore)?.accessToken}` - } - }); +export async function obtenerSeguidoresPorUsuario( + id: string, + limit: number = 20 +): Promise { + try { + const response = await fetch(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${get(sesionStore)?.accessToken}` + } + }); - if (!response.ok) { - return null; - } + if (!response.ok) { + return null; + } - const followers: UserResponseDto[] = await response.json(); - return followers; - } catch (error) { - return null; - } + const followers: UsersResponseDto = await response.json(); + return followers; + } catch (error) { + return null; + } } diff --git a/src/lib/hooks/obtenerSeguidosPorUsuario.ts b/src/lib/hooks/obtenerSeguidosPorUsuario.ts index a32aebe..160f075 100644 --- a/src/lib/hooks/obtenerSeguidosPorUsuario.ts +++ b/src/lib/hooks/obtenerSeguidosPorUsuario.ts @@ -1,25 +1,28 @@ -import { sesionStore } from "@/stores/usuario"; -import type { UserResponseDto } from "../../types"; -import { apiBase } from "@/stores/url"; -import { get } from "svelte/store"; +import { sesionStore } from '@/stores/usuario'; +import type { UsersResponseDto } from '../../types'; +import { apiBase } from '@/stores/url'; +import { get } from 'svelte/store'; -export async function obtenerSeguidosPorUsuario(id: string, limit:number = 20): Promise { - try { - const response = await fetch(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${get(sesionStore)?.accessToken}` - } - }); +export async function obtenerSeguidosPorUsuario( + id: string, + limit: number = 20 +): Promise { + try { + const response = await fetch(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${get(sesionStore)?.accessToken}` + } + }); - if (!response.ok) { - return null; - } + if (!response.ok) { + return null; + } - const users: UserResponseDto[] = await response.json(); - return users; - } catch (error) { - return null; - } + const users: UsersResponseDto = await response.json(); + return users; + } catch (error) { + return null; + } } diff --git a/src/routes/[perfil]/+page.svelte b/src/routes/[perfil]/+page.svelte index 50ea510..f536653 100644 --- a/src/routes/[perfil]/+page.svelte +++ b/src/routes/[perfil]/+page.svelte @@ -80,50 +80,7 @@
-
- -
-

diff --git a/src/routes/[perfil]/+page.ts b/src/routes/[perfil]/+page.ts index f6695b5..b91cd9d 100644 --- a/src/routes/[perfil]/+page.ts +++ b/src/routes/[perfil]/+page.ts @@ -5,11 +5,13 @@ import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js' import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js'; export async function load({ params }) { - const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil); - if(!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); + const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil); + if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); - const seguidos = await obtenerSeguidosPorUsuario(usuario.id, 3); - const seguidores = await obtenerSeguidoresPorUsuario(usuario.id, 3); + const [seguidos, seguidores] = await Promise.all([ + obtenerSeguidosPorUsuario(usuario.id, 3), + obtenerSeguidoresPorUsuario(usuario.id, 3) + ]); - return { ...usuario, seguidos, seguidores }; + return { ...usuario, seguidos, seguidores }; } diff --git a/src/types.d.ts b/src/types.d.ts index 9ce1978..e38ce95 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -84,18 +84,34 @@ export interface UserResponseDto { displayName: string; email: string; bio: string; - imageUrl: string?; + imageUrl: string?; profileImageUrl: string; followersCount: number; followingCount: number; createdAt: string; postsCount: number; } +export interface UsersResponseDto { + response: { + id: string; + username: string; + displayName: string; + email: string; + bio: string; + imageUrl?: string; + profileImageUrl: string; + followersCount: number; + followingCount: number; + createdAt: string; + postsCount: number; + }[]; + totalCount: number; +} export interface UpdateUserRequest { - username: string?; - displayName: string?; - bio: string?; - email: string?; - profileImage: File?; + username: string?; + displayName: string?; + bio: string?; + email: string?; + profileImage: File?; }