arreglado path /timeline y añadida logica crearpost al fetch

This commit is contained in:
2025-11-23 19:49:07 -03:00
parent 3fbacce3fe
commit 5159ebffd4
4 changed files with 134 additions and 52 deletions

View File

@@ -5,13 +5,15 @@
import { apiBase } from '@/stores/url';
import { sesionStore } from '@/stores/usuario';
import CrearPost from '@/components/crear-post.svelte';
import CardHeader from '@/components/ui/card/card-header.svelte';
import CardFooter from '@/components/ui/card/card-footer.svelte';
import { posts, setPosts } from '@/stores/posts';
$effect(async () => {
setPosts(await getPosts());
$effect(() => {
getPosts();
});
let posts: Post[] = $state([]);
async function getPosts() {
const { subscribe } = apiBase;
let baseUrl: string = '';
@@ -20,9 +22,9 @@
baseUrl = value;
})();
const req = await fetch(`${baseUrl}/api/posts/timeline?pageSize=3`);
const req = await fetch(`${baseUrl}/timeline?pageSize=20`);
if (req.ok) {
posts = await req.json();
return await req.json();
}
}
</script>
@@ -35,36 +37,40 @@
{/if}
<hr />
{#if posts.length <= 0}
{#if $posts.length <= 0}
<Card>
<Content>
<p class=" text-center leading-7 not-first:mt-6">No hay Posts que mostrar</p>
</Content>
</Card>
{:else}
{#each posts as post}
{#each $posts as post}
<Card>
<Content>
<CardHeader>
<div class="flex flex-col space-y-2">
<div class="flex items-center justify-between">
<span class="text-sm font-medium">{post.authorId}</span>
<span class="text-xs text-muted-foreground"
>{post.createdAt.toLocaleDateString()}</span
>{post.createdAt.replace("T", " ").split(".")[0]}</span
>
</div>
<p class="text-sm">{post.content}</p>
{#if post.imageUrl}
<img src={post.imageUrl} alt="Post" class="mt-2 rounded-md" />
{/if}
<div class="flex items-center justify-between pt-2 text-xs text-muted-foreground">
<span>{post.likesCount} likes</span>
<span>{post.repliesCount} replies</span>
{#if post.isEdited}
<span>Editado</span>
{/if}
</div>
</div>
</CardHeader>
<Content>
<p class="text-sm">{post.content}</p>
{#if post.imageUrl}
<img src={post.imageUrl} alt="Post" class="mt-2 rounded-md" />
{/if}
</Content>
<CardFooter>
<div class="flex items-center justify-between pt-2 gap-2 text-xs text-muted-foreground">
<span>{post.likesCount} likes</span>
<span>{post.repliesCount} replies</span>
{#if post.isEdited}
<span>Editado</span>
{/if}
</div>
</CardFooter>
</Card>
{/each}
{/if}