Fix pagination resetting to page 1 on navigation
push() depended on searchParams, causing the search debounce effect to re-fire on every page change and delete the page param. Store searchParams in a ref so push() is stable and only the search value triggers it. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useCallback, useEffect, useState } from 'react'
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||||
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
||||||
import { Input } from '@/components/ui/input'
|
import { Input } from '@/components/ui/input'
|
||||||
import { Label } from '@/components/ui/label'
|
import { Label } from '@/components/ui/label'
|
||||||
@@ -20,17 +20,19 @@ export function TransactionFilters({ accounts }: { accounts: AccountOption[] })
|
|||||||
const sp = (key: string) => searchParams.get(key) ?? ''
|
const sp = (key: string) => searchParams.get(key) ?? ''
|
||||||
|
|
||||||
const [search, setSearch] = useState(sp('search'))
|
const [search, setSearch] = useState(sp('search'))
|
||||||
|
const searchParamsRef = useRef(searchParams)
|
||||||
|
useEffect(() => { searchParamsRef.current = searchParams }, [searchParams])
|
||||||
|
|
||||||
const push = useCallback(
|
const push = useCallback(
|
||||||
(updates: Record<string, string>) => {
|
(updates: Record<string, string>) => {
|
||||||
const params = new URLSearchParams(searchParams.toString())
|
const params = new URLSearchParams(searchParamsRef.current.toString())
|
||||||
for (const [k, v] of Object.entries(updates)) {
|
for (const [k, v] of Object.entries(updates)) {
|
||||||
if (v) params.set(k, v); else params.delete(k)
|
if (v) params.set(k, v); else params.delete(k)
|
||||||
}
|
}
|
||||||
params.delete('page')
|
params.delete('page')
|
||||||
router.replace(`${pathname}?${params.toString()}`)
|
router.replace(`${pathname}?${params.toString()}`)
|
||||||
},
|
},
|
||||||
[searchParams, pathname, router],
|
[pathname, router],
|
||||||
)
|
)
|
||||||
|
|
||||||
// Debounce search → URL
|
// Debounce search → URL
|
||||||
|
|||||||
Reference in New Issue
Block a user