refactor(Documents): Remove ProgressBar component and simplify document loading logic

web/app/components/base/progress-bar/index.tsx

@@ -1,20 +0,0 @@
-type ProgressBarProps = {
-  percent: number
-}
-const ProgressBar = ({
-  percent = 0,
-}: ProgressBarProps) => {
-  return (
-    <div className='flex items-center'>
-      <div className='mr-2 w-[100px] rounded-lg bg-gray-100'>
-        <div
-          className='h-1 rounded-lg bg-[#2970FF]'
-          style={{ width: `${percent}%` }}
-        />
-      </div>
-      <div className='text-xs font-medium text-gray-500'>{percent}%</div>
-    </div>
-  )
-}
-
-export default ProgressBar

web/app/components/datasets/documents/index.tsx

@@ -154,14 +154,14 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
     }
   }, [debouncedSearchValue, query.keyword, updateQuery])
 
-  const { data: documentsRes, isFetching: isListLoading } = useDocumentList({
+  const { data: documentsRes, isLoading: isListLoading } = useDocumentList({
     datasetId,
     query: {
       page: currPage + 1,
       limit,
       keyword: debouncedSearchValue,
     },
-    refetchInterval: (isDataSourceNotion && timerCanRun) ? 2500 : 0,
+    refetchInterval: timerCanRun ? 2500 : 0,
   })
 
   const invalidDocumentList = useInvalidDocumentList(datasetId)
@@ -187,10 +187,10 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
     }, 5000)
   }, [])
 
-  const documentsWithProgress = useMemo(() => {
+  useEffect(() => {
     let completedNum = 0
     let percent = 0
-    const documentsData = documentsRes?.data?.map((documentItem) => {
+    documentsRes?.data?.forEach((documentItem) => {
       const { indexing_status, completed_segments, total_segments } = documentItem
       const isEmbedded = indexing_status === 'completed' || indexing_status === 'paused' || indexing_status === 'error'
 
@@ -211,12 +211,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
         percent,
       }
     })
-    if (completedNum === documentsRes?.data?.length)
+    setTimerCanRun(completedNum !== documentsRes?.data?.length)
-      setTimerCanRun(false)
-    return {
-      ...documentsRes,
-      data: documentsData,
-    }
   }, [documentsRes])
   const total = documentsRes?.total || 0
 
@@ -229,7 +224,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
     router.push(`/datasets/${datasetId}/documents/create`)
   }
 
-  const documentsList = isDataSourceNotion ? documentsWithProgress?.data : documentsRes?.data
+  const documentsList = documentsRes?.data
   const [selectedIds, setSelectedIds] = useState<string[]>([])
 
   // Clear selection when search changes to avoid confusion

web/app/components/datasets/documents/list.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { ArrowDownIcon } from '@heroicons/react/24/outline'
 import { pick, uniq } from 'lodash-es'
@@ -22,7 +22,6 @@ import type { Item } from '@/app/components/base/select'
 import { asyncRunSafe } from '@/utils'
 import { formatNumber } from '@/utils/format'
 import NotionIcon from '@/app/components/base/notion-icon'
-import ProgressBar from '@/app/components/base/progress-bar'
 import type { LegacyDataSourceInfo, LocalFileInfo, OnlineDocumentInfo, OnlineDriveInfo } from '@/models/datasets'
 import { ChunkingMode, DataSourceType, DocumentActionType, type SimpleDocumentDetail } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
@@ -91,7 +90,6 @@ const DocumentList: FC<IDocumentListProps> = ({
   const chunkingMode = datasetConfig?.doc_form
   const isGeneralMode = chunkingMode !== ChunkingMode.parentChild
   const isQAMode = chunkingMode === ChunkingMode.qa
-  const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents)
   const [sortField, setSortField] = useState<'name' | 'word_count' | 'hit_count' | 'created_at' | null>('created_at')
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
 
@@ -108,7 +106,7 @@ const DocumentList: FC<IDocumentListProps> = ({
     onUpdate,
   })
 
-  useEffect(() => {
+  const localDocs = useMemo(() => {
     let filteredDocs = documents
 
     if (statusFilter.value !== 'all') {
@@ -119,10 +117,8 @@ const DocumentList: FC<IDocumentListProps> = ({
       )
     }
 
-    if (!sortField) {
+    if (!sortField)
-      setLocalDocs(filteredDocs)
+      return filteredDocs
-      return
-    }
 
     const sortedDocs = [...filteredDocs].sort((a, b) => {
       let aValue: any
@@ -159,7 +155,7 @@ const DocumentList: FC<IDocumentListProps> = ({
       }
     })
 
-    setLocalDocs(sortedDocs)
+    return sortedDocs
   }, [documents, sortField, sortOrder, statusFilter])
 
   const handleSort = (field: 'name' | 'word_count' | 'hit_count' | 'created_at') => {
@@ -418,12 +414,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                   {formatTime(doc.created_at, t('datasetHitTesting.dateTimeFormat') as string)}
                 </td>
                 <td>
-                  {
+                  <StatusItem status={doc.display_status} />
-                    (['indexing', 'splitting', 'parsing', 'cleaning'].includes(doc.indexing_status)
-                      && isOnlineDocument(doc.data_source_type))
-                      ? <ProgressBar percent={doc.percent || 0} />
-                      : <StatusItem status={doc.display_status} />
-                  }
                 </td>
                 <td>
                   <Operations