fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-05-01 17:52:47 -03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
perfil
This commit is contained in:
fedpo
2025-12-26 01:37:10 -03:00
parent 6d2bb774d4
commit 9508b575f5
6 changed files with 91 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/DialogModificarUsuario.svelte
+64 -71
View File
@@ -1,27 +1,27 @@
<script lang="ts"> <script lang="ts">
import UserPen from "@lucide/svelte/icons/user-pen"; import UserPen from '@lucide/svelte/icons/user-pen';
import Button, { buttonVariants } from "./ui/button/button.svelte"; import Button, { buttonVariants } from './ui/button/button.svelte';
import { Dialog } from "./ui/dialog"; import { Dialog } from './ui/dialog';
import DialogTrigger from "./ui/dialog/dialog-trigger.svelte"; import DialogTrigger from './ui/dialog/dialog-trigger.svelte';
import DialogContent from "./ui/dialog/dialog-content.svelte"; import DialogContent from './ui/dialog/dialog-content.svelte';
import DialogHeader from "./ui/dialog/dialog-header.svelte"; import DialogHeader from './ui/dialog/dialog-header.svelte';
import DialogTitle from "./ui/dialog/dialog-title.svelte"; import DialogTitle from './ui/dialog/dialog-title.svelte';
import type { UserResponseDto } from "../../types"; import type { UserResponseDto } from '../../types';
import Input from "./ui/input/input.svelte"; import Input from './ui/input/input.svelte';
import Field from "./ui/field/field.svelte"; import Field from './ui/field/field.svelte';
import FieldLabel from "./ui/field/field-label.svelte"; import FieldLabel from './ui/field/field-label.svelte';
import Textarea from "./ui/textarea/textarea.svelte"; import Textarea from './ui/textarea/textarea.svelte';
import FieldGroup from "./ui/field/field-group.svelte"; import FieldGroup from './ui/field/field-group.svelte';
import { updateUsuario } from "@/hooks/updateUsuario"; import { updateUsuario } from '@/hooks/updateUsuario';
import DialogFooter from "./ui/dialog/dialog-footer.svelte"; import DialogFooter from './ui/dialog/dialog-footer.svelte';
import Spinner from "./ui/spinner/spinner.svelte"; import Spinner from './ui/spinner/spinner.svelte';
import { invalidate, invalidateAll } from "$app/navigation"; import { invalidate, invalidateAll } from '$app/navigation';
import { page } from "$app/state"; import { page } from '$app/state';
let { data = $bindable() } = $props(); let { data = $bindable() } = $props();
let usuario: UserResponseDto = $state({ let usuario: UserResponseDto = $state({
id: data.id, id: data.id,
username: data.username, username: data.username,
displayName: data.displayName, displayName: data.displayName,
bio: data.bio, bio: data.bio,
@@ -31,24 +31,23 @@
let cargando = $state(false); let cargando = $state(false);
let open = $state(false); let open = $state(false);
async function onsubmit(e:SubmitEvent | null) { async function onsubmit(e: SubmitEvent | null) {
if (e != null) e.preventDefault(); if (e != null) e.preventDefault();
cargando = true; cargando = true;
await updateUsuario({ await updateUsuario({
id: usuario.id, id: usuario.id,
profileImage: false, profileImage: false,
bio: usuario.bio, bio: usuario.bio,
displayName: usuario.displayName, displayName: usuario.displayName,
profileImageUrl: usuario.profileImageUrl profileImageUrl: usuario.profileImageUrl
}); });
cargando = false; cargando = false;
open = false; open = false;
// invalidateAll(); // invalidateAll();
// invalidate(page.url); await invalidate(page.url);
location.reload(); await invalidate('perfil:general');
} }
function onkeydown(e: KeyboardEvent) { function onkeydown(e: KeyboardEvent) {
if (e.ctrlKey && e.key === 'Enter') { if (e.ctrlKey && e.key === 'Enter') {
onsubmit(null); onsubmit(null);
@@ -57,49 +56,43 @@
</script> </script>
<Dialog bind:open> <Dialog bind:open>
<DialogTrigger> <DialogTrigger>
<div class="fixed bottom-8 right-8"> <div class="fixed right-8 bottom-8">
<Button variant="default" size="icon-lg" > <Button variant="default" size="icon-lg">
<UserPen/> <UserPen />
</Button> </Button>
</div> </div>
</DialogTrigger> </DialogTrigger>
<form {onsubmit}> <form {onsubmit}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
<h1 class="text-2xl font-bold">Modificar Usuario</h1> <h1 class="text-2xl font-bold">Modificar Usuario</h1>
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<FieldGroup {onkeydown}> <FieldGroup {onkeydown}>
<Field> <Field>
<FieldLabel> <FieldLabel>Nombre</FieldLabel>
Nombre <Input id="displayName" type="text" bind:value={usuario.displayName} required />
</FieldLabel> </Field>
<Input id="displayName" type="text" bind:value={usuario.displayName} required /> <Field>
</Field> <FieldLabel>bio</FieldLabel>
<Field> <Textarea id="bio" bind:value={usuario.bio}></Textarea>
<FieldLabel> </Field>
bio <Field>
</FieldLabel> <FieldLabel>Email</FieldLabel>
<Textarea id="bio" bind:value={usuario.bio}> <Input id="email" type="email" bind:value={usuario.email} />
</Field>
</Textarea> </FieldGroup>
</Field> <DialogFooter>
<Field> <Button type="submit">
<FieldLabel>Email</FieldLabel> {#if cargando}
<Input id="email" type="email" bind:value={usuario.email} /> <Spinner />
</Field> {:else}
</FieldGroup> Modificar
<DialogFooter> {/if}
<Button type="submit"> </Button>
{#if cargando} </DialogFooter>
<Spinner/> </DialogContent>
{:else} </form>
Modificar
{/if}
</Button>
</DialogFooter>
</DialogContent>
</form>
</Dialog> </Dialog>
src/lib/hooks/obtenerSeguidoresPorUsuario.ts
+4 -2
View File
@@ -5,10 +5,12 @@ import { apiBase } from '@/stores/url';
export async function obtenerSeguidoresPorUsuario( export async function obtenerSeguidoresPorUsuario(
id: string, id: string,
limit: number = 20 limit: number = 20,
fetch2: Function
): Promise<UsersResponseDto | null> { ): Promise<UsersResponseDto | null> {
try { 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', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
src/lib/hooks/obtenerSeguidosPorUsuario.ts
+5 -2
View File
@@ -5,10 +5,13 @@ import { get } from 'svelte/store';
export async function obtenerSeguidosPorUsuario( export async function obtenerSeguidosPorUsuario(
id: string, id: string,
limit: number = 20 limit: number = 20,
fetch2?: Function
): Promise<UsersResponseDto | null> { ): Promise<UsersResponseDto | null> {
try { 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', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
src/lib/hooks/obtenerUsuario.ts
+7 -2
View File
@@ -3,9 +3,14 @@ import type { UserResponseDto } from '../../types';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { sesionStore } from '@/stores/usuario'; 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 { 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', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
src/routes/[perfil]/+page.svelte
+6 -9
View File
@@ -28,13 +28,7 @@
let showCrearPost = $state(false); let showCrearPost = $state(false);
const toggleCrearPost = () => (showCrearPost = !showCrearPost); const toggleCrearPost = () => (showCrearPost = !showCrearPost);
const { subscribe } = apiBase; let data = $derived(page.data);
let baseUrl: string = '';
let data = $state(page.data);
subscribe((value) => {
baseUrl = value;
})();
$effect(() => { $effect(() => {
obtenerPosts(); obtenerPosts();
@@ -42,7 +36,7 @@
async function obtenerPosts() { async function obtenerPosts() {
try { try {
const req = await fetch(baseUrl + '/api/posts/user/' + params.perfil, { const req = await fetch($apiBase + '/api/posts/user/' + params.perfil, {
method: 'GET', method: 'GET',
headers: { headers: {
Authorization: `Bearer ${$sesionStore?.accessToken}` Authorization: `Bearer ${$sesionStore?.accessToken}`
@@ -72,10 +66,13 @@
postAModificar = null; postAModificar = null;
} }
</script> </script>
{$inspect(data)}
<!-- {$inspect(data)} -->
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10"> <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
<div class="w-full max-w-6xl"> <div class="w-full max-w-6xl">
{#key data}
<CardPerfil bind:data /> <CardPerfil bind:data />
{/key}
<h1 <h1
class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl" class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl"
> >
src/routes/[perfil]/+page.ts
+5 -4
View File
@@ -4,13 +4,14 @@ import { error } from '@sveltejs/kit';
import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js'; import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js';
import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js'; import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js';
export async function load({ params }) { export async function load({ params, depends, fetch }) {
const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil); depends('perfil:general');
const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
const [seguidos, seguidores] = await Promise.all([ const [seguidos, seguidores] = await Promise.all([
obtenerSeguidosPorUsuario(usuario.id, 3), obtenerSeguidosPorUsuario(usuario.id, 3, fetch),
obtenerSeguidoresPorUsuario(usuario.id, 3) obtenerSeguidoresPorUsuario(usuario.id, 3, fetch)
]); ]);
return { ...usuario, seguidos, seguidores }; return { ...usuario, seguidos, seguidores };