fetch more statuses dynamically for account on scroll

frontend/src/components/StatusesPanel/StatusesPanel.tsx

@@ -21,6 +21,7 @@ export const StatusesPanel = component$(({ initialStatuses, fetchMoreStatuses: f
 		const newStatuses = await fetchMoreStatusesFn(statuses.value.length)
 		fetchingMoreStatuses.value = false
 		noMoreStatusesAvailable.value = newStatuses.length === 0
+		statuses.value = [...statuses.value, ...newStatuses]
 	})
 
 	useClientEffect$(({ track }) => {

frontend/src/routes/(frontend)/[accountId]/index.tsx

@@ -123,9 +123,20 @@ export default component$(() => {
 				{accountDetails.statuses.length > 0 && (
 					<StatusesPanel
 						initialStatuses={accountDetails.statuses}
-						fetchMoreStatuses={$(async () => {
-							// TODO-DARIO: implement this function
-							return []
+						fetchMoreStatuses={$(async (numOfCurrentStatuses: number) => {
+							let statuses: MastodonStatus[] = []
+							try {
+								const response = await fetch(
+									`/api/v1/accounts/${accountDetails.account.id}/statuses?offset=${numOfCurrentStatuses}`
+								)
+								if (response.ok) {
+									const results = await response.text()
+									statuses = JSON.parse(results)
+								}
+							} catch {
+								/* empty */
+							}
+							return statuses
 						})}
 					/>
 				)}

functions/api/v1/accounts/[id]/statuses.ts

@@ -30,11 +30,13 @@ export const onRequest: PagesFunction<Env, any, ContextData> = async ({ request,
 
 export async function handleRequest(request: Request, db: D1Database, id: string): Promise<Response> {
 	const handle = parseHandle(id)
-	const domain = new URL(request.url).hostname
+	const url = new URL(request.url)
+	const domain = url.hostname
+	const offset = Number.parseInt(url.searchParams.get('offset') ?? '0')
 
 	if (handle.domain === null || (handle.domain !== null && handle.domain === domain)) {
 		// Retrieve the statuses from a local user
-		return getLocalStatuses(request, db, handle)
+		return getLocalStatuses(request, db, handle, offset)
 	} else if (handle.domain !== null) {
 		// Retrieve the statuses of a remote actor
 		return getRemoteStatuses(request, handle, db)
@@ -113,7 +115,12 @@ async function getRemoteStatuses(request: Request, handle: Handle, db: D1Databas
 	return new Response(JSON.stringify(statuses), { headers })
 }
 
-export async function getLocalStatuses(request: Request, db: D1Database, handle: Handle): Promise<Response> {
+export async function getLocalStatuses(
+	request: Request,
+	db: D1Database,
+	handle: Handle,
+	offset = 0
+): Promise<Response> {
 	const domain = new URL(request.url).hostname
 	const actorId = actorURL(adjustLocalHostDomain(domain), handle.localPart)
 
@@ -135,7 +142,7 @@ WHERE objects.type='Note'
       AND outbox_objects.actor_id = ?1
       AND outbox_objects.cdate > ?2
 ORDER by outbox_objects.published_date DESC
-LIMIT ?3
+LIMIT ?3 OFFSET ?4
 `
 
 	const DEFAULT_LIMIT = 20
@@ -165,7 +172,10 @@ LIMIT ?3
 		afterCdate = row.cdate
 	}
 
-	const { success, error, results } = await db.prepare(QUERY).bind(actorId.toString(), afterCdate, DEFAULT_LIMIT).all()
+	const { success, error, results } = await db
+		.prepare(QUERY)
+		.bind(actorId.toString(), afterCdate, DEFAULT_LIMIT, offset)
+		.all()
 	if (!success) {
 		throw new Error('SQL error: ' + error)
 	}