add infinite scroll

src/lib/hooks/getPosts.ts

@@ -1,17 +1,21 @@
 import { apiBase } from "@/stores/url";
 import { sesionStore } from "@/stores/usuario";
 import { get } from "svelte/store";
+import type { Post } from '../../types';
+import { PAGE_SIZE } from '../stores/posts';
 
-export async function getPosts() {
+export async function getPosts(page: number = 1): Promise<Post[]> {
+	const token = get(sesionStore)?.accessToken;
 
+	const headers: HeadersInit = {};
+	if (token) headers.Authorization = `Bearer ${token}`;
 
-	const req = await fetch(`${get(apiBase)}/timeline?pageSize=20`,{
-	headers: {
-	Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+	const res = await fetch(
+		`${get(apiBase)}/timeline?page=${page}&pageSize=${PAGE_SIZE}`,
+		{ headers }
+	);
 
-	}
-	});
-	if (req.ok) {
-		return await req.json();
-	}
-}
+	if (!res.ok) throw new Error('Error cargando posts');
+
+	return res.json();
+}

src/lib/hooks/loadMorePosts.ts

@@ -0,0 +1,32 @@
+import { get } from 'svelte/store';
+import { page, loadingPosts, PAGE_SIZE } from '@/stores/posts';
+import { appendPosts } from '@/stores/posts';
+import { getPosts } from './getPosts';
+
+let finished = false;
+
+export async function loadMorePosts() {
+	if (get(loadingPosts) || finished) return;
+
+	loadingPosts.set(true);
+
+	try {
+		const currentPage = get(page);
+		const newPosts = await getPosts(currentPage);
+
+		if (newPosts.length === 0) {
+			finished = true;
+			return;
+		}
+
+		appendPosts(newPosts);
+
+		if (newPosts.length < PAGE_SIZE) {
+			finished = true;
+		} else {
+			page.update(p => p + 1);
+		}
+	} finally {
+		loadingPosts.set(false);
+	}
+}

src/lib/stores/posts.ts

@@ -1,29 +1,42 @@
 import { writable } from 'svelte/store';
 import type { Post } from '../../types';
 
-export const posts = writable<Post[] | undefined>(undefined);
+export const posts = writable<Post[]>([]);
+export const loadingPosts = writable(false);
+export const page = writable(1);
+
+export const PAGE_SIZE = 20;
 
 export const setPosts = (newPosts: Post[]) => {
 	posts.set(newPosts);
 };
 
-export const addPost = (post: Post) => {
-	posts.update((currentPosts) => [post, ...currentPosts]);
+export const appendPosts = (newPosts: Post[]) => {
+	posts.update((current) => [...current, ...newPosts]);
 };
 
-export const updatePostStore = (postId: string, updatedData: Partial<Post>) => {
-	posts.update((currentPosts) =>
-		currentPosts.map((post) => (post.id === postId ? { ...post, ...updatedData } : post))
+export const addPost = (post: Post) => {
+	posts.update((current) => [post, ...current]);
+};
+
+export const updatePostStore = (
+	postId: string,
+	updatedData: Partial<Post>
+) => {
+	posts.update((current) =>
+		current.map((post) =>
+			post.id === postId ? { ...post, ...updatedData } : post
+		)
 	);
 };
 
 export const removePost = (postId: string) => {
-	posts.update((currentPosts) => {
-		const a = currentPosts.filter((post) => post.id !== postId);
-		return a;
-	});
+	posts.update((current) =>
+		current.filter((post) => post.id !== postId)
+	);
 };
 
 export const resetPosts = () => {
-	posts.set(undefined);
+	posts.set([]);
+	page.set(1);
 };