fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-21 16:27:32 -03:00
Code Issues Packages Projects Releases Wiki Activity

algunos arreglos a la ui y correjido un cambio en una api

Browse Source
This commit is contained in:
fedpo
2025-12-22 20:19:42 -03:00
parent ae381c00ff
commit 252e1d0b98
7 changed files with 156 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
bun.lock
View File

@@ -4,7 +4,7 @@
"": { "": {
"name": "mini-x-front", "name": "mini-x-front",
"dependencies": { "dependencies": {
"mode-watcher": "^1.1.0", "mode-watcher": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"@internationalized/date": "^3.8.1", "@internationalized/date": "^3.8.1",
@@ -25,9 +25,9 @@
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.1.10", "vite": "^7.1.10"
}, }
}, }
}, },
"packages": { "packages": {
"@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="], "@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/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=="]
} }
} }

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

@@ -11,6 +11,9 @@
import { updateUsuario } from '@/hooks/updateUsuario'; import { updateUsuario } from '@/hooks/updateUsuario';
import { sesionStore } from '@/stores/usuario'; import { sesionStore } from '@/stores/usuario';
import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario'; 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(); let { data = $bindable() } = $props();
@@ -43,9 +46,8 @@
hoverimg = false; hoverimg = false;
} }
</script> </script>
<!-- {$inspect(data)} -->
<!-- <Button onclick={() => (cargando = !cargando)}>a</Button> --> <Card class="mb-2 flex overflow-hidden">
<Card class="mb-2 flex w-3/4 overflow-hidden">
<CardContent> <CardContent>
{#if cargando} {#if cargando}
<div class="flex flex-col items-center space-y-4"> <div class="flex flex-col items-center space-y-4">
@@ -54,31 +56,34 @@
<Skeleton class="h-16 w-3/4 rounded-full" /> <Skeleton class="h-16 w-3/4 rounded-full" />
</div> </div>
{:else if $sesionStore?.isAdmin || $sesionStore?.username == data.username} {:else if $sesionStore?.isAdmin || $sesionStore?.username == data.username}
<button <div class="w-full flex justify-center">
class="relative flex w-full items-center justify-center" <button
onmouseenter={() => (hoverimg = true)} class="relative flex items-center justify-center"
onmouseleave={() => (hoverimg = false)} onmouseenter={() => (hoverimg = true)}
onclick={cambiarFotoDePerfil} onmouseleave={() => (hoverimg = false)}
> onclick={cambiarFotoDePerfil}
<Avatar >
class={{ <Avatar
'brightness-0': hoverimg, class={{
'relative z-0 mt-2 scale-250 border-2 border-slate-950 transition-all': true 'brightness-0': hoverimg,
}} 'relative z-0 mt-2 scale-250 border-2 border-slate-950 transition-all': true
> }}
<AvatarImage src={data.imageUrl} alt="Imagen de perfil"></AvatarImage> >
<AvatarFallback class="select-none"> <AvatarImage src={data.imageUrl} alt="Imagen de perfil"></AvatarImage>
{data.displayName?.[0]?.toUpperCase() || ''} <AvatarFallback class="select-none">
</AvatarFallback> {data.displayName?.[0]?.toUpperCase() || ''}
</Avatar> </AvatarFallback>
<div </Avatar>
class="absolute inset-0 top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 transform items-center justify-center" <div
class:opacity-100={hoverimg} class="absolute inset-0 flex justify-center items-center"
class:opacity-0={!hoverimg} class:opacity-100={hoverimg}
> class:opacity-0={!hoverimg}
<Pen class="text-white" /> >
</div> <Pen class="text-white" />
</button> </div>
</button>
</div>
<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl"> <h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
{data.displayName} {data.displayName}
<p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p> <p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p>
@@ -106,6 +111,46 @@
<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground"> <p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
{data.bio} {data.bio}
</p> </p>
{/if} {/if}
<div class="flex gap-2 mt-2">
<Card class="w-full">
<CardContent>
<CardHeader class="flex justify-between">
<CardTitle>Seguidos:</CardTitle>
<Badge variant="secondary">{data.seguidos.response.length}</Badge>
</CardHeader>
<CardContent>
{#if data.seguidos.response.length === 0}
<h3>No hay Seguidos</h3>
{:else}
{#each data.seguidos.response as seguidos (seguidos.id)}
<p class="text-muted-foreground">
{seguidos.username}
</p>
{/each}
{/if}
</CardContent>
</CardContent>
</Card>
<Card class="w-full">
<CardContent>
<CardHeader class="flex justify-between">
<CardTitle>Seguidores:</CardTitle>
<Badge variant="secondary">{data.seguidores.response.length}</Badge>
</CardHeader>
<CardContent>
{#if data.seguidores.response.length === 0}
<h3>No hay Seguidores</h3>
{:else}
{#each data.seguidores.response as seguidores (seguidores.id)}
<p class="text-muted-foreground">
{seguidores.username}
</p>
{/each}
{/if}
</CardContent>
</CardContent>
</Card>
</div>
</CardContent> </CardContent>
</Card> </Card>

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

@@ -1,25 +1,28 @@
import { sesionStore } from "@/stores/usuario"; import { sesionStore } from '@/stores/usuario';
import type { UserResponseDto } from "../../types"; import type { UsersResponseDto } from '../../types';
import { get } from "svelte/store"; import { get } from 'svelte/store';
import { apiBase } from "@/stores/url"; import { apiBase } from '@/stores/url';
export async function obtenerSeguidoresPorUsuario(id: string, limit:number = 20): Promise<UserResponseDto[] | null> { export async function obtenerSeguidoresPorUsuario(
try { id: string,
const response = await fetch(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, { limit: number = 20
method: 'GET', ): Promise<UsersResponseDto | null> {
headers: { try {
'Content-Type': 'application/json', const response = await fetch(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, {
Authorization: `Bearer ${get(sesionStore)?.accessToken}` method: 'GET',
} headers: {
}); 'Content-Type': 'application/json',
Authorization: `Bearer ${get(sesionStore)?.accessToken}`
}
});
if (!response.ok) { if (!response.ok) {
return null; return null;
} }
const followers: UserResponseDto[] = await response.json(); const followers: UsersResponseDto = await response.json();
return followers; return followers;
} catch (error) { } catch (error) {
return null; return null;
} }
} }

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

@@ -1,25 +1,28 @@
import { sesionStore } from "@/stores/usuario"; import { sesionStore } from '@/stores/usuario';
import type { UserResponseDto } from "../../types"; import type { UsersResponseDto } from '../../types';
import { apiBase } from "@/stores/url"; import { apiBase } from '@/stores/url';
import { get } from "svelte/store"; import { get } from 'svelte/store';
export async function obtenerSeguidosPorUsuario(id: string, limit:number = 20): Promise<UserResponseDto[] | null> { export async function obtenerSeguidosPorUsuario(
try { id: string,
const response = await fetch(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, { limit: number = 20
method: 'GET', ): Promise<UsersResponseDto | null> {
headers: { try {
'Content-Type': 'application/json', const response = await fetch(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, {
Authorization: `Bearer ${get(sesionStore)?.accessToken}` method: 'GET',
} headers: {
}); 'Content-Type': 'application/json',
Authorization: `Bearer ${get(sesionStore)?.accessToken}`
}
});
if (!response.ok) { if (!response.ok) {
return null; return null;
} }
const users: UserResponseDto[] = await response.json(); const users: UsersResponseDto = await response.json();
return users; return users;
} catch (error) { } catch (error) {
return null; return null;
} }
} }

43
src/routes/[perfil]/+page.svelte
View File

@@ -80,50 +80,7 @@
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10"> <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
<div class="w-full max-w-6xl"> <div class="w-full max-w-6xl">
<div class="flex gap-2">
<CardPerfil bind:data /> <CardPerfil bind:data />
<aside class="flex w-1/4 flex-col gap-2">
<Card class="w-full">
<CardContent>
<CardHeader class="flex justify-between">
<CardTitle>Seguidos:</CardTitle>
<Badge variant="secondary">{data.seguidos.length}</Badge>
</CardHeader>
<CardContent>
{#if data.seguidos.length === 0}
<h3>No hay Seguidos</h3>
{:else}
{#each data.seguidos as seguidos (seguidos.id)}
<p class="text-muted-foreground">
{seguidos.username}
</p>
{/each}
{/if}
</CardContent>
</CardContent>
</Card>
<Card class="w-full">
<CardContent>
<CardHeader class="flex justify-between">
<CardTitle>Seguidores:</CardTitle>
<Badge variant="secondary">{data.seguidores.length}</Badge>
</CardHeader>
<CardContent>
{#if data.seguidores.length === 0}
<h3>No hay Seguidores</h3>
{:else}
{#each data.seguidores as seguidores (seguidores.id)}
<p class="text-muted-foreground">
{seguidores.username}
</p>
{/each}
{/if}
</CardContent>
</CardContent>
</Card>
</aside>
</div>
<h1 <h1
class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl" class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl"
> >

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

@@ -5,11 +5,13 @@ import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js'
import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js'; import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js';
export async function load({ params }) { export async function load({ params }) {
const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil); const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil);
if(!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
const seguidos = await obtenerSeguidosPorUsuario(usuario.id, 3); const [seguidos, seguidores] = await Promise.all([
const seguidores = await obtenerSeguidoresPorUsuario(usuario.id, 3); obtenerSeguidosPorUsuario(usuario.id, 3),
obtenerSeguidoresPorUsuario(usuario.id, 3)
]);
return { ...usuario, seguidos, seguidores }; return { ...usuario, seguidos, seguidores };
} }

28
src/types.d.ts vendored
View File

@@ -84,18 +84,34 @@ export interface UserResponseDto {
displayName: string; displayName: string;
email: string; email: string;
bio: string; bio: string;
imageUrl: string?; imageUrl: string?;
profileImageUrl: string; profileImageUrl: string;
followersCount: number; followersCount: number;
followingCount: number; followingCount: number;
createdAt: string; createdAt: string;
postsCount: number; 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 { export interface UpdateUserRequest {
username: string?; username: string?;
displayName: string?; displayName: string?;
bio: string?; bio: string?;
email: string?; email: string?;
profileImage: File?; profileImage: File?;
} }