fix: adding page as query param

Author: Adam Gough

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -12,7 +12,7 @@ import {
   Trash2,
   X,
 } from 'lucide-react'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -57,11 +57,37 @@ export function Document({
   const { mode, isExpanded } = useSidebarStore()
   const { getCachedKnowledgeBase, getCachedDocuments } = useKnowledgeStore()
   const { workspaceId } = useParams()
+  const router = useRouter()
+  const searchParams = useSearchParams()
 
   const isSidebarCollapsed =
     mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'
 
-  const [searchQuery, setSearchQuery] = useState('')
+  const currentPageFromURL = parseInt(searchParams.get('page') || '1', 10)
+  const searchQueryFromURL = searchParams.get('search') || ''
+
+  const [searchQuery, setSearchQuery] = useState(searchQueryFromURL)
+
+  const debouncedSearchQuery = useDebounce(searchQuery, 800)
+
+  const updateURL = useCallback((newSearch: string, newPage: number = 1) => {
+    const params = new URLSearchParams(searchParams)
+    
+    if (newSearch) {
+      params.set('search', newSearch)
+    } else {
+      params.delete('search')
+    }
+    
+    if (newPage > 1) {
+      params.set('page', newPage.toString())
+    } else {
+      params.delete('page')
+    }
+    
+    router.replace(`?${params.toString()}`, { scroll: false })
+  }, [router, searchParams])
+
   const [selectedChunks, setSelectedChunks] = useState<Set<string>>(new Set())
   const [selectedChunk, setSelectedChunk] = useState<ChunkData | null>(null)
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -70,16 +96,11 @@ export function Document({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const [isBulkOperating, setIsBulkOperating] = useState(false)
   const [pageBeforeSearch, setPageBeforeSearch] = useState(1)
-  const [previousSearchQuery, setPreviousSearchQuery] = useState('')
 
   const [document, setDocument] = useState<DocumentData | null>(null)
   const [isLoadingDocument, setIsLoadingDocument] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Debounce the search query to avoid excessive API calls
-  const debouncedSearchQuery = useDebounce(searchQuery, 500)
-
-  // Use the updated chunks hook with pagination
   const {
     chunks,
     isLoading: isLoadingChunks,
@@ -94,81 +115,60 @@ export function Document({
     refreshChunks,
     updateChunk,
     searchChunks,
-    clearSearchAndGoToPage,
-  } = useDocumentChunks(knowledgeBaseId, documentId)
+  } = useDocumentChunks(knowledgeBaseId, documentId, currentPageFromURL, searchQueryFromURL)
 
-  // Combine errors
   const combinedError = error || chunksError
 
-  // Handle search functionality with debounce
   useEffect(() => {
     if (!knowledgeBaseId || !documentId) return
-
-    const handleSearch = async () => {
-      try {
-        if (debouncedSearchQuery.trim()) {
-          // Perform the search
-          await searchChunks(debouncedSearchQuery.trim())
-        } else {
-          // If clearing search, return to the page we were on before searching
-          await clearSearchAndGoToPage(pageBeforeSearch)
-        }
-      } catch (err) {
-        logger.error('Search failed:', err)
+    
+    if (debouncedSearchQuery !== searchQueryFromURL) {
+      if (debouncedSearchQuery.trim().length >= 2) {
+        // Starting a search - go to page 1
+        updateURL(debouncedSearchQuery, 1)
+      } else if (debouncedSearchQuery.trim() === '') {
+        // Clearing search - return to page before search
+        updateURL(debouncedSearchQuery, pageBeforeSearch)
       }
     }
+  }, [debouncedSearchQuery, searchQueryFromURL, updateURL, knowledgeBaseId, documentId, pageBeforeSearch])
 
-    handleSearch()
-  }, [debouncedSearchQuery, knowledgeBaseId, documentId, pageBeforeSearch])
+  useEffect(() => {
+    setSearchQuery(searchQueryFromURL)
+  }, [searchQueryFromURL])
 
-  // Track search state changes and save page when starting search
+  // Track when search starts to save current page
   useEffect(() => {
-    const isStartingSearch = !previousSearchQuery.trim() && searchQuery.trim()
+    const isStartingSearch = !searchQueryFromURL && searchQuery.trim()
 
     if (isStartingSearch) {
-      setPageBeforeSearch(currentPage)
+      // User just started typing, save current page
+      setPageBeforeSearch(currentPageFromURL)
     }
-    
-    // Always update the previous search query for next comparison
-    setPreviousSearchQuery(searchQuery)
-  }, [searchQuery, previousSearchQuery])
+  }, [searchQuery, searchQueryFromURL, currentPageFromURL])
 
-  // Handle pagination navigation
   const handlePrevPage = useCallback(() => {
-    if (hasPrevPage && !isLoadingChunks) {
-      prevPage()?.catch((err) => {
-        logger.error('Previous page failed:', err)
-      })
+    if (hasPrevPage) {
+      updateURL(searchQuery, currentPageFromURL - 1)
     }
-  }, [hasPrevPage, isLoadingChunks, prevPage])
+  }, [hasPrevPage, updateURL, searchQuery, currentPageFromURL])
 
   const handleNextPage = useCallback(() => {
-    if (hasNextPage && !isLoadingChunks) {
-      nextPage()?.catch((err) => {
-        logger.error('Next page failed:', err)
-      })
+    if (hasNextPage) {
+      updateURL(searchQuery, currentPageFromURL + 1)
     }
-  }, [hasNextPage, isLoadingChunks, nextPage])
-
-  const handleGoToPage = useCallback(
-    (page: number) => {
-      if (page !== currentPage && !isLoadingChunks) {
-        goToPage(page)?.catch((err) => {
-          logger.error('Go to page failed:', err)
-        })
-      }
-    },
-    [currentPage, isLoadingChunks, goToPage]
-  )
+  }, [hasNextPage, updateURL, searchQuery, currentPageFromURL])
+
+  const handleGoToPage = useCallback((page: number) => {
+    updateURL(searchQuery, page)
+  }, [updateURL, searchQuery])
 
-  // Try to get document from store cache first, then fetch if needed
   useEffect(() => {
     const fetchDocument = async () => {
       try {
         setIsLoadingDocument(true)
         setError(null)
 
-        // First try to get from cached documents in the store
         const cachedDocuments = getCachedDocuments(knowledgeBaseId)
         const cachedDoc = cachedDocuments?.find((d) => d.id === documentId)
 
@@ -178,7 +178,6 @@ export function Document({
           return
         }
 
-        // If not in cache, fetch from API
         const response = await fetch(`/api/knowledge/${knowledgeBaseId}/documents/${documentId}`)
 
         if (!response.ok) {