snashot de como tenia las cosas cuando fallaba la invalidacion de ruta

2026-04-01 13:10:44 -03:00 · 2025-12-23 16:47:41 -03:00
parent e93148ad75
commit f8b25e9011
7 changed files with 172 additions and 71 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,7 +3,10 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"plugins": [
+		"prettier-plugin-svelte",
+		"prettier-plugin-tailwindcss"
+	],
 	"overrides": [
 		{
 			"files": "*.svelte",
--- a/bun.lock
+++ b/bun.lock
@@ -1,10 +1,11 @@
 {
  "lockfileVersion": 1,
+  "configVersion": 0,
  "workspaces": {
    "": {
      "name": "mini-x-front",
      "dependencies": {
-        "mode-watcher": "^1.1.0"
+        "mode-watcher": "^1.1.0",
      },
      "devDependencies": {
        "@internationalized/date": "^3.8.1",
@@ -15,9 +16,9 @@
        "@tailwindcss/vite": "^4.1.14",
        "bits-ui": "^2.11.0",
        "clsx": "^2.1.1",
-        "prettier": "^3.6.2",
+        "prettier": "^3.7.4",
        "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.7.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
        "svelte": "^5.41.0",
        "svelte-check": "^4.3.3",
        "tailwind-merge": "^3.3.1",
@@ -25,9 +26,9 @@
        "tailwindcss": "^4.1.14",
        "tw-animate-css": "^1.4.0",
        "typescript": "^5.9.3",
-        "vite": "^7.1.10"
-      }
-    }
+        "vite": "^7.1.10",
+      },
+    },
  },
  "packages": {
    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
@@ -368,11 +369,11 @@

    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],

-    "prettier": ["prettier@3.6.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ=="],
+    "prettier": ["prettier@3.7.4", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA=="],

    "prettier-plugin-svelte": ["prettier-plugin-svelte@3.4.0", "", { "peerDependencies": { "prettier": "^3.0.0", "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ=="],

-    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.7.1", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-svelte"] }, "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ=="],
+    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.7.2", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-svelte"] }, "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA=="],

    "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],

@@ -490,6 +491,6 @@

    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

-    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="]
+    "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
  }
 }
--- a/package.json
+++ b/package.json
@@ -22,9 +22,9 @@
 		"@tailwindcss/vite": "^4.1.14",
 		"bits-ui": "^2.11.0",
 		"clsx": "^2.1.1",
-		"prettier": "^3.6.2",
+		"prettier": "^3.7.4",
 		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.7.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
 		"svelte": "^5.41.0",
 		"svelte-check": "^4.3.3",
 		"tailwind-merge": "^3.3.1",
--- a/src/lib/components/CardPerfil.svelte
+++ b/src/lib/components/CardPerfil.svelte
@@ -20,6 +20,7 @@
 	let cargando = $state(false);
 	let hoverimg = $state(false);
 	let image: File | null = $state(null);
