chore: replace all set interval (#3411)

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

@@ -1,12 +1,11 @@
 import type { FC, SVGProps } from 'react'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import useSWR from 'swr'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { omit } from 'lodash-es'
 import { ArrowRightIcon } from '@heroicons/react/24/solid'
-import { useGetState } from 'ahooks'
 import cn from 'classnames'
 import SegmentCard from '../completed/SegmentCard'
 import { FieldInfo } from '../metadata'
@@ -18,7 +17,7 @@ import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast'
 import type { FullDocumentDetail, ProcessRuleResponse } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
-import { asyncRunSafe } from '@/utils'
+import { asyncRunSafe, sleep } from '@/utils'
 import { formatNumber } from '@/utils/format'
 import { fetchIndexingStatus as doFetchIndexingStatus, fetchIndexingEstimate, fetchProcessRule, pauseDocIndexing, resumeDocIndexing } from '@/service/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
@@ -120,45 +119,49 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
   const localDocumentId = docId ?? documentId
   const localIndexingTechnique = indexingType ?? indexingTechnique
 
-  const [indexingStatusDetail, setIndexingStatusDetail, getIndexingStatusDetail] = useGetState<any>(null)
+  const [indexingStatusDetail, setIndexingStatusDetail] = useState<any>(null)
   const fetchIndexingStatus = async () => {
-    try {
-      const status = await doFetchIndexingStatus({ datasetId: localDatasetId, documentId: localDocumentId })
-      setIndexingStatusDetail(status)
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      startQueryStatus()
-    }
-    catch (err) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      stopQueryStatus()
-      notify({ type: 'error', message: `error: ${err}` })
-    }
+    const status = await doFetchIndexingStatus({ datasetId: localDatasetId, documentId: localDocumentId })
+    setIndexingStatusDetail(status)
+    return status
   }
 
-  const [runId, setRunId, getRunId] = useGetState<any>(null)
-
+  const [isStopQuery, setIsStopQuery] = useState(false)
+  const isStopQueryRef = useRef(isStopQuery)
+  useEffect(() => {
+    isStopQueryRef.current = isStopQuery
+  }, [isStopQuery])
   const stopQueryStatus = () => {
-    clearInterval(getRunId())
+    setIsStopQuery(true)
   }
 
-  const startQueryStatus = () => {
-    const runId = setInterval(() => {
-      const indexingStatusDetail = getIndexingStatusDetail()
-      if (indexingStatusDetail?.indexing_status === 'completed') {
+  const startQueryStatus = async () => {
+    if (isStopQueryRef.current)
+      return
+
+    try {
+      const indexingStatusDetail = await fetchIndexingStatus()
+      if (['completed', 'error', 'paused'].includes(indexingStatusDetail?.indexing_status)) {
         stopQueryStatus()
         detailUpdate()
         return
       }
-      fetchIndexingStatus()
-    }, 2500)
-    setRunId(runId)
+      await sleep(2500)
+      await startQueryStatus()
+    }
+    catch (e) {
+      await sleep(2500)
+      await startQueryStatus()
+    }
   }
 
   useEffect(() => {
-    fetchIndexingStatus()
+    setIsStopQuery(false)
+    startQueryStatus()
     return () => {
       stopQueryStatus()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const { data: indexingEstimateDetail, error: indexingEstimateErr } = useSWR({
@@ -300,4 +303,4 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
   )
 }
 
-export default EmbeddingDetail
+export default React.memo(EmbeddingDetail)