fix(resume): paginate batch details
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
import { useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { toast } from 'sonner'
|
import { toast } from 'sonner'
|
||||||
import type { ResumeImportItem, ResumeImportOutcome } from '@/api/types'
|
import type { ResumeImportItem, ResumeImportOutcome } from '@/api/types'
|
||||||
@@ -57,13 +57,16 @@ export function ResumeImportBatchDetailSheet({ batchId, onOpenChange }: Props) {
|
|||||||
|
|
||||||
const batch = batchQuery.data?.data
|
const batch = batchQuery.data?.data
|
||||||
|
|
||||||
const itemsQuery = useQuery({
|
const itemsQuery = useInfiniteQuery({
|
||||||
queryKey: ['resume-import-items', batchId, outcome],
|
queryKey: ['resume-import-items', batchId, outcome],
|
||||||
queryFn: () =>
|
queryFn: ({ pageParam }) =>
|
||||||
fetchImportBatchItems(batchId as string, {
|
fetchImportBatchItems(batchId as string, {
|
||||||
|
page: pageParam,
|
||||||
page_size: 100,
|
page_size: 100,
|
||||||
...(outcome === 'all' ? {} : { outcome }),
|
...(outcome === 'all' ? {} : { outcome }),
|
||||||
}),
|
}),
|
||||||
|
initialPageParam: 1,
|
||||||
|
getNextPageParam: (lastPage) => lastPage.pagination.next_page ?? undefined,
|
||||||
enabled: batchId !== null,
|
enabled: batchId !== null,
|
||||||
// Follow the batch: keep refreshing the report while rows are still moving.
|
// Follow the batch: keep refreshing the report while rows are still moving.
|
||||||
refetchInterval: batch && (batch.status === 'completed' || batch.status === 'failed')
|
refetchInterval: batch && (batch.status === 'completed' || batch.status === 'failed')
|
||||||
@@ -71,7 +74,7 @@ export function ResumeImportBatchDetailSheet({ batchId, onOpenChange }: Props) {
|
|||||||
: POLL_INTERVAL,
|
: POLL_INTERVAL,
|
||||||
})
|
})
|
||||||
|
|
||||||
const items = itemsQuery.data?.data ?? []
|
const items = itemsQuery.data?.pages.flatMap((page) => page.data) ?? []
|
||||||
const refresh = () => {
|
const refresh = () => {
|
||||||
void batchQuery.refetch()
|
void batchQuery.refetch()
|
||||||
void itemsQuery.refetch()
|
void itemsQuery.refetch()
|
||||||
@@ -255,6 +258,15 @@ export function ResumeImportBatchDetailSheet({ batchId, onOpenChange }: Props) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
{itemsQuery.hasNextPage && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => void itemsQuery.fetchNextPage()}
|
||||||
|
disabled={itemsQuery.isFetchingNextPage}
|
||||||
|
>
|
||||||
|
{itemsQuery.isFetchingNextPage ? '加载中…' : '加载更多'}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user