diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte new file mode 100644 index 0000000..bfaa9c5 --- /dev/null +++ b/src/lib/components/ui/badge/badge.svelte @@ -0,0 +1,50 @@ + + + + + + {@render children?.()} + diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts new file mode 100644 index 0000000..64e0aa9 --- /dev/null +++ b/src/lib/components/ui/badge/index.ts @@ -0,0 +1,2 @@ +export { default as Badge } from "./badge.svelte"; +export { badgeVariants, type BadgeVariant } from "./badge.svelte"; diff --git a/src/lib/hooks/obtenerSeguidoresPorUsuario.ts b/src/lib/hooks/obtenerSeguidoresPorUsuario.ts new file mode 100644 index 0000000..641aef3 --- /dev/null +++ b/src/lib/hooks/obtenerSeguidoresPorUsuario.ts @@ -0,0 +1,25 @@ +import { sesionStore } from "@/stores/usuario"; +import type { UserResponseDto } from "../../types"; +import { get } from "svelte/store"; +import { apiBase } from "@/stores/url"; + +export async function obtenerSeguidoresPorUsuario(Id: string): Promise { + try { + const response = await fetch(`${get(apiBase)}/api/users/${Id}/followers`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${get(sesionStore)?.accessToken}` + } + }); + + if (!response.ok) { + return null; + } + + const followers: UserResponseDto[] = await response.json(); + return followers; + } catch (error) { + return null; + } +} diff --git a/src/lib/hooks/obtenerSeguidosPorUsuario.ts b/src/lib/hooks/obtenerSeguidosPorUsuario.ts new file mode 100644 index 0000000..2c1340a --- /dev/null +++ b/src/lib/hooks/obtenerSeguidosPorUsuario.ts @@ -0,0 +1,25 @@ +import { sesionStore } from "@/stores/usuario"; +import type { UserResponseDto } from "../../types"; +import { apiBase } from "@/stores/url"; +import { get } from "svelte/store"; + +export async function obtenerSeguidosPorUsuario(id: string): Promise { + try { + const response = await fetch(`${get(apiBase)}/api/users/${id}/following`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${get(sesionStore)?.accessToken}` + } + }); + + if (!response.ok) { + return null; + } + + const users: UserResponseDto[] = await response.json(); + return users; + } catch (error) { + return null; + } +} diff --git a/src/routes/[perfil]/+page.server.ts b/src/routes/[perfil]/+page.server.ts index 641b412..9c5399f 100644 --- a/src/routes/[perfil]/+page.server.ts +++ b/src/routes/[perfil]/+page.server.ts @@ -1,11 +1,15 @@ import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario.js'; import type { User, UserResponseDto } from '../../types.js'; import { error } from '@sveltejs/kit'; +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) { - return 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); + const seguidores = await obtenerSeguidoresPorUsuario(usuario.id); + + return { ...usuario, seguidos, seguidores }; } diff --git a/src/routes/[perfil]/+page.svelte b/src/routes/[perfil]/+page.svelte index d676b13..52ecf28 100644 --- a/src/routes/[perfil]/+page.svelte +++ b/src/routes/[perfil]/+page.svelte @@ -22,6 +22,9 @@ import DialogHeader from '@/components/ui/dialog/dialog-header.svelte'; import DialogTitle from '@/components/ui/dialog/dialog-title.svelte'; import { sesionStore } from '@/stores/usuario.js'; + import CardHeader from '@/components/ui/card/card-header.svelte'; + import CardTitle from '@/components/ui/card/card-title.svelte'; + import Badge from '@/components/ui/badge/badge.svelte'; let { params } = $props(); @@ -62,7 +65,6 @@ async function handleEditar(e: SubmitEvent) { e.preventDefault(); - // post.content = 'test'; if (postAModificar == null) return; await updatePost( postAModificar, @@ -76,24 +78,53 @@
- - -
- - - {page.data.displayName[0].toUpperCase()} - -
-

- {page.data.displayName} -

-

- @{params.perfil} -

- - +
+ + +
+ + + {page.data.displayName?.[0]?.toUpperCase() || ''} + +
+

+ {page.data.displayName} +

+

+ @{params.perfil} +

+

+ {page.data.bio} +

+ + + +