Merge pull request #90 from emailerfacu-spec/dev

Dev

src/lib/components/BotonSeguir.svelte

@@ -11,7 +11,7 @@
 	import { seguirUsuario } from '@/hooks/seguirUsuario';
 	import type { Post } from '../../types';
 	import CardError from './CardError.svelte';
-	import { cacheSeguidos } from '@/stores/cacheSeguidos.js';
+	import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte';
 
 	let {
 		post,
@@ -41,13 +41,16 @@
 	});
 
 	async function cargarSeguido() {
-		seguido = await cacheSeguidos.getOrFetch(
-			post.authorId,
-			async () => {
-				const seguidoStatus = await esSeguido(post as Post);
-				return seguidoStatus?.isFollowing || false;
+		let a = cacheSeguidos.get(post.authorId);
+		if (a === undefined) {
+			const seguidoStatus = await esSeguido(post as Post);
+			if (seguidoStatus) {
+				cacheSeguidos.set(post.authorId, seguidoStatus.isFollowing || false);
+				seguido = seguidoStatus.isFollowing || false;
 			}
-		);
+			return;
+		}
+		seguido = a;
 	}
 
 	let mensajeError: string | null = $state(null);

src/lib/components/TablaUsuarios.svelte

@@ -16,7 +16,12 @@
 	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
 	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
 	import RecuperarContraseña from './admin/RecuperarContraseña.svelte';
+	import { Dialog } from './ui/dialog';
+	import DialogContent from './ui/dialog/dialog-content.svelte';
 	import ModificarUsuario from './admin/ModificarUsuario.svelte';
+	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';
 	import InputGroup from './ui/input-group/input-group.svelte';
@@ -25,7 +30,6 @@
 	import AgregarUsuario from './admin/AgregarUsuario.svelte';
 	import DarAdmin from './admin/DarAdmin.svelte';
 	import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios';
-	import { invalidate, replaceState } from '$app/navigation';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -34,17 +38,7 @@
 
 	let { usuarios = $bindable(), hayMas }: Props = $props();
 
-	let paginaActual = $derived.by(() => {
-		const url = new URL(window.location.href);
-		return Number(url.searchParams.get('p')) || 1;
-	});
-	let search = $derived.by(() => {
-		const url = new URL(window.location.href);
-		let ret = url.searchParams.get('q') || '';
-		return ret;
-	});
-	let hayMass = $derived(hayMas);
-
+	let hayMass = $state(hayMas);
 	let open = $state(false);
 	let openModificarUsuario = $state(false);
 	let openDarAdmin = $state(false);
@@ -56,11 +50,13 @@
 	let usuarioModificar: UserResponseDto | null = $state(null);
 	let usuarioDarAdmin: UserResponseDto | null = $state(null);
 
+	let search = $state('');
+
 	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
 	let sortBy = $state<SortKey | null>(null);
 	let sortDirection = $state<'asc' | 'desc'>('asc');
 
-	let usuariosFiltrados = $derived(usuarios);
+	let usuariosFiltrados = $state(usuarios);
 
 	function ordenarPor(campo: SortKey) {
 		if (sortBy === campo) {
@@ -96,6 +92,26 @@
 		return sortDirection === 'asc' ? '↑' : '↓';
 	}
 
+	function handleCambiarContraseña(usuario: UserResponseDto) {
+		open = true;
+		usuarioCambioPass = usuario;
+	}
+
+	function handleModificar(usuario: UserResponseDto) {
+		openModificarUsuario = true;
+		usuarioModificar = usuario;
+	}
+
+	function handleBorrar(usuario: UserResponseDto) {
+		openBorrar = true;
+		usuarioBorrar = usuario;
+	}
+
+	function handleDarAdmin(usuario: UserResponseDto) {
+		openDarAdmin = true;
+		usuarioDarAdmin = usuario;
+	}
+
 	// $inspect(usuarios);
 	let timeoutId: ReturnType<typeof setTimeout> | number | undefined;
 	function buscarUsuarios() {
@@ -104,17 +120,11 @@
 		}
 
 		timeoutId = setTimeout(async () => {
-			const url = new URL(window.location.href);
-			if (!search.trim()) {
-				url.searchParams.delete('q');
-			} else {
-				url.searchParams.set('q', search);
+			if (search === '') {
+				search = '';
 			}
-			replaceState(url, {});
-
 			let ret = await busquedaAdminUsuarios(search, ITEMS_POR_PAGINA, paginaActual);
 			usuariosFiltrados = ret.usuarios;
-			// invalidate('admin:load');
 			hayMass = ret.hayMas;
 		}, 200);
 
@@ -124,6 +134,8 @@
 	}
 	const ITEMS_POR_PAGINA = 5;
 
+	let paginaActual = $state(1);
+
 	// const usuariosPaginados = $derived(
 	// 	usuariosFiltrados.slice((paginaActual - 1) * ITEMS_POR_PAGINA, paginaActual * ITEMS_POR_PAGINA)
 	// );
@@ -184,11 +196,7 @@
 					<TableCell class="flex gap-2">
 						<Tooltip>
 							<TooltipTrigger>
-								<Button
-									onclick={() => {
-										open = true;
-										usuarioCambioPass = usuario;
-									}}><KeyIcon></KeyIcon></Button
+								<Button onclick={() => handleCambiarContraseña(usuario)}><KeyIcon></KeyIcon></Button
 								>
 							</TooltipTrigger>
 							<TooltipContent>
@@ -197,12 +205,7 @@
 						</Tooltip>
 						<Tooltip>
 							<TooltipTrigger>
-								<Button
-									onclick={() => {
-										openModificarUsuario = true;
-										usuarioModificar = usuario;
-									}}><UserPen /></Button
-								>
+								<Button onclick={() => handleModificar(usuario)}><UserPen /></Button>
 							</TooltipTrigger>
 							<TooltipContent>
 								<p>Modificar Usuario</p>
@@ -212,10 +215,7 @@
 							<TooltipTrigger>
 								<Button
 									disabled={usuario.isAdmin}
-									onclick={() => {
-										openBorrar = true;
-										usuarioBorrar = usuario;
-									}}
+									onclick={() => handleBorrar(usuario)}
 									variant="destructive"><Trash_2 /></Button
 								>
 							</TooltipTrigger>
@@ -231,10 +231,7 @@
 						<Tooltip>
 							<TooltipTrigger>
 								<Button
-									onclick={() => {
-										openDarAdmin = true;
-										usuarioDarAdmin = usuario;
-									}}
+									onclick={() => handleDarAdmin(usuario)}
 									variant={usuario.isAdmin ? 'destructive' : 'default'}
 								>
 									<Shield />
@@ -258,9 +255,7 @@
 	<Button
 		disabled={paginaActual === 1}
 		onclick={() => {
-			const url = new URL(window.location.href);
-			url.searchParams.set('p', String(--paginaActual));
-			replaceState(url, {});
+			paginaActual--;
 			buscarUsuarios();
 		}}
 		variant="secondary"
@@ -271,9 +266,7 @@
 	<Button
 		disabled={!hayMass}
 		onclick={() => {
-			const url = new URL(window.location.href);
-			url.searchParams.set('p', String(++paginaActual));
-			replaceState(url, {});
+			paginaActual++;
 			buscarUsuarios();
 		}}
 		variant="secondary">Siguiente</Button

src/lib/components/admin/DarAdmin.svelte

@@ -30,7 +30,13 @@
 		}}
 	>
 		<DialogContent>
