Refactor apps service toward TanStack Query (#29004)

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

@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'next/navigation'
-import useSWRInfinite from 'swr/infinite'
 import { flatten } from 'lodash-es'
 import { produce } from 'immer'
 import {
@@ -12,33 +11,13 @@ import {
 } from '@remixicon/react'
 import Nav from '../nav'
 import type { NavItem } from '../nav/nav-selector'
-import { fetchAppList } from '@/service/apps'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
 import CreateAppModal from '@/app/components/app/create-app-modal'
 import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal'
-import type { AppListResponse } from '@/models/app'
 import { useAppContext } from '@/context/app-context'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { AppModeEnum } from '@/types/app'
-
-const getKey = (
-  pageIndex: number,
-  previousPageData: AppListResponse,
-  activeTab: string,
-  keywords: string,
-) => {
-  if (!pageIndex || previousPageData.has_more) {
-    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords } }
-
-    if (activeTab !== 'all')
-      params.params.mode = activeTab
-    else
-      delete params.params.mode
-
-    return params
-  }
-  return null
-}
+import { useInfiniteAppList } from '@/service/use-apps'
 
 const AppNav = () => {
   const { t } = useTranslation()
@@ -50,17 +29,21 @@ const AppNav = () => {
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [navItems, setNavItems] = useState<NavItem[]>([])
 
-  const { data: appsData, setSize, mutate } = useSWRInfinite(
-    appId
-      ? (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, 'all', '')
-      : () => null,
-    fetchAppList,
-    { revalidateFirstPage: false },
-  )
+  const {
+    data: appsData,
+    fetchNextPage,
+    hasNextPage,
+    refetch,
+  } = useInfiniteAppList({
+    page: 1,
+    limit: 30,
+    name: '',
+  }, { enabled: !!appId })
 
   const handleLoadMore = useCallback(() => {
-    setSize(size => size + 1)
-  }, [setSize])
+    if (hasNextPage)
+      fetchNextPage()
+  }, [fetchNextPage, hasNextPage])
 
   const openModal = (state: string) => {
     if (state === 'blank')
@@ -73,7 +56,7 @@ const AppNav = () => {
 
   useEffect(() => {
     if (appsData) {
-      const appItems = flatten(appsData?.map(appData => appData.data))
+      const appItems = flatten((appsData.pages ?? []).map(appData => appData.data))
       const navItems = appItems.map((app) => {
         const link = ((isCurrentWorkspaceEditor, app) => {
           if (!isCurrentWorkspaceEditor) {
@@ -132,17 +115,17 @@ const AppNav = () => {
       <CreateAppModal
         show={showNewAppDialog}
         onClose={() => setShowNewAppDialog(false)}
-        onSuccess={() => mutate()}
+        onSuccess={() => refetch()}
       />
       <CreateAppTemplateDialog
         show={showNewAppTemplateDialog}
         onClose={() => setShowNewAppTemplateDialog(false)}
-        onSuccess={() => mutate()}
+        onSuccess={() => refetch()}
       />
       <CreateFromDSLModal
         show={showCreateFromDSLModal}
         onClose={() => setShowCreateFromDSLModal(false)}
-        onSuccess={() => mutate()}
+        onSuccess={() => refetch()}
       />
     </>
   )