some dude removed the + button (that dude was me)

This commit is contained in:
Fran
2026-01-19 21:49:40 -03:00
parent 0ba88d14ed
commit d35de05a7b
2 changed files with 66 additions and 49 deletions

View File

@@ -44,7 +44,7 @@
} }
cargando = true; cargando = true;
try { try {
await cambiarContraseñaUsuario(data.id, passwordData.oldPassword, passwordData.newPassword); await cambiarContraseñaUsuario(passwordData.oldPassword, passwordData.newPassword, data.id);
cargando = false; cargando = false;
open = false; open = false;
passwordData.oldPassword = ''; passwordData.oldPassword = '';
@@ -103,7 +103,7 @@
/> />
</Field> </Field>
</FieldGroup> </FieldGroup>
<Button type="submit" disabled={!coinsiden || cargando}> <Button type="submit" class="mt-6" disabled={!coinsiden || cargando}>
{#if cargando} {#if cargando}
<Spinner /> <Spinner />
{:else} {:else}

View File

@@ -19,14 +19,16 @@
import DialogModificarUsuario from '@/components/DialogModificarUsuario.svelte'; import DialogModificarUsuario from '@/components/DialogModificarUsuario.svelte';
import BotonSeguir from '@/components/BotonSeguir.svelte'; import BotonSeguir from '@/components/BotonSeguir.svelte';
import DialogResetPassword from '@/components/DialogResetPassword.svelte'; import DialogResetPassword from '@/components/DialogResetPassword.svelte';
import { onMount } from 'svelte'; import Key from '@lucide/svelte/icons/key';
import UserPen from '@lucide/svelte/icons/user-pen';
import PenLine from '@lucide/svelte/icons/pen-line';
let { params } = $props(); let { params } = $props();
let cargando = $state(false); let cargando = $state(false);
let finished = $state(false); let finished = $state(false);
let pageNumber = $state(1); let pageNumber = $state(1);
let sentinel: HTMLDivElement; let sentinel = $state<HTMLDivElement | null>(null);
let mensajeError = $state(''); let mensajeError = $state('');
let postAModificar: Post | null = $state(null); let postAModificar: Post | null = $state(null);
@@ -83,17 +85,21 @@
obtenerPosts(); obtenerPosts();
}); });
onMount(() => { $effect(() => {
if (!sentinel) return;
if (finished) return;
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
if (entry.isIntersecting) { if (entry.isIntersecting && !fetching) {
obtenerPosts(); obtenerPosts();
} }
}, },
{ rootMargin: '200px' } { rootMargin: '100px' }
); );
if (sentinel) observer.observe(sentinel); observer.observe(sentinel);
return () => observer.disconnect(); return () => observer.disconnect();
}); });
@@ -113,76 +119,86 @@
} }
</script> </script>
<!-- {$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} {#key data.id}
<CardPerfil bind:data /> <CardPerfil bind:data />
{/key} {/key}
<h1
<h1 class="mt-10 flex justify-between text-3xl font-extrabold"> class="mt-10 flex scroll-m-20 justify-between text-3xl font-extrabold tracking-tight lg:text-3xl"
>
Posts: Posts:
{#if params.perfil === $sesionStore?.username} {#if params.perfil == $sesionStore?.username}
<Button <Button
variant="ghost" variant="ghost"
size="icon-sm" size="icon-sm"
class="rounded-full bg-blue-600" class="m-1 rounded-full bg-blue-600"
onclick={() => (showCrearPost = true)} onclick={() => {
showCrearPost = true;
}}
> >
+ <PenLine />
</Button> </Button>
{:else if $posts.length === 0} {:else if $posts?.length == 0}
<BotonSeguir post={{ authorId: data.id, id: data.id }} /> <BotonSeguir post={{ authorId: data.id, id: data.id }} />
{/if} {/if}
</h1> </h1>
<hr class="mb-8" /> <hr class="mb-8" />
{#if cargando && !finished}
{#if cargando && $posts.length === 0}
<CardCargando />
{:else if mensajeError}
<CardError {mensajeError} />
{:else if $posts.length === 0}
<CardError mensajeError="Este usuario no tiene posts" />
{:else}
<div class="flex flex-col gap-2">
{#each $posts as post (post.id)}
<div transition:slide>
<PostCard {post} bind:postAModificar />
</div>
{/each}
</div>
{/if}
<div bind:this={sentinel} class="h-1"></div>
{#if cargando && $posts.length > 0}
<div class="flex justify-center py-4">
<CardCargando /> <CardCargando />
</div> {:else if mensajeError !== ''}
{/if} <CardError {mensajeError} />
{:else}
<div class="flex flex-col gap-2">
{#each $posts as post (post.id)}
<div transition:slide>
<PostCard {post} bind:postAModificar />
</div>
{/each}
<div bind:this={sentinel} class="h-1"></div>
{#if cargando && !finished}
<CardCargando />
{/if}
</div>
{/if}
</div> </div>
</div> </div>
{#if postAModificar} {#if postAModificar}
<div in:fade> <div in:fade>
<ModalEditar callbackfn={handleEditar} bind:post={postAModificar} /> <ModalEditar callbackfn={handleEditar} bind:post={postAModificar} />
</div> </div>
{/if} {/if}
<Dialog open={showCrearPost} onOpenChange={() => (showCrearPost = false)}> <div transition:fade>
<DialogContent> <Dialog open={showCrearPost} onOpenChange={() => (showCrearPost = false)}>
<DialogTitle>Crear publicación</DialogTitle> <DialogContent
<CrearPost /> onkeydown={(e: KeyboardEvent) => {
</DialogContent> if (e.ctrlKey && e.key === 'Enter') {
</Dialog> showCrearPost = false;
}
}}
>
<DialogTitle>Crear Publicacion</DialogTitle>
<CrearPost />
</DialogContent>
</Dialog>
</div>
{#if $sesionStore?.isAdmin || $sesionStore?.username === params.perfil} {#if $sesionStore?.isAdmin || $sesionStore?.username == params.perfil}
<div class="fixed right-8 bottom-8 flex flex-col gap-2"> <div class="fixed right-8 bottom-8 flex flex-col gap-2">
<DialogModificarUsuario bind:data> <DialogModificarUsuario bind:data>
<Button>Modificar Usuario</Button> <Button variant="default" size="icon-lg">
<UserPen />
</Button>
</DialogModificarUsuario> </DialogModificarUsuario>
<DialogResetPassword bind:data> <DialogResetPassword bind:data>
<Button>Reset Password</Button> <Button variant="default" size="icon-lg">
<Key />
</Button>
</DialogResetPassword> </DialogResetPassword>
</div> </div>
{/if} {/if}
@@ -191,5 +207,6 @@
<meta property="og:title" content="Mini-x" /> <meta property="og:title" content="Mini-x" />
<meta property="og:description" content={`viendo el perfil de @${data.username}`} /> <meta property="og:description" content={`viendo el perfil de @${data.username}`} />
<meta property="og:image" content={data.imageUrl} /> <meta property="og:image" content={data.imageUrl} />
<meta property="og:url" content="https://minix-front.vercel.app/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
</svelte:head> </svelte:head>