chore: ssr search

apps/masterbots.ai/components/shared/search-input.tsx

@@ -48,7 +48,7 @@ export function SearchInput() {
           placeholder="Search any chat with any Bot"
           value={query || ''}
         />
-        {query ? (
+        {/* {query ? (
           <Button
             aria-label="Clear query"
             className="absolute right-0 px-3 -translate-y-1/2 cursor-pointer top-1/2"
@@ -57,7 +57,7 @@ export function SearchInput() {
           >
             <IconClose className="!h-4 !w-4" />
           </Button>
-        ) : null}
+        ) : null} */}
       </div>
       <Button type="submit">Search</Button>
       <div className="w-full text-center">

apps/masterbots.ai/components/shared/thread-list.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import type { Thread } from '@repo/mb-genql'
 import { getBrowseThreads } from '@/services/hasura'
 import { ThreadDoubleAccordion } from './thread-double-accordion'
 import { ThreadDialog } from './thread-dialog'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 import { GetBrowseThreadsParams } from '@/services/hasura/hasura.service.type'
+import { useQuery } from '@tanstack/react-query'
 
 export function ThreadList({
   initialThreads,
@@ -15,54 +16,57 @@ export function ThreadList({
   currentThread,
   dialog = false
 }: ThreadListProps) {
-  const [threads, setThreads] = useState<Thread[]>(initialThreads)
-  const [filteredThreads, setFilteredThreads] =
-    useState<Thread[]>(initialThreads)
-  const [loading, setLoading] = useState<boolean>(false)
-  const loadMoreRef = useRef<HTMLDivElement>(null)
-  const [hasMore, setHasMore] = useState(true)
   const searchParams = useSearchParams()
-
-  // load more threads for the category
-  const loadMore = async () => {
-    console.log('🟡 Loading More Content')
-    setLoading(true)
-
-    const moreThreads = await getBrowseThreads({
-      ...filter,
-      offset: filteredThreads.length,
-      limit: 25
-    })
-
-    if (moreThreads.length === 0) setHasMore(false)
-    setThreads(prevState => [...prevState, ...moreThreads])
-    setLoading(false)
-  }
+  const queryKey = [usePathname() + searchParams.get('query')]
+  const loadMoreRef = useRef<HTMLDivElement>(null)
+  const threads = useQuery<Thread[]>({
+    queryKey,
+    queryFn: async () => {
+      const searchFilter = {
+        ...filter,
+        offset: threads.length,
+        limit: 25
+      }
+      console.log(`🛜 Loading More Content for ${JSON.stringify(searchFilter)}`)
+      const moreThreads = await getBrowseThreads(searchFilter)
+      // concatenate newly loaded threads
+      return threads.concat(moreThreads)
+    },
+    // data comes from nextjs server on first render
+    refetchOnMount: false,
+    initialData: initialThreads
+  })
 
   // load mare item when it gets to the end
   useEffect(() => {
     if (!loadMoreRef.current) return
     const observer = new IntersectionObserver(([entry]) => {
-      if (hasMore && entry.isIntersecting && !loading) {
-        setTimeout(() => loadMore(), 150)
+      if (entry.isIntersecting && !threads.isLoading) {
+        setTimeout(() => threads.refetch(), 150)
         observer.unobserve(entry.target)
       }
     })
 
     observer.observe(loadMoreRef.current)
 
-    return () => observer.disconnect()
-  }, [hasMore, loading, loadMore])
+    return () => {
+      // always unsubscribe on component unmount
+      observer.disconnect()
+    }
+  }, [threads.isLoading])
 
+  // ThreadDialog and ThreadDoubleAccordion can be used interchangeably
   const ThreadComponent = dialog ? ThreadDialog : ThreadDoubleAccordion
 
-  console.log('ThreadList', searchParams.get('query'))
+  console.log('ThreadList', queryKey)
   return (
     <div
-      key={searchParams.get('query')}
+      // use url queryKey as key for component to force rerender
+      // I'm debuggin ssr results hydration issues
+      key={queryKey[0]}
       className="flex flex-col w-full gap-8 py-5"
     >
-      {filteredThreads.map((thread: Thread, key) => (
+      {threads.map((thread: Thread, key) => (
         <ThreadComponent
           key={key}
           thread={thread}