chore: replace all set interval (#3411)

web/app/components/datasets/create/embedding-process/index.tsx

@@ -21,6 +21,7 @@ import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useProviderContext } from '@/context/provider-context'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { sleep } from '@/utils'
 
 type Props = {
   datasetId: string
@@ -95,38 +96,41 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
     return status.data
   }
 
-  // const [_, setRunId, getRunId] = useGetState<ReturnType<typeof setInterval>>()
-  const [runId, setRunId] = useState<ReturnType<typeof setInterval>>()
-  const runIdRef = useRef(runId)
-  const getRunId = () => runIdRef.current
+  const [isStopQuery, setIsStopQuery] = useState(false)
+  const isStopQueryRef = useRef(isStopQuery)
   useEffect(() => {
-    runIdRef.current = runId
-  }, [runId])
+    isStopQueryRef.current = isStopQuery
+  }, [isStopQuery])
   const stopQueryStatus = () => {
-    clearInterval(getRunId())
-    setRunId(undefined)
+    setIsStopQuery(true)
   }
 
-  const startQueryStatus = () => {
-    const runId = setInterval(async () => {
-      // It's so strange that the interval can't be cleared after the clearInterval called. And the runId is current.
-      if (!getRunId())
-        return
+  const startQueryStatus = async () => {
+    if (isStopQueryRef.current)
+      return
 
+    try {
       const indexingStatusBatchDetail = await fetchIndexingStatus()
-      const isCompleted = indexingStatusBatchDetail.every(indexingStatusDetail => ['completed', 'error'].includes(indexingStatusDetail.indexing_status))
-      if (isCompleted)
+      const isCompleted = indexingStatusBatchDetail.every(indexingStatusDetail => ['completed', 'error', 'paused'].includes(indexingStatusDetail.indexing_status))
+      if (isCompleted) {
         stopQueryStatus()
-    }, 2500)
-    setRunId(runId)
+        return
+      }
+      await sleep(2500)
+      await startQueryStatus()
+    }
+    catch (e) {
+      await sleep(2500)
+      await startQueryStatus()
+    }
   }
 
   useEffect(() => {
-    fetchIndexingStatus()
     startQueryStatus()
     return () => {
       stopQueryStatus()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   // get rule
@@ -154,7 +158,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
     return indexingStatusBatchDetail.some(indexingStatusDetail => ['indexing', 'splitting', 'parsing', 'cleaning'].includes(indexingStatusDetail?.indexing_status || ''))
   }, [indexingStatusBatchDetail])
   const isEmbeddingCompleted = useMemo(() => {
-    return indexingStatusBatchDetail.every(indexingStatusDetail => ['completed', 'error'].includes(indexingStatusDetail?.indexing_status || ''))
+    return indexingStatusBatchDetail.every(indexingStatusDetail => ['completed', 'error', 'paused'].includes(indexingStatusDetail?.indexing_status || ''))
   }, [indexingStatusBatchDetail])
 
   const getSourceName = (id: string) => {

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)