fix: search query and refine the logic (#19987)

web/app/components/app/annotation/index.tsx

@@ -31,126 +31,98 @@ type Props = {
   appDetail: App
 }
 
-const Annotation: FC<Props> = ({
+const Annotation: FC<Props> = (props) => {
-  appDetail,
+  const { appDetail } = props
-}) => {
   const { t } = useTranslation()
-  const [isShowEdit, setIsShowEdit] = React.useState(false)
+  const [isShowEdit, setIsShowEdit] = useState(false)
   const [annotationConfig, setAnnotationConfig] = useState<AnnotationReplyConfig | null>(null)
-  const [isChatApp, setIsChatApp] = useState(false)
+  const [isChatApp] = useState(appDetail.mode !== 'completion')
+  const [controlRefreshSwitch, setControlRefreshSwitch] = useState(Date.now())
+  const { plan, enableBilling } = useProviderContext()
+  const isAnnotationFull = enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse
+  const [isShowAnnotationFullModal, setIsShowAnnotationFullModal] = useState(false)
+  const [queryParams, setQueryParams] = useState<QueryParam>({})
+  const [currPage, setCurrPage] = useState(0)
+  const [limit, setLimit] = useState(APP_PAGE_LIMIT)
+  const [list, setList] = useState<AnnotationItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [isLoading, setIsLoading] = useState(false)
+  const [controlUpdateList, setControlUpdateList] = useState(Date.now())
+  const [currItem, setCurrItem] = useState<AnnotationItem | null>(null)
+  const [isShowViewModal, setIsShowViewModal] = useState(false)
+  const debouncedQueryParams = useDebounce(queryParams, { wait: 500 })
 
   const fetchAnnotationConfig = async () => {
     const res = await doFetchAnnotationConfig(appDetail.id)
     setAnnotationConfig(res as AnnotationReplyConfig)
     return (res as AnnotationReplyConfig).id
   }
-  useEffect(() => {
-    const isChatApp = appDetail.mode !== 'completion'
-    setIsChatApp(isChatApp)
-    if (isChatApp)
-      fetchAnnotationConfig()
-  }, [])
-  const [controlRefreshSwitch, setControlRefreshSwitch] = useState(Date.now())
-  const { plan, enableBilling } = useProviderContext()
-  const isAnnotationFull = (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse)
-  const [isShowAnnotationFullModal, setIsShowAnnotationFullModal] = useState(false)
-  const ensureJobCompleted = async (jobId: string, status: AnnotationEnableStatus) => {
-    let isCompleted = false
-    while (!isCompleted) {
-      const res: any = await queryAnnotationJobStatus(appDetail.id, status, jobId)
-      isCompleted = res.job_status === JobStatus.completed
-      if (isCompleted)
-        break
 
+  useEffect(() => {
+    if (isChatApp) fetchAnnotationConfig()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const ensureJobCompleted = async (jobId: string, status: AnnotationEnableStatus) => {
+    while (true) {
+      const res: any = await queryAnnotationJobStatus(appDetail.id, status, jobId)
+      if (res.job_status === JobStatus.completed) break
       await sleep(2000)
     }
   }
 
-  const [queryParams, setQueryParams] = useState<QueryParam>({})
-  const [currPage, setCurrPage] = React.useState<number>(0)
-  const debouncedQueryParams = useDebounce(queryParams, { wait: 500 })
-  const [limit, setLimit] = React.useState<number>(APP_PAGE_LIMIT)
-  const query = {
-    page: currPage + 1,
-    limit,
-    keyword: debouncedQueryParams.keyword || '',
-  }
-
-  const [controlUpdateList, setControlUpdateList] = useState(Date.now())
-  const [list, setList] = useState<AnnotationItem[]>([])
-  const [total, setTotal] = useState(10)
-  const [isLoading, setIsLoading] = useState(false)
   const fetchList = async (page = 1) => {
     setIsLoading(true)
     try {
       const { data, total }: any = await fetchAnnotationList(appDetail.id, {
-        ...query,
         page,
+        limit,
+        keyword: debouncedQueryParams.keyword || '',
       })
       setList(data as AnnotationItem[])
       setTotal(total)
     }
-    catch {
+ finally {
-
+      setIsLoading(false)
     }
-    setIsLoading(false)
   }
 
   useEffect(() => {
     fetchList(currPage + 1)
-  }, [currPage])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  }, [currPage, limit, debouncedQueryParams])
-  useEffect(() => {
-    fetchList(1)
-    setControlUpdateList(Date.now())
-  }, [queryParams])
 
   const handleAdd = async (payload: AnnotationItemBasic) => {
-    await addAnnotation(appDetail.id, {
+    await addAnnotation(appDetail.id, payload)
-      ...payload,
+    Toast.notify({ message: t('common.api.actionSuccess'), type: 'success' })
-    })
-    Toast.notify({
-      message: t('common.api.actionSuccess'),
-      type: 'success',
-    })
     fetchList()
     setControlUpdateList(Date.now())
   }
 
   const handleRemove = async (id: string) => {
     await delAnnotation(appDetail.id, id)
-    Toast.notify({
+    Toast.notify({ message: t('common.api.actionSuccess'), type: 'success' })
-      message: t('common.api.actionSuccess'),
-      type: 'success',
-    })
     fetchList()
     setControlUpdateList(Date.now())
   }
 
-  const [currItem, setCurrItem] = useState<AnnotationItem | null>(list[0])
-  const [isShowViewModal, setIsShowViewModal] = useState(false)
-  useEffect(() => {
-    if (!isShowEdit)
-      setControlRefreshSwitch(Date.now())
-  }, [isShowEdit])
   const handleView = (item: AnnotationItem) => {
     setCurrItem(item)
     setIsShowViewModal(true)
   }
 
   const handleSave = async (question: string, answer: string) => {
-    await editAnnotation(appDetail.id, (currItem as AnnotationItem).id, {
+    if (!currItem) return
-      question,
+    await editAnnotation(appDetail.id, currItem.id, { question, answer })
-      answer,
+    Toast.notify({ message: t('common.api.actionSuccess'), type: 'success' })
-    })
-    Toast.notify({
-      message: t('common.api.actionSuccess'),
-      type: 'success',
-    })
     fetchList()
     setControlUpdateList(Date.now())
   }
 
+  useEffect(() => {
+    if (!isShowEdit) setControlRefreshSwitch(Date.now())
+  }, [isShowEdit])
+
   return (
     <div className='flex h-full flex-col'>
       <p className='system-sm-regular text-text-tertiary'>{t('appLog.description')}</p>
@@ -211,6 +183,7 @@ const Annotation: FC<Props> = ({
         </Filter>
         {isLoading
           ? <Loading type='app' />
+          // eslint-disable-next-line sonarjs/no-nested-conditional
           : total > 0
             ? <List
               list={list}