añadido editar y eliminar posts

src/lib/components/PostCard.svelte

@@ -15,35 +15,90 @@
 	import DropdownMenuLabel from './ui/dropdown-menu/dropdown-menu-label.svelte';
 	import DropdownMenuSeparator from './ui/dropdown-menu/dropdown-menu-separator.svelte';
 	import DropdownMenuItem from './ui/dropdown-menu/dropdown-menu-item.svelte';
+	import Avatar from './ui/avatar/avatar.svelte';
+	import AvatarImage from './ui/avatar/avatar-image.svelte';
+	import AvatarFallback from './ui/avatar/avatar-fallback.svelte';
+	import { deletePost } from '@/hooks/deletePost';
+	import Spinner from './ui/spinner/spinner.svelte';
+	import { removePost, updatePostStore } from '@/stores/posts';
+	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 DialogDescription from './ui/dialog/dialog-description.svelte';
+	import { updatePost } from '@/hooks/updatePost';
+	import { sesionStore } from '@/stores/usuario';
 
 	interface postProp {
 		post: Post;
+		postAModificar: Post | null;
 	}
 
-	let { post }: postProp = $props();
+	let { post, postAModificar = $bindable() }: postProp = $props();
+
+	let cargandoBorrar = $state(false);
+	let mensajeError = $state('');
+	let cargandoEditar = $state(false);
+
+	async function handleBorrar() {
+		await deletePost(
+			post,
+			() => {
+				removePost(post.id);
+			},
+			cargandoBorrar,
+			mensajeError
+		);
+	}
+
+	async function handleEditar() {
+		postAModificar = post;
+	}
 </script>
 
 <Card>
 	<CardHeader>
 		<div class="flex flex-col">
 			<div class="flex items-center justify-between">
-				<span class="text-sm font-medium">{post.authorId}</span>
-				<DropdownMenu>
-					<DropdownMenuTrigger>
-						<Button variant="ghost" class="rounded-full"><Ellipsis /></Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent>
-						<DropdownMenuGroup>
-							<DropdownMenuLabel>Opciones Publicación</DropdownMenuLabel>
-							<DropdownMenuSeparator />
-							<DropdownMenuItem><Pen /> Editar</DropdownMenuItem>
-							<DropdownMenuItem onclick={() => {}}>
-								<Trash2 class="text-red-500" />
-								<p class="text-red-500">Borrar</p>
-							</DropdownMenuItem>
-						</DropdownMenuGroup>
-					</DropdownMenuContent>
-				</DropdownMenu>
+				<div class="flex gap-3">
+					<Avatar>
+						<AvatarImage></AvatarImage>
+						<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
+					</Avatar>
+					<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>
+					</div>
+				</div>
+				{#if post.authorName === $sesionStore?.username}
+					<DropdownMenu>
+						<DropdownMenuTrigger>
+							<Button variant="ghost" class="rounded-full"><Ellipsis /></Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent>
+							<DropdownMenuGroup>
+								<DropdownMenuLabel>Opciones Publicación</DropdownMenuLabel>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem class="flex gap-2" onclick={() => handleEditar()}>
+									<Pen /> Editar
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									class="flex gap-2"
+									onclick={() => {
+										handleBorrar();
+									}}
+								>
+									{#if cargandoBorrar}
+										<Spinner class="text-red-500" />
+									{:else}
+										<Trash2 class="text-red-500" />
+									{/if}
+									<p class="text-red-500">Borrar</p>
+								</DropdownMenuItem>
+							</DropdownMenuGroup>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				{/if}
 			</div>
 		</div>
 	</CardHeader>
@@ -66,3 +121,15 @@
 		</div>
 	</CardFooter>
 </Card>
+{#if mensajeError}
+	<Dialog>
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Hubo un fallo</DialogTitle>
+				<DialogDescription>
+					{mensajeError}
+				</DialogDescription>
+			</DialogHeader>
+		</DialogContent>
+	</Dialog>
+{/if}

src/lib/components/crear-post.svelte

@@ -30,7 +30,7 @@
 				//credentials: 'include',
 				headers: {
 					'Content-Type': 'application/json',
-					"Authorization": `Bearer ${$sesionStore?.accessToken}`
+					Authorization: `Bearer ${$sesionStore?.accessToken}`
 				},
 
 				body: JSON.stringify(data)
@@ -51,11 +51,21 @@
 			cargando = false;
 		}
 	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.ctrlKey && e.key === 'Enter') {
+			handlePost(e);
+		}
+	}
 </script>
 
 <form onsubmit={(e: Event) => handlePost(e)}>
 	<InputGroup>
-		<InputGroupTextarea bind:value={mensaje} maxlength="280" placeholder="Alguna novedad?"
+		<InputGroupTextarea
+			bind:value={mensaje}
+			maxlength="280"
+			placeholder="Alguna novedad?"
+			onkeydown={handleKeydown}
 		></InputGroupTextarea>
 
 		<InputGroupAddon align="block-end" class="bg-">

src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>

src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};