fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-18 15:57:31 -03:00
Code Issues Packages Projects Releases Wiki Activity

añadido componente para crear posts y modificado menu auth

Browse Source
This commit is contained in:
fedpo
2025-11-23 17:42:52 -03:00
parent e677e83f27
commit 3fbacce3fe
24 changed files with 618 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/routes/+page.svelte
View File

@@ -2,65 +2,72 @@
import Card from '@/components/ui/card/card.svelte';
import type { Post } from '../types';
import { Content } from '@/components/ui/card';
import { apiBase } from '@/stores/url';
import { apiBase } from '@/stores/url';
import { sesionStore } from '@/stores/usuario';
import CrearPost from '@/components/crear-post.svelte';
$effect(()=>{
getPosts();
});
$effect(() => {
getPosts();
});
let posts: Post[] = $state([]);
let posts: Post[] = $state([]);
async function getPosts() {
const { subscribe } = apiBase;
let baseUrl: string = '';
async function getPosts() {
const { subscribe } = apiBase;
let baseUrl: string = '';
subscribe((value) => {
baseUrl = value;
})();
const req = await fetch(`${baseUrl}/api/posts/timeline?pageSize=3`);
if (req.ok){
posts = await req.json();
}
}
subscribe((value) => {
baseUrl = value;
})();
const req = await fetch(`${baseUrl}/api/posts/timeline?pageSize=3`);
if (req.ok) {
posts = await req.json();
}
}
</script>
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
<div class="w-full max-w-sm">
{#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}
<div class="w-full max-w-2xl">
<div class="flex flex-col gap-2">
{#if $sesionStore !== null}
<CrearPost />
{/if}
<hr />
{#if posts.length <= 0}
<Card>
<Content>
<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
>
</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>
<p class=" text-center leading-7 not-first:mt-6">No hay Posts que mostrar</p>
</Content>
</Card>
{/each}
{/if}
{:else}
{#each posts as post}
<Card>
<Content>
<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
>
</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>
</Content>
</Card>
{/each}
{/if}
</div>
</div>
</div>