diff --git a/src/lib/hooks/obtenerRespuestasPorId.ts b/src/lib/hooks/obtenerRespuestasPorId.ts index 27124c7..bf3264f 100644 --- a/src/lib/hooks/obtenerRespuestasPorId.ts +++ b/src/lib/hooks/obtenerRespuestasPorId.ts @@ -6,12 +6,13 @@ import type { Post } from '../../types'; export async function obtenerRespuestasPorId( id: string, fetch2?: Function, - depends?: Function + depends?: Function, + page: number = 1 ): Promise { if (depends) depends('post:respuestas'); const fetchFn = fetch2 ? fetch2 : fetch; try { - const req = await fetchFn(`${get(apiBase)}/api/posts/${id}/replies`, { + const req = await fetchFn(`${get(apiBase)}/api/posts/${id}/replies?page=${page}`, { method: 'GET', headers: { Authorization: `Bearer ${get(sesionStore)?.accessToken}` diff --git a/src/routes/post/[idpost]/+page.svelte b/src/routes/post/[idpost]/+page.svelte index 769824b..01ce658 100644 --- a/src/routes/post/[idpost]/+page.svelte +++ b/src/routes/post/[idpost]/+page.svelte @@ -25,6 +25,7 @@ import TooltipContent from '@/components/ui/tooltip/tooltip-content.svelte'; import { deletePost } from '@/hooks/deletePost'; import { flip } from 'svelte/animate'; + import { obtenerRespuestasPorId } from '@/hooks/obtenerRespuestasPorId'; interface Prop { data: { @@ -36,7 +37,17 @@ let tamaño = new TamañoPantalla(); let { data }: Prop = $props(); - // $inspect(data); + + let respuestasPaginadas: Post[] = $state([]); + let pagerespuestas: number = $state(1); + + let seguirMostrandoMostrarMás = $derived.by(() => { + if (data.post.repliesCount <= 20) return false; + if (respuestasPaginadas.length == 0) return true; + return data.respuestas.length + respuestasPaginadas.length < data.post.repliesCount; + }); + // $inspect([respuestasPaginadas, seguirMostrandoMostrarMás]); + let postAModificar: Post | null = $state(null); async function handleEditar(e: SubmitEvent) { @@ -104,7 +115,7 @@
- {#each data.respuestas as respuesta (respuesta.id)} + {#each [...data.respuestas, ...respuestasPaginadas] as respuesta (respuesta.id)}
@@ -114,6 +125,22 @@
{/each} + {#if seguirMostrandoMostrarMás} + + {/if}