refactor/marketplace react query (#29028)

Co-authored-by: zhsama <torvalds@linux.do>

web/app/components/tools/marketplace/hooks.ts

@@ -3,12 +3,12 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react'
 import {
   useMarketplaceCollectionsAndPlugins,
   useMarketplacePlugins,
 } from '@/app/components/plugins/marketplace/hooks'
+import { SCROLL_BOTTOM_THRESHOLD } from '@/app/components/plugins/marketplace/constants'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
 import { useAllToolProviders } from '@/service/use-tools'
@@ -31,10 +31,10 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     queryPlugins,
     queryPluginsWithDebounced,
     isLoading: isPluginsLoading,
-    total: pluginsTotal,
+    fetchNextPage,
+    hasNextPage,
+    page: pluginsPage,
   } = useMarketplacePlugins()
-  const [page, setPage] = useState(1)
-  const pageRef = useRef(page)
   const searchPluginTextRef = useRef(searchPluginText)
   const filterPluginTagsRef = useRef(filterPluginTags)
 
@@ -44,9 +44,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
   }, [searchPluginText, filterPluginTags])
   useEffect(() => {
     if ((searchPluginText || filterPluginTags.length) && isSuccess) {
-      setPage(1)
-      pageRef.current = 1
-
       if (searchPluginText) {
         queryPluginsWithDebounced({
           category: PluginCategoryEnum.tool,
@@ -54,7 +51,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
           tags: filterPluginTags,
           exclude,
           type: 'plugin',
-          page: pageRef.current,
         })
         return
       }
@@ -64,7 +60,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
         tags: filterPluginTags,
         exclude,
         type: 'plugin',
-        page: pageRef.current,
       })
     }
     else {
@@ -87,24 +82,13 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
       scrollHeight,
       clientHeight,
     } = target
-    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0) {
+    if (scrollTop + clientHeight >= scrollHeight - SCROLL_BOTTOM_THRESHOLD && scrollTop > 0) {
       const searchPluginText = searchPluginTextRef.current
       const filterPluginTags = filterPluginTagsRef.current
-      if (pluginsTotal && plugins && pluginsTotal > plugins.length && (!!searchPluginText || !!filterPluginTags.length)) {
-        setPage(pageRef.current + 1)
-        pageRef.current++
-
-        queryPlugins({
-          category: PluginCategoryEnum.tool,
-          query: searchPluginText,
-          tags: filterPluginTags,
-          exclude,
-          type: 'plugin',
-          page: pageRef.current,
-        })
-      }
+      if (hasNextPage && (!!searchPluginText || !!filterPluginTags.length))
+        fetchNextPage()
     }
-  }, [exclude, plugins, pluginsTotal, queryPlugins])
+  }, [exclude, fetchNextPage, hasNextPage, plugins, queryPlugins])
 
   return {
     isLoading: isLoading || isPluginsLoading,
@@ -112,6 +96,6 @@ export const useMarketplace = (searchPluginText: string, filterPluginTags: strin
     marketplaceCollectionPluginsMap,
     plugins,
     handleScroll,
-    page,
+    page: Math.max(pluginsPage || 0, 1),
   }
 }