algunos refactor y ahora arregle lo que no se actualizaba la tarjeta de

perfil

src/lib/components/DialogModificarUsuario.svelte

@@ -1,27 +1,27 @@
 <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";
+	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,
+		id: data.id,
 		username: data.username,
 		displayName: data.displayName,
 		bio: data.bio,
@@ -31,24 +31,23 @@
 	let cargando = $state(false);
 	let open = $state(false);
 
-	async function onsubmit(e:SubmitEvent | null) {
-     	if (e != null) e.preventDefault();
+	async function onsubmit(e: SubmitEvent | null) {
+		if (e != null) e.preventDefault();
 		cargando = true;
 		await updateUsuario({
-		    id: usuario.id,
+			id: usuario.id,
 			profileImage: false,
-		    bio: usuario.bio,
+			bio: usuario.bio,
 			displayName: usuario.displayName,
 			profileImageUrl: usuario.profileImageUrl
 		});
 		cargando = false;
 		open = false;
 		// invalidateAll();
-		// invalidate(page.url);
-		location.reload();
+		await invalidate(page.url);
+		await invalidate('perfil:general');
 	}
 
-
 	function onkeydown(e: KeyboardEvent) {
 		if (e.ctrlKey && e.key === 'Enter') {
 			onsubmit(null);
@@ -57,49 +56,43 @@
 </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>
+	<DialogTrigger>
+		<div class="fixed right-8 bottom-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>

src/lib/hooks/obtenerSeguidoresPorUsuario.ts

@@ -5,10 +5,12 @@ import { apiBase } from '@/stores/url';
 
 export async function obtenerSeguidoresPorUsuario(
 	id: string,
-	limit: number = 20
+	limit: number = 20,
+	fetch2: Function
 ): Promise<UsersResponseDto | null> {
 	try {
-		const response = await fetch(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, {
+		const fetchFunc = fetch2 || fetch;
+		const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',

src/lib/hooks/obtenerSeguidosPorUsuario.ts

@@ -5,10 +5,13 @@ import { get } from 'svelte/store';
 
 export async function obtenerSeguidosPorUsuario(
 	id: string,
-	limit: number = 20
+	limit: number = 20,
+	fetch2?: Function
 ): Promise<UsersResponseDto | null> {
 	try {
-		const response = await fetch(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, {
+		const fetchFunc = fetch2 || fetch;
+
+		const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',

src/lib/hooks/obtenerUsuario.ts

@@ -3,9 +3,14 @@ import type { UserResponseDto } from '../../types';
 import { get } from 'svelte/store';
 import { sesionStore } from '@/stores/usuario';
 
-export async function obtenerUsuarioPorUsername(username: string): Promise<UserResponseDto | null> {
+export async function obtenerUsuarioPorUsername(
+	username: string,
+	fetch2?: Function
+): Promise<UserResponseDto | null> {
 	try {
-		const response = await fetch(`${get(apiBase)}/api/users/username/${username}`, {
+		const fetchFunction = fetch2 || fetch;
+
+		const response = await fetchFunction(`${get(apiBase)}/api/users/username/${username}`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',

src/routes/[perfil]/+page.svelte

@@ -28,13 +28,7 @@
 	let showCrearPost = $state(false);
 	const toggleCrearPost = () => (showCrearPost = !showCrearPost);
 
-	const { subscribe } = apiBase;
-	let baseUrl: string = '';
-	let data = $state(page.data);
-
-	subscribe((value) => {
-		baseUrl = value;
-	})();
+	let data = $derived(page.data);
 
 	$effect(() => {
 		obtenerPosts();
@@ -42,7 +36,7 @@
 
 	async function obtenerPosts() {
 		try {
-			const req = await fetch(baseUrl + '/api/posts/user/' + params.perfil, {
+			const req = await fetch($apiBase + '/api/posts/user/' + params.perfil, {
 				method: 'GET',
 				headers: {
 					Authorization: `Bearer ${$sesionStore?.accessToken}`
@@ -72,10 +66,13 @@
 		postAModificar = null;
 	}
 </script>
-{$inspect(data)}
+
+<!-- {$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">
+		{#key data}
 			<CardPerfil bind:data />
+		{/key}
 		<h1
 			class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl"
 		>

src/routes/[perfil]/+page.ts

@@ -4,13 +4,14 @@ import { error } from '@sveltejs/kit';
 import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js';
 import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js';
 
-export async function load({ params }) {
-	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil);
+export async function load({ params, depends, fetch }) {
+	depends('perfil:general');
+	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
 	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
 
 	const [seguidos, seguidores] = await Promise.all([
-		obtenerSeguidosPorUsuario(usuario.id, 3),
-		obtenerSeguidoresPorUsuario(usuario.id, 3)
+		obtenerSeguidosPorUsuario(usuario.id, 3, fetch),
+		obtenerSeguidoresPorUsuario(usuario.id, 3, fetch)
 	]);
 
 	return { ...usuario, seguidos, seguidores };