feat: add reloadKey prop to various components for improved data fetching control
This commit is contained in:
@@ -196,6 +196,7 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
|
|||||||
filters,
|
filters,
|
||||||
fetchList,
|
fetchList,
|
||||||
enabled: Boolean(knowledgeBaseId),
|
enabled: Boolean(knowledgeBaseId),
|
||||||
|
reloadKey: knowledgeBaseId,
|
||||||
loadFailed: t("knowledge.loadDocumentsFailed"),
|
loadFailed: t("knowledge.loadDocumentsFailed"),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -200,6 +200,7 @@ export function RetrieveLogList({
|
|||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
fetchList={(query) => fetchKnowledgeRetrieveLogs({ knowledgeBaseId, ...query })}
|
fetchList={(query) => fetchKnowledgeRetrieveLogs({ knowledgeBaseId, ...query })}
|
||||||
|
reloadKey={knowledgeBaseId}
|
||||||
getItemId={(item) => item.id}
|
getItemId={(item) => item.id}
|
||||||
getRowClassName={() => "cursor-pointer"}
|
getRowClassName={() => "cursor-pointer"}
|
||||||
onRowClick={(item) => handleOpenDetail(item.id)}
|
onRowClick={(item) => handleOpenDetail(item.id)}
|
||||||
|
|||||||
@@ -163,6 +163,7 @@ export type DashboardCrudPageProps<TItem, TPayload> = {
|
|||||||
handleLabel: string
|
handleLabel: string
|
||||||
}
|
}
|
||||||
pageSize?: number
|
pageSize?: number
|
||||||
|
reloadKey?: string | number | null
|
||||||
layout?: "page" | "fragment"
|
layout?: "page" | "fragment"
|
||||||
showToolbar?: boolean
|
showToolbar?: boolean
|
||||||
showToolbarActions?: boolean
|
showToolbarActions?: boolean
|
||||||
@@ -205,6 +206,7 @@ export function DashboardCrudPage<TItem, TPayload>({
|
|||||||
renderRowActions,
|
renderRowActions,
|
||||||
sort,
|
sort,
|
||||||
pageSize = 20,
|
pageSize = 20,
|
||||||
|
reloadKey,
|
||||||
layout = "page",
|
layout = "page",
|
||||||
showToolbar = true,
|
showToolbar = true,
|
||||||
showToolbarActions = true,
|
showToolbarActions = true,
|
||||||
@@ -227,6 +229,7 @@ export function DashboardCrudPage<TItem, TPayload>({
|
|||||||
filters,
|
filters,
|
||||||
fetchList,
|
fetchList,
|
||||||
pageSize,
|
pageSize,
|
||||||
|
reloadKey,
|
||||||
loadFailed: labels.loadFailed,
|
loadFailed: labels.loadFailed,
|
||||||
})
|
})
|
||||||
const draftFilters = list.draftFilters
|
const draftFilters = list.draftFilters
|
||||||
|
|||||||
@@ -68,6 +68,7 @@ export type DashboardListPageProps<TItem> = {
|
|||||||
onRowClick?: (item: TItem) => void
|
onRowClick?: (item: TItem) => void
|
||||||
pageSize?: number
|
pageSize?: number
|
||||||
enabled?: boolean
|
enabled?: boolean
|
||||||
|
reloadKey?: string | number | null
|
||||||
layout?: "page" | "fragment"
|
layout?: "page" | "fragment"
|
||||||
tableShellClassName?: string
|
tableShellClassName?: string
|
||||||
labels: {
|
labels: {
|
||||||
@@ -90,6 +91,7 @@ export function DashboardListPage<TItem>({
|
|||||||
onRowClick,
|
onRowClick,
|
||||||
pageSize,
|
pageSize,
|
||||||
enabled,
|
enabled,
|
||||||
|
reloadKey,
|
||||||
layout = "page",
|
layout = "page",
|
||||||
tableShellClassName,
|
tableShellClassName,
|
||||||
labels,
|
labels,
|
||||||
@@ -99,6 +101,7 @@ export function DashboardListPage<TItem>({
|
|||||||
fetchList,
|
fetchList,
|
||||||
pageSize,
|
pageSize,
|
||||||
enabled,
|
enabled,
|
||||||
|
reloadKey,
|
||||||
loadFailed: labels.loadFailed,
|
loadFailed: labels.loadFailed,
|
||||||
})
|
})
|
||||||
const renderContext: DashboardListRenderContext<TItem> = {
|
const renderContext: DashboardListRenderContext<TItem> = {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useCallback, useEffect, useState } from "react"
|
import { useCallback, useEffect, useRef, useState } from "react"
|
||||||
import { toast } from "sonner"
|
import { toast } from "sonner"
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -24,6 +24,7 @@ export type DashboardPagedListOptions<TItem> = {
|
|||||||
pageSize?: number
|
pageSize?: number
|
||||||
loadFailed: string
|
loadFailed: string
|
||||||
enabled?: boolean
|
enabled?: boolean
|
||||||
|
reloadKey?: string | number | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useDashboardPagedList<TItem>({
|
export function useDashboardPagedList<TItem>({
|
||||||
@@ -32,7 +33,10 @@ export function useDashboardPagedList<TItem>({
|
|||||||
pageSize = 20,
|
pageSize = 20,
|
||||||
loadFailed,
|
loadFailed,
|
||||||
enabled = true,
|
enabled = true,
|
||||||
|
reloadKey,
|
||||||
}: DashboardPagedListOptions<TItem>) {
|
}: DashboardPagedListOptions<TItem>) {
|
||||||
|
const fetchListRef = useRef(fetchList)
|
||||||
|
fetchListRef.current = fetchList
|
||||||
const filtersKey = filters
|
const filtersKey = filters
|
||||||
.map(
|
.map(
|
||||||
(filter) =>
|
(filter) =>
|
||||||
@@ -65,7 +69,7 @@ export function useDashboardPagedList<TItem>({
|
|||||||
|
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
const data = await fetchList(
|
const data = await fetchListRef.current(
|
||||||
buildDashboardCrudQuery({
|
buildDashboardCrudQuery({
|
||||||
values: appliedFilters,
|
values: appliedFilters,
|
||||||
filters,
|
filters,
|
||||||
@@ -80,7 +84,7 @@ export function useDashboardPagedList<TItem>({
|
|||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [appliedFilters, enabled, fetchList, filtersKey, limit, loadFailed, page])
|
}, [appliedFilters, enabled, filtersKey, limit, loadFailed, page, reloadKey])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
void loadData()
|
void loadData()
|
||||||
|
|||||||
Reference in New Issue
Block a user