-			{mensajeResultado}
+			<div
+				class={esExitoso
+					? 'rounded border border-green-400 bg-green-100/10 px-4 py-3 text-green-700'
+					: 'rounded border border-red-400 bg-red-100/10 px-4 py-3 text-red-700'}
+			>
+				{mensajeResultado}
+			</div>
 		</DialogContent>
 	</Dialog>
 {/if}

src/lib/components/admin/ModificarUsuario.svelte

@@ -10,7 +10,6 @@
 	import Label from '../ui/label/label.svelte';
 	import Spinner from '../ui/spinner/spinner.svelte';
 	import { updateUsuario } from '@/hooks/updateUsuario';
-	import { invalidate } from '$app/navigation';
 
 	interface Prop {
 		open: boolean;
@@ -39,7 +38,6 @@
 			error = ret;
 		} else {
 			usuario!.displayName = ret.displayName;
-			invalidate('admin:load');
 			open = false;
 		}
 		cargando = false;

src/lib/hooks/busquedaAdminUsuarios.ts

@@ -2,10 +2,9 @@ import { apiBase } from '@/stores/url';
 import { sesionStore } from '@/stores/usuario';
 import { get } from 'svelte/store';
 
-export async function busquedaAdminUsuarios(q: string, limit = 5, page = 1, fetch2?: Function) {
+export async function busquedaAdminUsuarios(q: string, limit = 5, page = 1) {
 	try {
-		const fetchFn = fetch2 ? fetch2 : fetch;
-		const response = await fetchFn(
+		const response = await fetch(
 			get(apiBase) +
 				`/api/admin/users${q ? `?q=${q}` : ''}${q ? '&' : '?'}page=${page}&pageSize=${limit}`,
 			{

src/lib/hooks/logout.ts

@@ -1,5 +1,5 @@
 import { goto } from '$app/navigation';
-import { cacheSeguidos } from '@/stores/cacheSeguidos';
+import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte';
 import { apiBase } from '@/stores/url';
 import { sesionStore } from '@/stores/usuario';
 import { get } from 'svelte/store';

src/lib/stores/cacheSeguidos.js

@@ -1,134 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-class FollowCache {
-	constructor() {
-		if (browser) {
-			this.loadFromStorage();
-		}
-	}
-
-	/** @type {Map<string, boolean | Promise<boolean>>} */
-	#cache = new Map();
-
-	/** @type {import('svelte/store').Writable<Map<string, boolean>>} */
-	store = writable(new Map());
-
-	/** @param {string} userId */
-	get(userId) {
-		const value = this.#cache.get(userId);
-		return value instanceof Promise ? undefined : value;
-	}
-
-  	/** @param {string} userId */
-	has(userId) {
-		return this.#cache.has(userId);
-	}
-
-	/**
-	 * @param {string} userId
-	 * @param {() => Promise<boolean>} fetchFn
-	 */
-	async getOrFetch(userId, fetchFn) {
-		const existing = this.#cache.get(userId);
-
-		if (existing !== undefined) {
-			if (existing instanceof Promise) {
-				return existing;
-			}
-			return existing;
-		}
-
-		const promise = fetchFn()
-			.then((result) => {
-				this.#setFinal(userId, result);
-				return result;
-			})
-			.catch((err) => {
-				this.#cache.delete(userId);
-				this.#updateStore();
-				throw err;
-			});
-
-		this.#cache.set(userId, promise);
-		this.#updateStore();
-
-		return promise;
-	}
-
-	/**
-	 * @param {string} userId
-	 * @param {boolean} isFollowed
-	 */
-	set(userId, isFollowed) {
-		this.#setFinal(userId, isFollowed);
-	}
-
-	/**
-	 * @param {string} userId
-	 * @param {boolean} value
-	 */
-	#setFinal(userId, value) {
-		this.#cache.set(userId, value);
-		this.#updateStore();
-		this.saveToStorage();
-
-		if (browser) {
-			window.dispatchEvent(
-				new CustomEvent('followCacheUpdated', {
-					detail: { userId, isFollowed: value }
-				})
-			);
-		}
-	}
-
-	#updateStore() {
-		const filtered = Array.from(this.#cache.entries())
-			.filter(([_, v]) => typeof v === 'boolean');
-
-		this.store.set(
-			/** @type {Map<string, boolean>} */
-			(new Map(filtered))
-		);
-	}
-
-	/** @param {string} userId */
-	delete(userId) {
-		this.#cache.delete(userId);
-		this.#updateStore();
-		this.saveToStorage();
-	}
-
-	clear() {
-		this.#cache.clear();
-		this.store.set(new Map());
-		this.saveToStorage();
-	}
-
-	saveToStorage() {
-		if (!browser) return;
-		const filtered = Array.from(this.#cache.entries())
-			.filter(([_, v]) => typeof v === 'boolean');
-
-		const data = Object.fromEntries(filtered);
-		sessionStorage.setItem('follow-cache', JSON.stringify(data));
-	}
-
-	loadFromStorage() {
-		if (!browser) return;
-
-		try {
-			const stored = sessionStorage.getItem('follow-cache');
-			if (!stored) return;
-			const data = JSON.parse(stored);
-
-			this.#cache = new Map(Object.entries(data));
-			this.#updateStore();
-
-		} catch (err) {
-			console.error('Error cargando follow-cache:', err);
-		}
-	}
-}
-
-export const cacheSeguidos = new FollowCache();

src/lib/stores/cacheSeguidos.svelte.js

@@ -0,0 +1,105 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+class FollowCache {
+	constructor() {
+		if (browser) {
+			this.loadFromStorage();
+		}
+	}
+
+	/** @type {Map<string, boolean>} */
+	#cache = new Map();
+
+	/** @type {import('svelte/store').Writable<Map<string, boolean>>} */
+	store = writable(this.#cache);
+
+	/**
+	 * @param {string} userId
+	 * @returns {boolean | undefined}
+	 */
+	get(userId) {
+		return this.#cache.get(userId);
+	}
+
+	/**
+	 * @param {string} userId
+	 * @param {boolean} isFollowed
+	 */
+	set(userId, isFollowed) {
+		this.#cache.set(userId, isFollowed);
+		this.store.set(this.#cache);
+		this.saveToStorage();
+
+		if (browser) {
+			window.dispatchEvent(
+				new CustomEvent('followCacheUpdated', {
+					detail: { userId, isFollowed }
+				})
+			);
+		}
+	}
+
+	/**
+	 * @param {string} userId
+	 * @returns {boolean}
+	 */
+	has(userId) {
+		return this.#cache.has(userId);
+	}
+
+	/**
+	 * @param {string} userId
+	 */
+	delete(userId) {
+		this.#cache.delete(userId);
+		this.store.set(this.#cache);
+		this.saveToStorage();
+
+		if (browser) {
+			window.dispatchEvent(
+				new CustomEvent('followCacheUpdated', {
+					detail: { userId, isFollowed: false }
+				})
+			);
+		}
+	}
+
+	clear() {
+		this.#cache.clear();
+		this.store.set(this.#cache);
+		this.saveToStorage();
+
+		if (browser) {
+			window.dispatchEvent(
+				new CustomEvent('followCacheUpdated', {
+					detail: { clearAll: true }
+				})
+			);
+		}
+	}
+
+	saveToStorage() {
+		if (browser) {
+			const data = Object.fromEntries(this.#cache);
+			sessionStorage.setItem('follow-cache', JSON.stringify(data));
+		}
+	}
+
+	loadFromStorage() {
+		if (browser) {
+			try {
+				const stored = sessionStorage.getItem('follow-cache');
+				if (stored) {
+					const data = JSON.parse(stored);
+					this.#cache = new Map(Object.entries(data));
+					this.store.set(this.#cache);
+				}
+			} catch (error) {
+				console.error('Error cargando desde sesion:', error);
+			}
+		}
+	}
+}
+
+export const cacheSeguidos = new FollowCache();

src/routes/(privado)/admin/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import CardContent from '@/components/ui/card/card-content.svelte';
 	import Card from '@/components/ui/card/card.svelte';
+	import CardDescription from '@/components/ui/card/card-description.svelte';
 	import TablaUsuarios from '@/components/TablaUsuarios.svelte';
 	import CardTitle from '@/components/ui/card/card-title.svelte';
 	import CardHeader from '@/components/ui/card/card-header.svelte';
@@ -8,7 +9,7 @@
 
 	interface Prop {
 		data: {
-			usuarios: UserResponseDto[];
+			usuarios?: UserResponseDto[];
 			hayMas: boolean;
 			error: boolean;
 		};
@@ -28,7 +29,11 @@
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
-				<TablaUsuarios usuarios={data.usuarios} hayMas={data.hayMas}></TablaUsuarios>
+				{#if data.usuarios?.length === 0}
+					<CardDescription>No hay usuarios que mostar</CardDescription>
+				{:else}
+					<TablaUsuarios usuarios={data.usuarios || []} hayMas={data.hayMas}></TablaUsuarios>
+				{/if}
 			</CardContent>
 		</Card>
 	</div>

src/routes/(privado)/admin/+page.ts

@@ -1,27 +1,19 @@
-import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios.js';
 import type { PageLoad } from './$types.js';
 import { fetchUsuariosAdmin } from '@/hooks/UsuariosAdmin.js';
 
 export const ssr = false;
 
-export const load: PageLoad = async ({ depends, fetch }) => {
+export const load: PageLoad = async ({ depends }) => {
 	depends('admin:load');
-	let url = new URL(location.href);
-	let query = url.searchParams.get('q') ?? '';
-	let page = Number(url.searchParams.get('p'));
-	if (isNaN(page) || page < 1) {
-		page = 1;
-	}
-
-	const result = await busquedaAdminUsuarios(query, 5, page, fetch);
+	const result = await fetchUsuariosAdmin(1, 5);
 
 	if (result.error) {
 		return { error: true };
 	}
 
 	return {
-		usuarios: result.usuarios,
-		hayMas: result.hayMas,
+		usuarios: result.ret?.usuarios,
+		hayMas: result.ret?.hayMas,
 		error: false
 	};
 };