+	let usu = $state({displayName: data.displayName, bio: data.bio})

 	async function cambiarFotoDePerfil() {
 		const input = document.createElement('input');
@@ -85,11 +86,11 @@
    		</div>

 			<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
-				{data.displayName}
+				{usu.displayName}
 				<p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p>
 			</h1>
-			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
-				{data.bio}
+			<p class="mt-4 rounded-4xl bg-accent p-4 text-center text-muted-foreground">
+				{@html usu.bio.replaceAll("\n", "<br>")}
 			</p>
 		{:else}
 			<div class="relative flex w-full items-center justify-center">
@@ -106,11 +107,11 @@
 				</Avatar>
 			</div>
 			<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
-				{data.displayName}
+				{usu.displayName}
 				<p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p>
 			</h1>
-			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
-				{data.bio}
+			<p class="mt-4 rounded-4xl bg-accent p-4 text-center text-muted-foreground">
+				{@html usu.bio.replaceAll("\n", "<br>")}
 			</p>
 			{/if}
 		<div class="flex gap-2 mt-2">
--- a/src/lib/components/DialogModificarUsuario.svelte
+++ b/src/lib/components/DialogModificarUsuario.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import UserPen from "@lucide/svelte/icons/user-pen";
+	import Button, { buttonVariants } from "./ui/button/button.svelte";
+	import { Dialog } from "./ui/dialog";
+	import DialogTrigger from "./ui/dialog/dialog-trigger.svelte";
+	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 type { UserResponseDto } from "../../types";
+	import Input from "./ui/input/input.svelte";
+	import Field from "./ui/field/field.svelte";
+	import FieldLabel from "./ui/field/field-label.svelte";
+	import Textarea from "./ui/textarea/textarea.svelte";
+	import FieldGroup from "./ui/field/field-group.svelte";
+	import { updateUsuario } from "@/hooks/updateUsuario";
+	import DialogFooter from "./ui/dialog/dialog-footer.svelte";
+	import Spinner from "./ui/spinner/spinner.svelte";
+	import { invalidate, invalidateAll } from "$app/navigation";
+	import { page } from "$app/state";
+
+	let { data = $bindable() } = $props();
+
+	let usuario: UserResponseDto = $state({
+	    id: data.id,
+		username: data.username,
+		displayName: data.displayName,
+		bio: data.bio,
+		profileImageUrl: data.profileImageUrl
+	});
+
+	let cargando = $state(false);
+	let open = $state(false);
+
+	async function onsubmit(e:SubmitEvent | null) {
+     	if (e != null) e.preventDefault();
+		cargando = true;
+		await updateUsuario({
+		    id: usuario.id,
+			profileImage: false,
+		    bio: usuario.bio,
+			displayName: usuario.displayName,
+			profileImageUrl: usuario.profileImageUrl
+		});
+		cargando = false;
+		open = false;
+		// invalidateAll();
+		invalidate(page.url);
+	}
+
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.ctrlKey && e.key === 'Enter') {
+			onsubmit(null);
+		}
+	}
+</script>
+
+<Dialog bind:open>
+    <DialogTrigger>
+        <div class="fixed bottom-8 right-8">
+            <Button variant="default" size="icon-lg" >
+                <UserPen/>
+            </Button>
+        </div>
+    </DialogTrigger>
+    <form {onsubmit}>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>
+                    <h1 class="text-2xl font-bold">Modificar Usuario</h1>
+                </DialogTitle>
+            </DialogHeader>
+            <FieldGroup {onkeydown}>
+                <Field>
+                    <FieldLabel>
+                        Nombre
+                    </FieldLabel>
+                    <Input id="displayName" type="text" bind:value={usuario.displayName} required />
+                </Field>
+                <Field>
+                    <FieldLabel>
+                        bio
+                    </FieldLabel>
+                    <Textarea id="bio" bind:value={usuario.bio}>
+
+                    </Textarea>
+                </Field>
+                <Field>
+                    <FieldLabel>Email</FieldLabel>
+                    <Input id="email" type="email" bind:value={usuario.email} />
+                </Field>
+            </FieldGroup>
+            <DialogFooter>
+                <Button type="submit">
+                    {#if cargando}
+                       	<Spinner/>
+                    {:else}
+                        Modificar
+                    {/if}
+                    </Button>
+            </DialogFooter>
+        </DialogContent>
+    </form>
+</Dialog>
--- a/src/lib/hooks/updateUsuario.ts
+++ b/src/lib/hooks/updateUsuario.ts
@@ -1,48 +1,50 @@
-import { apiBase } from "@/stores/url"
-import { sesionStore } from "@/stores/usuario"
-import { get } from "svelte/store"
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';

 export interface AdminUpdateUsuario {
-  id:string,
-  displayName: string | null,
-  bio: string | null,
-  profileImage:boolean,
-  image:File,
-  profileImageUrl:string|null
+	id: string;
+	displayName: string | null;
+	bio: string | null;
+	profileImage: boolean;
+	image: File;
+	profileImageUrl: string | null;
 }

 export async function updateUsuario(usuario: Partial<AdminUpdateUsuario>) {
-
 	const formData = new FormData();
 	if (usuario.displayName) formData.append('displayName', usuario.displayName);
 	if (usuario.bio) formData.append('bio', usuario.bio);
-  if (usuario.image) formData.append('profileImage', usuario.image);
 	if (usuario.profileImage) {
 		if (usuario.profileImageUrl) formData.append('profileImageUrl', 'null');
 	} else {
-    if (usuario.profileImageUrl) formData.append('profileImageUrl', usuario.profileImageUrl);
+		if (usuario.profileImageUrl) {
+			formData.append('profileImageUrl', usuario.profileImageUrl);
+		} else {
+			if (usuario.image) formData.append('profileImage', usuario.image);
+		}
 	}

 	try {
-    const req = await fetch(get(apiBase) + "/api/users/"+usuario.id, {
-      method: "PUT",
+		const req = await fetch(get(apiBase) + '/api/users/' + usuario.id, {
+			method: 'PUT',
 			headers: {
 				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
 			},
-      body: formData,
+			body: formData
 		});
 		if (req.status === 204) {
 			let ret = {
 				// bio: usuario.bio,
-        displayName: usuario.displayName,
+				displayName: usuario.displayName
 				// oldImageUrl: usuario.oldImageUrl,
-      }
+			};
 			return ret;
 		}
 		const dataa = await req.json();

 		return dataa.message;
 	} catch {
-    return "No se pudo alcanzar el servidor"
+		return 'No se pudo alcanzar el servidor';
 	}
 }
--- a/src/routes/[perfil]/+page.svelte
+++ b/src/routes/[perfil]/+page.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
 	import { apiBase } from '@/stores/url';
-	import Ban from '@lucide/svelte/icons/ban';
 	import PenLine from '@lucide/svelte/icons/pen-line';
-	import Card from '@/components/ui/card/card.svelte';
-	import { CardContent } from '@/components/ui/card';
 	import type { Post } from '../../types.js';
 	import { fade, slide } from 'svelte/transition';
 	import PostCard from '@/components/PostCard.svelte';
@@ -17,13 +14,10 @@
 	import DialogContent from '@/components/ui/dialog/dialog-content.svelte';
 	import DialogTitle from '@/components/ui/dialog/dialog-title.svelte';
 	import { sesionStore } from '@/stores/usuario.js';
-	import CardHeader from '@/components/ui/card/card-header.svelte';
-	import CardTitle from '@/components/ui/card/card-title.svelte';
-	import Badge from '@/components/ui/badge/badge.svelte';
 	import CardCargando from '@/components/CardCargando.svelte';
 	import CardError from '@/components/CardError.svelte';
 	import CardPerfil from '@/components/CardPerfil.svelte';
-	import UserPen from '@lucide/svelte/icons/user-pen';
+	import DialogModificarUsuario from '@/components/DialogModificarUsuario.svelte';

 	let { params } = $props();

@@ -78,7 +72,7 @@
 		postAModificar = null;
 	}
 </script>
-
+{$inspect(data)}
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
 	<div class="w-full max-w-6xl">
 			<CardPerfil bind:data />
@@ -136,11 +130,7 @@
 	</Dialog>
 </div>

-<div class="fixed bottom-8 right-8">
-    <Button variant="default" size="icon-lg" >
-      <UserPen/>
-    </Button>
-</div>
+<DialogModificarUsuario bind:data />

 <svelte:head>
 	<meta property="og:title" content="Mini-x" />