feat: adds infinite loading (#219)

Co-authored-by: jose pablo <josepabloobandogonzalez@gmail.com>

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 (
     <div>

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<MB.ThreadFull[]> {
   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 []
 

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<HTMLDivElement>(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 (
+    <div ref={loadMoreRef} className='min-h-4' />
+  )
+}

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({
           />
         ))
       )}
+      <ThreadListReload />
     </div>
   )
 }