hecha functionalidad para seguir usuarios desde los posts

src/lib/components/BotonSeguir.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { sesionStore } from '@/stores/usuario';
+	import { Tooltip } from './ui/tooltip';
+	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
+	import Button from './ui/button/button.svelte';
+	import UserX from '@lucide/svelte/icons/user-x';
+	import UserPlus from '@lucide/svelte/icons/user-plus';
+	import Spinner from './ui/spinner/spinner.svelte';
+	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
+	import { esSeguido } from '@/hooks/esSeguido';
+	import { seguirUsuario } from '@/hooks/seguirUsuario';
+	import type { Post } from '../../types';
+	import CardError from './CardError.svelte';
+	import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte';
+	import DialogContent from './ui/dialog/dialog-content.svelte';
+	import Dialog from './ui/dialog/dialog.svelte';
+
+	let { post }: { post: Post } = $props();
+	let seguido: Boolean | null = $state(null);
+
+	if (typeof window !== 'undefined') {
+		window.addEventListener('followCacheUpdated', ((
+			event: CustomEvent<{ userId: string; isFollowed: boolean }>
+		) => {
+			if (event.detail.userId === post.authorId) {
+				seguido = event.detail.isFollowed;
+			}
+		}) as EventListener);
+	}
+
+	$effect(() => {
+		(async () => {
+			await cargarSeguido();
+		})();
+	});
+
+	async function cargarSeguido() {
+		let a = cacheSeguidos.get(post.authorId);
+		if (a === undefined) {
+			const seguidoStatus = await esSeguido(post);
+			cacheSeguidos.set(post.authorId, seguidoStatus.isFollowing || false);
+			seguido = seguidoStatus.isFollowing || false;
+			return;
+		}
+		seguido = a;
+	}
+
+	let mensajeError: string | null = $state(null);
+</script>
+
+{#if mensajeError}
+	<CardError {mensajeError} />
+{/if}
+
+{#if post.authorName !== $sesionStore?.username && post.authorName !== '[deleted]'}
+	<Tooltip>
+		<TooltipTrigger>
+			<Button
+				variant={seguido == true ? 'destructive' : 'default'}
+				disabled={seguido == null}
+				size="icon-sm"
+				class="ml-auto rounded-full p-1 text-sm"
+				onclick={async () => {
+					if (seguido == null) return;
+					const anteriorEstado = seguido;
+					let ret = seguirUsuario(post.authorId, seguido);
+					seguido = null;
+
+					let [res] = await Promise.all([
+						await ret,
+						new Promise((resolve) => setTimeout(resolve, 300))
+					]);
+
+					if (res === null) mensajeError = 'Fallo al intentar seguir el usuario';
+					if (res === true) seguido = !anteriorEstado;
+					cacheSeguidos.set(post.authorId, seguido == null ? false : Boolean(seguido));
+				}}
+			>
+				{#if seguido == true}
+					<UserX />
+				{:else if seguido == false}
+					<UserPlus />
+				{:else}
+					<Spinner />
+				{/if}
+			</Button>
+		</TooltipTrigger>
+		<TooltipContent>
+			{#if seguido == true}
+				Dejar de seguir
+			{:else}
+				Seguir
+			{/if}
+		</TooltipContent>
+	</Tooltip>
+{/if}

src/lib/components/PostCard.svelte

@@ -32,6 +32,7 @@
 	import { likePost } from '@/hooks/likePost';
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
+	import BotonSeguir from './BotonSeguir.svelte';
 
 	interface postProp {
 		post: Post;
@@ -43,7 +44,6 @@
 
 	let cargandoBorrar = $state(false);
 	let mensajeError = $state('');
-	let cargandoEditar = $state(false);
 	let cargandoLike = $state(false);
 	let errorLike = $state(false);
 
@@ -123,6 +123,7 @@
 						<span class="text-lg text-muted-foreground">@{post.authorName}</span>
 					</div>
 				</div>
+				<BotonSeguir {post} />
 				{#if post.authorName === $sesionStore?.username}
 					<DropdownMenu>
 						<DropdownMenuTrigger>

src/lib/hooks/esSeguido.ts

@@ -0,0 +1,26 @@
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+import type { Post } from '../../types';
+import { apiBase } from '@/stores/url';
+
+export async function esSeguido(post: Post) {
+	if (!get(sesionStore)?.accessToken || post.authorName === '[deleted]') return;
+
+	const id = post.authorId;
+	try {
+		const response = await fetch(`${get(apiBase)}/api/users/${id}/is-following`, {
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+
+		if (response.ok) {
+			const data = await response.json();
+			return data;
+		} else {
+			return false;
+		}
+	} catch {
+		return null;
+	}
+}

src/lib/hooks/seguirUsuario.ts

@@ -0,0 +1,21 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+
+export async function seguirUsuario(idusuario: string, toggle: Boolean = false) {
+	try {
+		const req = await fetch(`${get(apiBase)}/api/users/${idusuario}/follow`, {
+			method: !toggle ? 'POST' : 'DELETE',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+		if (req.ok) {
+			return true;
+		} else {
+			return false;
+		}
+	} catch {
+		return null;
+	}
+}

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/+page.svelte

@@ -38,7 +38,7 @@
 <svelte:head>
 	<meta property="og:title" content="Mini-x" />
 	<meta property="og:description" content="Pagina Principal" />
-	<meta property="og:image" content="https://tusitio.com/x.png" />
+	<meta property="og:image" content="/x.png" />
 	<meta property="og:url" content="https://minix-front.vercel.app/" />
 	<meta property="og:type" content="website" />
 </svelte:head>