42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { keepPreviousData, useQuery } from '@tanstack/react-query'
|
|
import { useEffect, useState } from 'react'
|
|
import type { ListParams, PaginatedResponse } from '@/api/types'
|
|
|
|
/**
|
|
* Standard list-page state: page / page_size wired to the backend's
|
|
* Pagination envelope; changing filters snaps back to page 1.
|
|
*/
|
|
export function useListPage<T>(
|
|
key: string,
|
|
fetcher: (params: ListParams) => Promise<PaginatedResponse<T>>,
|
|
filters: ListParams = {},
|
|
) {
|
|
const [page, setPage] = useState(1)
|
|
const [pageSize, setPageSize] = useState(20)
|
|
|
|
const filterKey = JSON.stringify(filters)
|
|
|
|
useEffect(() => {
|
|
setPage(1)
|
|
}, [filterKey])
|
|
|
|
const query = useQuery({
|
|
queryKey: [key, filterKey, page, pageSize],
|
|
queryFn: () => fetcher({ ...filters, page, page_size: pageSize }),
|
|
placeholderData: keepPreviousData,
|
|
})
|
|
|
|
return {
|
|
query,
|
|
rows: query.data?.data ?? [],
|
|
pagination: query.data?.pagination,
|
|
loading: query.isPending,
|
|
page,
|
|
setPage,
|
|
setPageSize: (size: number) => {
|
|
setPageSize(size)
|
|
setPage(1)
|
|
},
|
|
}
|
|
}
|