73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { useMemo, useState } from 'react'
|
|
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
|
|
|
import { listApis } from '@/api'
|
|
import { hasPermission } from '@/lib'
|
|
import { type Api, type SearchApiParams } from '@/schemas'
|
|
|
|
import { ActionDialogs } from './components/action-dialogs.tsx'
|
|
import { ApiTable } from './components/api-table.tsx'
|
|
import { createColumns } from './components/columns.tsx'
|
|
import { CrudProvider } from './components/crud-provider.tsx'
|
|
import { QUERY_KEY } from './constants.ts'
|
|
|
|
export default function CrudPage() {
|
|
const [pagination, setPagination] = useState({
|
|
pageIndex: 0,
|
|
pageSize: 10,
|
|
})
|
|
|
|
const [searchParams, setSearchParams] = useState<SearchApiParams>({})
|
|
|
|
const { data, isFetching, refetch } = useQuery({
|
|
queryKey: [QUERY_KEY, pagination.pageIndex, pagination.pageSize, searchParams],
|
|
queryFn: () =>
|
|
listApis({
|
|
page: pagination.pageIndex + 1,
|
|
page_size: pagination.pageSize,
|
|
...searchParams,
|
|
}),
|
|
placeholderData: (prev) => prev,
|
|
enabled: hasPermission('api:list'),
|
|
})
|
|
|
|
const tableData = useMemo<Api[]>(() => data?.list ?? [], [data])
|
|
|
|
const columns = useMemo(() => createColumns(), [])
|
|
|
|
const table = useReactTable<Api>({
|
|
data: tableData,
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
manualPagination: true,
|
|
rowCount: data?.total,
|
|
state: { pagination },
|
|
onPaginationChange: setPagination,
|
|
meta: {
|
|
isFetching,
|
|
refetch,
|
|
},
|
|
})
|
|
|
|
const handleSearch = (params: SearchApiParams) => {
|
|
const isSameParams = JSON.stringify(params) === JSON.stringify(searchParams)
|
|
|
|
setSearchParams(params)
|
|
setPagination((prev) => ({ ...prev, pageIndex: 0 }))
|
|
|
|
if (isSameParams && pagination.pageIndex === 0) {
|
|
void refetch()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<CrudProvider>
|
|
<ActionDialogs />
|
|
|
|
<ApiTable table={table} onSearch={handleSearch} />
|
|
</CrudProvider>
|
|
)
|
|
}
|