fix: marketplace list

web/app/components/plugins/marketplace/context.tsx

@@ -12,20 +12,17 @@ import {
   createContext,
   useContextSelector,
 } from 'use-context-selector'
-import { useDebounceFn } from 'ahooks'
 import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
 import type { Plugin } from '../types'
 import type {
-  CollectionsAndPluginsSearchParams,
   MarketplaceCollection,
-  PluginsSearchParams,
   PluginsSort,
 } from './types'
-import {
-  getMarketplaceCollectionsAndPlugins,
-  getMarketplacePlugins,
-} from './utils'
 import { DEFAULT_SORT } from './constants'
+import {
+  useMarketplaceCollectionsAndPlugins,
+  useMarketplacePlugins,
+} from './hooks'
 
 export type MarketplaceContextValue = {
   intersected: boolean
@@ -83,94 +80,82 @@ export const MarketplaceContextProvider = ({
   const filterPluginTagsRef = useRef(filterPluginTags)
   const [activePluginType, setActivePluginType] = useState(PLUGIN_TYPE_SEARCH_MAP.all)
   const activePluginTypeRef = useRef(activePluginType)
-  const [plugins, setPlugins] = useState<Plugin[]>()
   const [sort, setSort] = useState(DEFAULT_SORT)
   const sortRef = useRef(sort)
-  const [marketplaceCollectionsFromClient, setMarketplaceCollectionsFromClient] = useState<MarketplaceCollection[] | undefined>(undefined)
-  const [marketplaceCollectionPluginsMapFromClient, setMarketplaceCollectionPluginsMapFromClient] = useState<Record<string, Plugin[]> | undefined>(undefined)
-
-  const handleUpdatePlugins = useCallback(async (query: PluginsSearchParams) => {
-    const { marketplacePlugins } = await getMarketplacePlugins(query)
-
-    setPlugins(marketplacePlugins)
-    setMarketplaceCollectionsFromClient(undefined)
-    setMarketplaceCollectionPluginsMapFromClient(undefined)
-  }, [])
-
-  const handleUpdateMarketplaceCollectionsAndPlugins = useCallback(async (query?: CollectionsAndPluginsSearchParams) => {
-    const {
-      marketplaceCollections,
-      marketplaceCollectionPluginsMap,
-    } = await getMarketplaceCollectionsAndPlugins(query)
-
-    setMarketplaceCollectionsFromClient(marketplaceCollections)
-    setMarketplaceCollectionPluginsMapFromClient(marketplaceCollectionPluginsMap)
-    setPlugins(undefined)
-  }, [])
-
-  const { run: handleUpdatePluginsWithDebounced } = useDebounceFn(handleUpdatePlugins, {
-    wait: 500,
-  })
+  const {
+    marketplaceCollections: marketplaceCollectionsFromClient,
+    setMarketplaceCollections: setMarketplaceCollectionsFromClient,
+    marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapFromClient,
+    setMarketplaceCollectionPluginsMap: setMarketplaceCollectionPluginsMapFromClient,
+    queryMarketplaceCollectionsAndPlugins,
+  } = useMarketplaceCollectionsAndPlugins()
+  const {
+    plugins,
+    setPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+  } = useMarketplacePlugins()
 
   const handleSearchPluginTextChange = useCallback((text: string) => {
     setSearchPluginText(text)
     searchPluginTextRef.current = text
 
-    handleUpdatePluginsWithDebounced({
+    queryPluginsWithDebounced({
       query: text,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
       tags: filterPluginTagsRef.current,
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [handleUpdatePluginsWithDebounced])
+  }, [queryPluginsWithDebounced])
 
   const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
     setFilterPluginTags(tags)
     filterPluginTagsRef.current = tags
 
-    handleUpdatePlugins({
+    queryPlugins({
       query: searchPluginTextRef.current,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
       tags,
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [handleUpdatePlugins])
+  }, [queryPlugins])
 
   const handleActivePluginTypeChange = useCallback((type: string) => {
     setActivePluginType(type)
     activePluginTypeRef.current = type
 
     if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
-      handleUpdateMarketplaceCollectionsAndPlugins({
+      queryMarketplaceCollectionsAndPlugins({
         category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
       })
+      setPlugins(undefined)
 
       return
     }
 
-    handleUpdatePlugins({
+    queryPlugins({
       query: searchPluginTextRef.current,
       category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
       tags: filterPluginTagsRef.current,
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [handleUpdatePlugins, handleUpdateMarketplaceCollectionsAndPlugins])
+  }, [queryPlugins, setPlugins, queryMarketplaceCollectionsAndPlugins])
 
   const handleSortChange = useCallback((sort: PluginsSort) => {
     setSort(sort)
     sortRef.current = sort
 
-    handleUpdatePlugins({
+    queryPlugins({
       query: searchPluginTextRef.current,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
       tags: filterPluginTagsRef.current,
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [handleUpdatePlugins])
+  }, [queryPlugins])
 
   return (
     <MarketplaceContext.Provider

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

@@ -0,0 +1,65 @@
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { useDebounceFn } from 'ahooks'
+import type { Plugin } from '../types'
+import type {
+  CollectionsAndPluginsSearchParams,
+  MarketplaceCollection,
+  PluginsSearchParams,
+} from './types'
+import {
+  getMarketplaceCollectionsAndPlugins,
+  getMarketplacePlugins,
+} from './utils'
+
+export const useMarketplaceCollectionsAndPlugins = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [marketplaceCollections, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
+  const [marketplaceCollectionPluginsMap, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
+
+  const queryMarketplaceCollectionsAndPlugins = useCallback(async (query?: CollectionsAndPluginsSearchParams) => {
+    setIsLoading(true)
+    const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins(query)
+    setIsLoading(false)
+
+    setMarketplaceCollections(marketplaceCollections)
+    setMarketplaceCollectionPluginsMap(marketplaceCollectionPluginsMap)
+  }, [])
+
+  return {
+    marketplaceCollections,
+    setMarketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    setMarketplaceCollectionPluginsMap,
+    queryMarketplaceCollectionsAndPlugins,
+    isLoading,
+  }
+}
+
+export const useMarketplacePlugins = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [plugins, setPlugins] = useState<Plugin[]>()
+
+  const queryPlugins = useCallback(async (query: PluginsSearchParams) => {
+    setIsLoading(true)
+    const { marketplacePlugins } = await getMarketplacePlugins(query)
+    setIsLoading(false)
+
+    setPlugins(marketplacePlugins)
+  }, [])
+
+  const { run: queryPluginsWithDebounced } = useDebounceFn(queryPlugins, {
+    wait: 500,
+  })
+
+  return {
+    plugins,
+    setPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading,
+    setIsLoading,
+  }
+}

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

@@ -1,68 +1,48 @@
 import {
-  useCallback,
   useEffect,
-  useState,
 } from 'react'
-import { useDebounceFn } from 'ahooks'
-import type { Plugin } from '@/app/components/plugins/types'
-import type {
-  MarketplaceCollection,
-  PluginsSearchParams,
-} from '@/app/components/plugins/marketplace/types'
 import {
-  getMarketplaceCollectionsAndPlugins,
-  getMarketplacePlugins,
-} from '@/app/components/plugins/marketplace/utils'
+  useMarketplaceCollectionsAndPlugins,
+  useMarketplacePlugins,
+} from '@/app/components/plugins/marketplace/hooks'
 
 export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
-  const [marketplaceCollections, setMarketplaceCollections] = useState<MarketplaceCollection[]>([])
-  const [marketplaceCollectionPluginsMap, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>({})
-  const [isLoading, setIsLoading] = useState(true)
-  const [plugins, setPlugins] = useState<Plugin[]>()
-
-  const handleUpldateMarketplaceCollections = useCallback(async () => {
-    setIsLoading(true)
-    const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins()
-    setIsLoading(false)
-
-    setMarketplaceCollections(marketplaceCollections)
-    setMarketplaceCollectionPluginsMap(marketplaceCollectionPluginsMap)
-    setPlugins(undefined)
-  }, [])
-
-  const handleUpdatePlugins = async (query: PluginsSearchParams) => {
-    setIsLoading(true)
-    const { marketplacePlugins } = await getMarketplacePlugins(query)
-    setIsLoading(false)
-
-    setPlugins(marketplacePlugins)
-  }
-
-  const { run: handleUpdatePluginsWithDebounced } = useDebounceFn(handleUpdatePlugins, {
-    wait: 500,
-  })
+  const {
+    isLoading,
+    marketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    queryMarketplaceCollectionsAndPlugins,
+  } = useMarketplaceCollectionsAndPlugins()
+  const {
+    plugins,
+    setPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading: isPluginsLoading,
+  } = useMarketplacePlugins()
 
   useEffect(() => {
     if (searchPluginText || filterPluginTags.length) {
       if (searchPluginText) {
-        handleUpdatePluginsWithDebounced({
+        queryPluginsWithDebounced({
           query: searchPluginText,
           tags: filterPluginTags,
         })
         return
       }
-      handleUpdatePlugins({
+      queryPlugins({
         query: searchPluginText,
         tags: filterPluginTags,
       })
     }
     else {
-      handleUpldateMarketplaceCollections()
+      queryMarketplaceCollectionsAndPlugins()
+      setPlugins(undefined)
     }
-  }, [searchPluginText, filterPluginTags, handleUpdatePluginsWithDebounced, handleUpldateMarketplaceCollections])
+  }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, setPlugins])
 
   return {
-    isLoading,
+    isLoading: isLoading || isPluginsLoading,
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
     plugins,

web/app/components/tools/marketplace/index.tsx

@@ -58,8 +58,8 @@ const Marketplace = ({
       {
         !isLoading && (
           <List
-            marketplaceCollections={marketplaceCollections}
-            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+            marketplaceCollections={marketplaceCollections || []}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
             plugins={plugins}
             showInstallButton
           />