refactor: streamline dataset detail fetching and improve dataset list handling across components

web/app/components/header/dataset-nav/index.tsx

@@ -7,39 +7,31 @@ import {
   RiBook2Fill,
   RiBook2Line,
 } from '@remixicon/react'
-import useSWR from 'swr'
-import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import Nav from '../nav'
 import type { NavItem } from '../nav/nav-selector'
-import { fetchDatasetDetail, fetchDatasets } from '@/service/datasets'
-import type { DataSetListResponse } from '@/models/datasets'
 import { basePath } from '@/utils/var'
-
-const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
-  if (!pageIndex || previousPageData.has_more)
-    return { url: 'datasets', params: { page: pageIndex + 1, limit: 30 } }
-  return null
-}
+import { useDatasetDetail, useDatasetList } from '@/service/knowledge/use-dataset'
 
 const DatasetNav = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const { datasetId } = useParams()
-  const { data: currentDataset } = useSWR(
-    datasetId
-      ? {
-        url: 'fetchDatasetDetail',
-        datasetId,
-      }
-      : null,
-    apiParams => fetchDatasetDetail(apiParams.datasetId as string))
-  const { data: datasetsData, setSize } = useSWRInfinite(datasetId ? getKey : () => null, fetchDatasets, { revalidateFirstPage: false, revalidateAll: true })
-  const datasetItems = flatten(datasetsData?.map(datasetData => datasetData.data))
+  const { data: currentDataset } = useDatasetDetail(datasetId as string)
+  const {
+    data: datasetList,
+    fetchNextPage,
+    hasNextPage,
+  } = useDatasetList({
+    initialPage: 1,
+    limit: 30,
+  })
+  const datasetItems = flatten(datasetList?.pages.map(datasetData => datasetData.data))
 
   const handleLoadMore = useCallback(() => {
-    setSize(size => size + 1)
-  }, [setSize])
+    if (hasNextPage)
+      fetchNextPage()
+  }, [hasNextPage, fetchNextPage])
 
   return (
     <Nav