1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| import {
| useCallback,
| useEffect,
| useMemo,
| useRef,
| useState,
| } from 'react'
| import {
| useMarketplaceCollectionsAndPlugins,
| useMarketplacePlugins,
| } from '@/app/components/plugins/marketplace/hooks'
| import { PluginType } from '@/app/components/plugins/types'
| import { getMarketplaceListCondition } from '@/app/components/plugins/marketplace/utils'
| import { useAllToolProviders } from '@/service/use-tools'
|
| export const useMarketplace = (searchPluginText: string, filterPluginTags: string[]) => {
| const { data: toolProvidersData, isSuccess } = useAllToolProviders()
| const exclude = useMemo(() => {
| if (isSuccess)
| return toolProvidersData?.filter(toolProvider => !!toolProvider.plugin_id).map(toolProvider => toolProvider.plugin_id!)
| }, [isSuccess, toolProvidersData])
| const {
| isLoading,
| marketplaceCollections,
| marketplaceCollectionPluginsMap,
| queryMarketplaceCollectionsAndPlugins,
| } = useMarketplaceCollectionsAndPlugins()
| const {
| plugins,
| resetPlugins,
| queryPlugins,
| queryPluginsWithDebounced,
| isLoading: isPluginsLoading,
| total: pluginsTotal,
| } = useMarketplacePlugins()
| const [page, setPage] = useState(1)
| const pageRef = useRef(page)
| const searchPluginTextRef = useRef(searchPluginText)
| const filterPluginTagsRef = useRef(filterPluginTags)
|
| useEffect(() => {
| searchPluginTextRef.current = searchPluginText
| filterPluginTagsRef.current = filterPluginTags
| }, [searchPluginText, filterPluginTags])
| useEffect(() => {
| if ((searchPluginText || filterPluginTags.length) && isSuccess) {
| setPage(1)
| pageRef.current = 1
|
| if (searchPluginText) {
| queryPluginsWithDebounced({
| category: PluginType.tool,
| query: searchPluginText,
| tags: filterPluginTags,
| exclude,
| type: 'plugin',
| page: pageRef.current,
| })
| return
| }
| queryPlugins({
| category: PluginType.tool,
| query: searchPluginText,
| tags: filterPluginTags,
| exclude,
| type: 'plugin',
| page: pageRef.current,
| })
| }
| else {
| if (isSuccess) {
| queryMarketplaceCollectionsAndPlugins({
| category: PluginType.tool,
| condition: getMarketplaceListCondition(PluginType.tool),
| exclude,
| type: 'plugin',
| })
| resetPlugins()
| }
| }
| }, [searchPluginText, filterPluginTags, queryPlugins, queryMarketplaceCollectionsAndPlugins, queryPluginsWithDebounced, resetPlugins, exclude, isSuccess])
|
| const handleScroll = useCallback((e: Event) => {
| const target = e.target as HTMLDivElement
| const {
| scrollTop,
| scrollHeight,
| clientHeight,
| } = target
| if (scrollTop + clientHeight >= scrollHeight - 5 && 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: PluginType.tool,
| query: searchPluginText,
| tags: filterPluginTags,
| exclude,
| type: 'plugin',
| page: pageRef.current,
| })
| }
| }
| }, [exclude, plugins, pluginsTotal, queryPlugins])
|
| return {
| isLoading: isLoading || isPluginsLoading,
| marketplaceCollections,
| marketplaceCollectionPluginsMap,
| plugins,
| handleScroll,
| page,
| }
| }
|
|
