añadida pagina de posts

src/lib/components/PostCard.svelte

@@ -30,13 +30,16 @@
 	import DialogDescription from './ui/dialog/dialog-description.svelte';
 	import { sesionStore } from '@/stores/usuario';
 	import { likePost } from '@/hooks/likePost';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 
 	interface postProp {
 		post: Post;
 		postAModificar: Post | null;
+		update?: Function;
 	}
 
-	let { post, postAModificar = $bindable() }: postProp = $props();
+	let { post, postAModificar = $bindable(), update }: postProp = $props();
 
 	let cargandoBorrar = $state(false);
 	let mensajeError = $state('');
@@ -82,7 +85,7 @@
 			likePost(post),
 			new Promise((resolve) => setTimeout(resolve, 300))
 		]);
-		console.log(1);
+		// console.log(1);
 		if (ok) {
 			if (post.isLiked) {
 				post.likesCount--;
@@ -94,9 +97,10 @@
 			errorLike = true;
 			mensajeError = message;
 		}
-		console.log(1);
+		// console.log(2);
-		updatePostStore(post.id, post);
+		if (update) update();
-		console.log(1);
+		else updatePostStore(post.id, post);
+		// console.log(3);
 		cargandoLike = false;
 	}
 </script>
@@ -179,7 +183,12 @@
 					<ThumbsUp />
 				{/if}
 			</Button>
-			<Button variant="ghost" class="flex items-center gap-2 rounded-full bg-accent p-3 text-lg">
+
+			<Button
+				variant="ghost"
+				class="flex items-center gap-2 rounded-full bg-accent p-3 text-lg"
+				onclick={() => goto(resolve('/post/[idpost]', { idpost: post.id }))}
+			>
 				<p>
 					{post.repliesCount}
 				</p>

src/lib/components/crear-post.svelte

@@ -13,6 +13,9 @@
 	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
 	import { publicarPost } from '@/hooks/publicarPost';
 	import { filtrarImagen } from '@/utils';
+	import { invalidate } from '$app/navigation';
+
+	let { placeholder, parentPostId }: { placeholder?: string; parentPostId?: string } = $props();
 
 	let mensaje = $state('');
 	let imagen: File | null = $state(null);
@@ -29,13 +32,14 @@
 		if (imagen) {
 			formData.append('image', imagen);
 		}
-		// formData.append('parentPostId', '');
+		if (parentPostId) formData.append('parentPostId', parentPostId);
 		mostrarError = await publicarPost(formData);
 		if (mostrarError == '') {
 			mensaje = '';
 			imagen = null;
 		}
 		cargando = false;
+		if (parentPostId) invalidate('post:respuestas');
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -73,7 +77,7 @@
 			}}
 			ondrop={handleDrop}
 			maxlength={280}
-			placeholder="Alguna novedad?"
+			placeholder={placeholder ? placeholder : 'Alguna novedad?'}
 			onkeydown={handleKeydown}
 		></InputGroupTextarea>
 

src/lib/hooks/obtenerPostPorId.ts

