fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

primer mock de como funcionaria la interfaz de seguoidos y seguidores.

Browse Source 
tambien añadi el limite de pagina
This commit is contained in:
fedpo
2025-12-03 15:02:46 -03:00
parent 9f0670907b
commit 6ac942fde0
4 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/hooks/obtenerSeguidoresPorUsuario.ts
View File

@@ -3,9 +3,9 @@ import type { UserResponseDto } from "../../types";
import { get } from "svelte/store"; import { get } from "svelte/store";
import { apiBase } from "@/stores/url"; import { apiBase } from "@/stores/url";
export async function obtenerSeguidoresPorUsuario(Id: string): Promise<UserResponseDto[] | null> { export async function obtenerSeguidoresPorUsuario(id: string, limit:number = 20): Promise<UserResponseDto[] | null> {
try { try {
const response = await fetch(`${get(apiBase)}/api/users/${Id}/followers`, { const response = await fetch(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',

4
src/lib/hooks/obtenerSeguidosPorUsuario.ts
View File

@@ -3,9 +3,9 @@ import type { UserResponseDto } from "../../types";
import { apiBase } from "@/stores/url"; import { apiBase } from "@/stores/url";
import { get } from "svelte/store"; import { get } from "svelte/store";
export async function obtenerSeguidosPorUsuario(id: string): Promise<UserResponseDto[] | null> { export async function obtenerSeguidosPorUsuario(id: string, limit:number = 20): Promise<UserResponseDto[] | null> {
try { try {
const response = await fetch(`${get(apiBase)}/api/users/${id}/following`, { const response = await fetch(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, {
method: 'GET', method: 'GET',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',

4
src/routes/[perfil]/+page.server.ts
View File

@@ -8,8 +8,8 @@ export async function load({ params }) {
const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil); const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil);
if(!usuario) error(404, 'No se encontro el usuario, ' + params.perfil); if(!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
const seguidos = await obtenerSeguidosPorUsuario(usuario.id); const seguidos = await obtenerSeguidosPorUsuario(usuario.id, 3);
const seguidores = await obtenerSeguidoresPorUsuario(usuario.id); const seguidores = await obtenerSeguidoresPorUsuario(usuario.id, 3);
return { ...usuario, seguidos, seguidores }; return { ...usuario, seguidos, seguidores };
} }

24
src/routes/[perfil]/+page.svelte
View File

@@ -104,22 +104,38 @@
<Card class="w-full"> <Card class="w-full">
<CardContent> <CardContent>
<CardHeader class="flex justify-between"> <CardHeader class="flex justify-between">
<CardTitle>Seguidores:</CardTitle> <CardTitle>Seguidos:</CardTitle>
<Badge variant="secondary">{page.data.seguidos.length}</Badge> <Badge variant="secondary">{page.data.seguidos.length}</Badge>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<!-- Seguidos --> {#if page.data.seguidos.length === 0}
<h3>No hay Seguidos</h3>
{:else}
{#each page.data.seguidos as seguidos (seguidos.id)}
<p class="text-muted-foreground">
{seguidos.username}
</p>
{/each}
{/if}
</CardContent> </CardContent>
</CardContent> </CardContent>
</Card> </Card>
<Card class="w-full"> <Card class="w-full">
<CardContent> <CardContent>
<CardHeader class="flex justify-between"> <CardHeader class="flex justify-between">
<CardTitle>Seguidos:</CardTitle> <CardTitle>Seguidores:</CardTitle>
<Badge variant="secondary">{page.data.seguidores.length}</Badge> <Badge variant="secondary">{page.data.seguidores.length}</Badge>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<!-- Seguidores --> {#if page.data.seguidores.length === 0}
<h3>No hay Seguidores</h3>
{:else}
{#each page.data.seguidores as seguidores (seguidores.id)}
<p class="text-muted-foreground">
{seguidores.username}
</p>
{/each}
{/if}
</CardContent> </CardContent>
</CardContent> </CardContent>
</Card> </Card>