diff --git a/apps/masterbots.ai/app/(browse)/page.tsx b/apps/masterbots.ai/app/(browse)/page.tsx index e2cd1f01..8d57e24a 100644 --- a/apps/masterbots.ai/app/(browse)/page.tsx +++ b/apps/masterbots.ai/app/(browse)/page.tsx @@ -8,7 +8,7 @@ export default async function HomePage({ searchParams }: HomePageProps) { const limit = searchParams.limit ? parseInt(searchParams.limit) : 20 const page = searchParams.page ? parseInt(searchParams.page) : 1 // console.log({ query, limit, page }) - const threads = await getThreads({}) + const threads = await getThreads({page}) return (
diff --git a/apps/masterbots.ai/app/actions.ts b/apps/masterbots.ai/app/actions.ts index f3ba0cb3..a49780f1 100644 --- a/apps/masterbots.ai/app/actions.ts +++ b/apps/masterbots.ai/app/actions.ts @@ -6,11 +6,18 @@ import { createSupabaseServerClient } from '@/services/supabase' import { createMessagePairs } from '@/lib/threads' export async function getThreads({ - categoryId + categoryId, + page = 1 }: { categoryId?: number + page?: number }): Promise { const supabase = await createSupabaseServerClient() + const itemsPerPage = 20 + const from = (page - 1) * itemsPerPage + const to = from + itemsPerPage - 1 + + console.log('page ', page, ' from ', from, ' to ', to) let threadsQuery = supabase.from('thread_full').select('*') @@ -20,7 +27,7 @@ export async function getThreads({ // ]) // } - const { data, error } = await threadsQuery.range(0, 19) + const { data, error } = await threadsQuery.range(from, to) if (error) return [] diff --git a/apps/masterbots.ai/components/shared/thread-list-reload.tsx b/apps/masterbots.ai/components/shared/thread-list-reload.tsx new file mode 100644 index 00000000..b5aa4888 --- /dev/null +++ b/apps/masterbots.ai/components/shared/thread-list-reload.tsx @@ -0,0 +1,42 @@ +'use client' + +import React, { useEffect, useRef, useState } from 'react' +import { useSearchParams, useRouter } from 'next/navigation' + +export function ThreadListReload() { + const params = useSearchParams() + const router = useRouter() + const page = parseInt(params.get('page') || '1', 10) + const loadMoreRef = useRef(null) + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + if (!loadMoreRef.current) return + const observer = new IntersectionObserver(([entry]) => { + + if (entry.isIntersecting && !isLoading) { + setIsLoading(true); + + setTimeout(() => { + const newPage = page + 1 + const newParams = new URLSearchParams(params) + newParams.set('page', newPage.toString()) + router.push(`${window.location.pathname}?${newParams.toString()}`) + + setIsLoading(false); + }, 150) + observer.unobserve(entry.target) + } + }) + + observer.observe(loadMoreRef.current) + + return () => { + observer.disconnect() + } + }, [isLoading, page, params, router]) + + return ( +
+ ) +} diff --git a/apps/masterbots.ai/components/shared/thread-list.tsx b/apps/masterbots.ai/components/shared/thread-list.tsx index 8ea050c0..6c1c409f 100644 --- a/apps/masterbots.ai/components/shared/thread-list.tsx +++ b/apps/masterbots.ai/components/shared/thread-list.tsx @@ -2,6 +2,7 @@ import { MB } from '@repo/supabase' import { ThreadDialog } from './thread-dialog' import { ThreadListAccordion } from './thread-list-accordion' import { ThreadListChatItem } from './thread-list-chat-item' +import { ThreadListReload } from './thread-list-reload' export function ThreadList({ initialThreads, @@ -32,6 +33,7 @@ export function ThreadList({ /> )) )} +
) }