@@ -0,0 +1,30 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+import type { Post } from '../../types';
+
+export async function obtenerPostPorId(
+	idpost: string,
+	fetch2?: Function,
+	depends?: Function
+): Promise<null | Post | string> {
+	if (idpost == '') return null;
+	if (depends) depends('post:post');
+	const fetchFn = fetch2 ? fetch2 : fetch;
+
+	try {
+		const req = await fetchFn(`${get(apiBase)}/api/posts/${idpost}`, {
+			method: 'GET',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+		let data = await req.json();
+		if (req.ok) {
+			return data;
+		}
+		return data.message;
+	} catch {
+		return 'No se pudo alcanzar el servidor.';
+	}
+}

src/lib/hooks/obtenerRespuestasPorId.ts

@@ -0,0 +1,28 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+import type { Post } from '../../types';
+
+export async function obtenerRespuestasPorId(
+	id: string,
+	fetch2?: Function,
+	depends?: Function
+): Promise<string | Post[] | null> {
+	if (depends) depends('post:respuestas');
+	const fetchFn = fetch2 ? fetch2 : fetch;
+	try {
+		const req = await fetchFn(`${get(apiBase)}/api/posts/${id}/replies`, {
+			method: 'GET',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+		if (req.ok) {
+			const data = await req.json();
+			return data;
+		}
+		return null;
+	} catch {
+		return 'No se pudo obtener del dato del servidor';
+	}
+}

src/routes/post/[idpost]/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Card from '@/components/ui/card/card.svelte';
+	import { Content } from '@/components/ui/card';
+	import Spinner from '@/components/ui/spinner/spinner.svelte';
+	import type { Post, PostResponseDto } from '../../../types';
+	import PostCard from '@/components/PostCard.svelte';
+	import ModalEditar from '../../[perfil]/modalEditar.svelte';
+	import { fade } from 'svelte/transition';
+	import { updatePost } from '@/hooks/updatePost';
+	import { invalidate } from '$app/navigation';
+	import Separator from '@/components/ui/separator/separator.svelte';
+	import CrearPost from '@/components/crear-post.svelte';
+
+	interface Prop {
+		data: {
+			post: Post;
+		};
+	}
+
+	let { data }: Prop = $props();
+	// $inspect(data);
+	let postAModificar: Post | null = $state(null);
+
+	async function handleEditar(e: SubmitEvent) {
+		e.preventDefault();
+		if (postAModificar == null) return;
+		await updatePost(postAModificar, (postnuevo: Post) => invalidate('post:post'), '');
+		postAModificar = null;
+	}
+</script>
+
+<svelte:head>
+	<title
+		>@{data.post.authorName} - {data.post?.content.substring(0, 7) ?? 'Post'}{data.post?.content
+			.length > 7
+			? '...'
+			: ''}
+	</title>
+	<meta name="og:description" content={data.post?.content?.slice(0, 150)} />
+	<!-- <meta name="og:image" content=""> -->
+</svelte:head>
+
+<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
+	<div class="w-full max-w-6xl">
+		{#if data.post}
+			<div class="sticky top-0 z-10 w-full rounded-xl bg-background p-2">
+				<PostCard post={data.post} bind:postAModificar update={() => invalidate('post:post')} />
+			</div>
+		{:else}
+			<Card>
+				<Content class="flex items-center gap-2">
+					<Spinner class="h-6 w-6" />
+					<span>Cargando post…</span>
+				</Content>
+			</Card>
+		{/if}
+		<div class="my-4">
+			<Separator></Separator>
+		</div>
+		<CrearPost placeholder={`Responder a @${data.post.authorName}`} parentPostId={data.post.id} />
+
+		<div class="my-4">
+			<Separator></Separator>
+		</div>
+
+		<div class="flex flex-col gap-2">
+			{#each data.respuestas as respuesta}
+				<PostCard post={respuesta} bind:postAModificar update={() => invalidate('post:post')} />
+			{/each}
+		</div>
+	</div>
+</div>
+{#if postAModificar}
+	<div in:fade>
+		<ModalEditar callbackfn={handleEditar} bind:post={postAModificar} />
+	</div>
+{/if}
+
+{#snippet Respuesta()}{/snippet}

src/routes/post/[idpost]/+page.ts

@@ -0,0 +1,18 @@
+import { obtenerPostPorId } from '@/hooks/obtenerPostPorId.js';
+import { obtenerRespuestasPorId } from '@/hooks/obtenerRespuestasPorId';
+import { error } from '@sveltejs/kit';
+
+export async function load({ params, fetch, depends }) {
+	let ret = await obtenerPostPorId(params.idpost, fetch, depends);
+	if (ret == null) return error(404, 'no existe un post con ese id.');
+	if (typeof ret == 'string') return error(500, ret);
+
+	let respuestas = await obtenerRespuestasPorId(params.idpost, fetch, depends);
+	if (respuestas == null) return error(404, 'no existe un post con ese id.');
+	if (typeof respuestas == 'string') return error(500, respuestas);
+
+	return {
+		post: ret,
+		respuestas: respuestas
+	};
+}