feat(ui): Improve document list refresh mechanism in ClearDocumentsDialog
- Replace direct API call with callback pattern for document list refresh - Ensure document list updates regardless of operation success/failure - Improve component decoupling between ClearDocumentsDialog and DocumentManager
This commit is contained in:
@@ -13,7 +13,7 @@ import Input from '@/components/ui/Input'
|
|||||||
import Checkbox from '@/components/ui/Checkbox'
|
import Checkbox from '@/components/ui/Checkbox'
|
||||||
import { toast } from 'sonner'
|
import { toast } from 'sonner'
|
||||||
import { errorMessage } from '@/lib/utils'
|
import { errorMessage } from '@/lib/utils'
|
||||||
import { clearDocuments, clearCache, getDocuments } from '@/api/lightrag'
|
import { clearDocuments, clearCache } from '@/api/lightrag'
|
||||||
import { useBackendState } from '@/stores/state'
|
import { useBackendState } from '@/stores/state'
|
||||||
|
|
||||||
import { EraserIcon, AlertTriangleIcon } from 'lucide-react'
|
import { EraserIcon, AlertTriangleIcon } from 'lucide-react'
|
||||||
@@ -35,7 +35,11 @@ const Label = ({
|
|||||||
</label>
|
</label>
|
||||||
)
|
)
|
||||||
|
|
||||||
export default function ClearDocumentsDialog() {
|
interface ClearDocumentsDialogProps {
|
||||||
|
onDocumentsCleared?: () => Promise<void>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ClearDocumentsDialog({ onDocumentsCleared }: ClearDocumentsDialogProps) {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const [open, setOpen] = useState(false)
|
const [open, setOpen] = useState(false)
|
||||||
const [confirmText, setConfirmText] = useState('')
|
const [confirmText, setConfirmText] = useState('')
|
||||||
@@ -55,10 +59,8 @@ export default function ClearDocumentsDialog() {
|
|||||||
if (!isConfirmEnabled) return
|
if (!isConfirmEnabled) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 清空文档
|
|
||||||
const result = await clearDocuments()
|
const result = await clearDocuments()
|
||||||
|
|
||||||
// 如果选择了清空缓存,则清空缓存
|
|
||||||
if (clearCacheOption) {
|
if (clearCacheOption) {
|
||||||
try {
|
try {
|
||||||
await clearCache()
|
await clearCache()
|
||||||
@@ -70,23 +72,28 @@ export default function ClearDocumentsDialog() {
|
|||||||
|
|
||||||
if (result.status === 'success') {
|
if (result.status === 'success') {
|
||||||
toast.success(t('documentPanel.clearDocuments.success'))
|
toast.success(t('documentPanel.clearDocuments.success'))
|
||||||
|
|
||||||
// 刷新文档列表和后端状态
|
|
||||||
try {
|
|
||||||
await getDocuments()
|
|
||||||
check()
|
|
||||||
} catch (refreshErr) {
|
|
||||||
console.error('Error refreshing documents:', refreshErr)
|
|
||||||
}
|
|
||||||
|
|
||||||
setOpen(false)
|
|
||||||
} else {
|
} else {
|
||||||
toast.error(t('documentPanel.clearDocuments.failed', { message: result.message }))
|
toast.error(t('documentPanel.clearDocuments.failed', { message: result.message }))
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(t('documentPanel.clearDocuments.error', { error: errorMessage(err) }))
|
toast.error(t('documentPanel.clearDocuments.error', { error: errorMessage(err) }))
|
||||||
|
} finally {
|
||||||
|
// Execute these operations regardless of success or failure
|
||||||
|
try {
|
||||||
|
// Update backend state
|
||||||
|
await check()
|
||||||
|
|
||||||
|
// Refresh document list
|
||||||
|
if (onDocumentsCleared) {
|
||||||
|
await onDocumentsCleared()
|
||||||
}
|
}
|
||||||
}, [isConfirmEnabled, clearCacheOption, setOpen, t, check])
|
} catch (refreshErr) {
|
||||||
|
console.error('Error refreshing state:', refreshErr)
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen(false)
|
||||||
|
}
|
||||||
|
}, [isConfirmEnabled, clearCacheOption, setOpen, t, check, onDocumentsCleared])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
@@ -386,7 +386,7 @@ export default function DocumentManager() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
<ClearDocumentsDialog />
|
<ClearDocumentsDialog onDocumentsCleared={fetchDocuments} />
|
||||||
<UploadDocumentsDialog />
|
<UploadDocumentsDialog />
|
||||||
<PipelineStatusDialog
|
<PipelineStatusDialog
|
||||||
open={showPipelineStatus}
|
open={showPipelineStatus}
|
||||||
|
Reference in New Issue
Block a user