From b7cfa77a91ad2f05c3085ccda78ca1f1e227495d Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Mon, 29 Dec 2025 21:58:56 -0300
Subject: [PATCH] feat: borrar usaurios

---
 src/lib/components/BorrarUsuario.svelte | 46 +++++++++++++++++++++++++
 src/lib/components/PostCard.svelte      | 14 ++++----
 src/lib/components/TablaUsuarios.svelte | 36 +++++++++++++++----
 src/lib/hooks/borrarUsuario.ts          | 21 +++++++++++
 src/routes/(privado)/admin/+page.svelte |  4 ++-
 src/routes/(privado)/admin/+page.ts     |  3 +-
 src/types.d.ts                          |  1 +
 7 files changed, 110 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/BorrarUsuario.svelte
 create mode 100644 src/lib/hooks/borrarUsuario.ts

diff --git a/src/lib/components/BorrarUsuario.svelte b/src/lib/components/BorrarUsuario.svelte
new file mode 100644
index 0000000..10d0ba7
--- /dev/null
+++ b/src/lib/components/BorrarUsuario.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { Dialog } from './ui/dialog';
+	import DialogContent from './ui/dialog/dialog-content.svelte';
+	import DialogHeader from './ui/dialog/dialog-header.svelte';
+	import DialogTitle from './ui/dialog/dialog-title.svelte';
+	import Button from './ui/button/button.svelte';
+	import Spinner from './ui/spinner/spinner.svelte';
+	import { borrarUsuario } from '@/hooks/borrarUsuario';
+	import { invalidate } from '$app/navigation';
+
+	let cargando = $state(false);
+
+	let { usuario, open = $bindable() } = $props();
+
+	async function handleBorrar() {
+		if (!usuario) return;
+
+		await borrarUsuario(usuario.id);
+		open = false;
+		invalidate('admin:load');
+	}
+</script>
+
+<div transition:fade>
+	<Dialog {open} onOpenChange={() => (open = false)}>
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Borrar Usuario</DialogTitle>
+			</DialogHeader>
+			<p>¿Está seguro que desea borrar al usuario {usuario?.displayName}?</p>
+			<div class="mt-4 flex justify-between">
+				<Button variant="destructive" onclick={handleBorrar} disabled={cargando}>
+					{#if cargando}
+						<Spinner />
+					{:else}
+						Borrar
+					{/if}
+				</Button>
+				<Button variant="secondary" onclick={() => (open = false)} disabled={cargando}>
+					Cancelar
+				</Button>
+			</div>
+		</DialogContent>
+	</Dialog>
+</div>
diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte
index 3259a71..8ee383f 100644
--- a/src/lib/components/PostCard.svelte
+++ b/src/lib/components/PostCard.svelte
@@ -99,12 +99,14 @@
 		<div class="flex flex-col">
 			<div class="flex items-center justify-between">
 				<div class="flex gap-3">
-					<a href={`/${post.authorName}`}>
-						<Avatar>
-							<AvatarImage src={post.authorImageUrl}></AvatarImage>
-							<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
-						</Avatar>
-					</a>
+					{#if post.authorName !== '[deleted]'}
+						<a href={`/${post.authorName}`}>
+							<Avatar>
+								<AvatarImage src={post.authorImageUrl}></AvatarImage>
+								<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
+							</Avatar>
+						</a>
+					{/if}
 					<div class="flex space-x-2">
 						<span class="text-lg font-medium">{post.authorDisplayName}</span>
 						<span class="text-lg text-muted-foreground">@{post.authorName}</span>
diff --git a/src/lib/components/TablaUsuarios.svelte b/src/lib/components/TablaUsuarios.svelte
index 9f7552f..8524b6d 100644
--- a/src/lib/components/TablaUsuarios.svelte
+++ b/src/lib/components/TablaUsuarios.svelte
@@ -19,6 +19,8 @@
 	import { fade } from 'svelte/transition';
 	import type { Unsubscriber } from 'svelte/store';
 	import Input from './ui/input/input.svelte';
+	import Trash_2 from '@lucide/svelte/icons/trash-2';
+	import BorrarUsuario from './BorrarUsuario.svelte';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -29,6 +31,9 @@
 	let open = $state(false);
 	let openModificarUsuario = $state(false);
 
+	let openBorrar = $state(false);
+	let usuarioBorrar: UserResponseDto | null = $state(null);
+
 	//si ponia contraseña en español quedaba muy largo el nombre
 	let usuarioCambioPass: UserResponseDto | null = $state(null);
 
@@ -84,12 +89,6 @@
 		return sortDirection === 'asc' ? '↑' : '↓';
 	}
 
-	$effect(() => {
-		if (!open) {
-			usuarioCambioPass = null;
-		}
-	});
-
 	function handleCambiarContraseña(usuario: UserResponseDto) {
 		open = true;
 		usuarioCambioPass = usuario;
@@ -99,6 +98,13 @@
 		openModificarUsuario = true;
 		usuarioModificar = usuario;
 	}
+
+	function handleBorrar(usuario: UserResponseDto) {
+		openBorrar = true;
+		usuarioBorrar = usuario;
+	}
+
+	// $inspect(usuarios);
 </script>
 
 <div class="mb-4">
@@ -156,11 +162,27 @@
 							<p>Modificar Usuario</p>
 						</TooltipContent>
 					</Tooltip>
-					<Button></Button>
+					<Tooltip>
+						<TooltipTrigger>
+							<Button
+								disabled={usuario.isAdmin}
+								onclick={() => handleBorrar(usuario)}
+								variant="destructive"><Trash_2 /></Button
+							>
+						</TooltipTrigger>
+						<TooltipContent>
+							{#if usuario.isAdmin}
+								No se pueden eliminar usuarios Admin
+							{:else}
+								Eliminar Usuario
+							{/if}
+						</TooltipContent>
+					</Tooltip>
 				</TableCell>
 			</TableRow>
 		{/each}
 	</TableBody>
 </Table>
+<BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} />
 <RecuperarContraseña bind:open usuario={usuarioCambioPass} />
 <ModificarUsuario bind:open={openModificarUsuario} bind:usuario={usuarioModificar} />
diff --git a/src/lib/hooks/borrarUsuario.ts b/src/lib/hooks/borrarUsuario.ts
new file mode 100644
index 0000000..1fa61a1
--- /dev/null
+++ b/src/lib/hooks/borrarUsuario.ts
@@ -0,0 +1,21 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+
+export async function borrarUsuario(id: string) {
+	try {
+		const req = await fetch(`${get(apiBase)}/api/users/${id}`, {
+			method: 'DELETE',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+
+		if (req.ok) {
+			return true;
+		}
+		return false;
+	} catch {
+		return false;
+	}
+}
diff --git a/src/routes/(privado)/admin/+page.svelte b/src/routes/(privado)/admin/+page.svelte
index 2b9f9e1..c7df333 100644
--- a/src/routes/(privado)/admin/+page.svelte
+++ b/src/routes/(privado)/admin/+page.svelte
@@ -25,7 +25,9 @@
 				{#if page.data.usuarios.length === 0}
 					<CardDescription>No hay usuarios que mostar</CardDescription>
 				{:else}
-					<TablaUsuarios bind:usuarios></TablaUsuarios>
+					{#key page.data.usuarios}
+						<TablaUsuarios bind:usuarios></TablaUsuarios>
+					{/key}
 				{/if}
 			</CardContent>
 		</Card>
diff --git a/src/routes/(privado)/admin/+page.ts b/src/routes/(privado)/admin/+page.ts
index 84c37d1..7b54d62 100644
--- a/src/routes/(privado)/admin/+page.ts
+++ b/src/routes/(privado)/admin/+page.ts
@@ -6,7 +6,8 @@ import type { UserResponseDto } from '../../../types.js';
 
 export const ssr = false;
 
-export async function load({}) {
+export async function load({ depends }) {
+	depends('admin:load');
 	const response = await fetch(get(apiBase) + '/api/admin/users', {
 		method: 'GET',
 		headers: {
diff --git a/src/types.d.ts b/src/types.d.ts
index e38ce95..f0d647e 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -90,6 +90,7 @@ export interface UserResponseDto {
 	followingCount: number;
 	createdAt: string;
 	postsCount: number;
+	isAdmin?: bool;
 }
 export interface UsersResponseDto {
 	response: {