From 0e419a7a16b01ecc52192a225e5eb55bb2f7f7c8 Mon Sep 17 00:00:00 2001 From: Yi Date: Thu, 5 Dec 2024 14:44:45 +0800 Subject: [PATCH 1/2] feat: move linear gradient bg to common config --- web/app/components/base/toast/index.tsx | 16 +++--- .../components/workflow/update-dsl-modal.tsx | 4 +- web/tailwind-common-config.ts | 4 ++ web/themes/manual-dark.css | 52 ++++++++++++++++--- web/themes/manual-light.css | 52 ++++++++++++++++--- 5 files changed, 107 insertions(+), 21 deletions(-) diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx index 7c53acdc05..5c8386ac27 100644 --- a/web/app/components/base/toast/index.tsx +++ b/web/app/components/base/toast/index.tsx @@ -50,10 +50,10 @@ const Toast = ({ 'right-0', )}>
@@ -70,9 +70,11 @@ const Toast = ({
}
- - - + {close + && ( + + ) + } } diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx index a750ebe21e..e815223d59 100644 --- a/web/app/components/workflow/update-dsl-modal.tsx +++ b/web/app/components/workflow/update-dsl-modal.tsx @@ -38,8 +38,8 @@ import { ToastContext } from '@/app/components/base/toast' import { useEventEmitterContextContext } from '@/context/event-emitter' import { useStore as useAppStore } from '@/app/components/app/store' import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants' -import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store' import PluginDependency from '@/app/components/workflow/plugin-dependency' +import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store' type UpdateDSLModalProps = { onCancel: () => void @@ -229,7 +229,7 @@ const UpdateDSLModal = ({
-
+
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts index 41f36bc17a..2c6ae1fc33 100644 --- a/web/tailwind-common-config.ts +++ b/web/tailwind-common-config.ts @@ -89,6 +89,10 @@ const config = { 'workflow-process-bg': 'var(--color-workflow-process-bg)', 'marketplace-divider-bg': 'var(--color-marketplace-divider-bg)', 'marketplace-plugin-empty': 'var(--color-marketplace-plugin-empty)', + 'toast-success-bg': 'var(--color-toast-success-bg)', + 'toast-warning-bg': 'var(--color-toast-warning-bg)', + 'toast-error-bg': 'var(--color-toast-error-bg)', + 'toast-info-bg': 'var(--color-toast-info-bg)', }, animation: { 'spin-slow': 'spin 2s linear infinite', diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css index 4e48cdbb16..96b18914bb 100644 --- a/web/themes/manual-dark.css +++ b/web/themes/manual-dark.css @@ -1,7 +1,47 @@ html[data-theme="dark"] { - --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%); - --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%); - --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%); - --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%); - --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #222225 100%); -} \ No newline at end of file + --color-chatbot-bg: linear-gradient( + 180deg, + rgba(34, 34, 37, 0.9) 0%, + rgba(29, 29, 32, 0.9) 90.48% + ); + --color-chat-bubble-bg: linear-gradient( + 180deg, + rgba(200, 206, 218, 0.08) 0%, + rgba(200, 206, 218, 0.02) 100% + ); + --color-workflow-process-bg: linear-gradient( + 90deg, + rgba(24, 24, 27, 0.25) 0%, + rgba(24, 24, 27, 0.04) 100% + ); + --color-marketplace-divider-bg: linear-gradient( + 90deg, + rgba(200, 206, 218, 0.14) 0%, + rgba(0, 0, 0, 0) 100% + ); + --color-marketplace-plugin-empty: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + #222225 100% + ); + --color-toast-success-bg: linear-gradient( + 92deg, + rgba(23, 178, 106, 0.3) 0%, + rgba(0, 0, 0, 0) 100% + ); + --color-toast-warning-bg: linear-gradient( + 92deg, + rgba(247, 144, 9, 0.3) 0%, + rgba(0, 0, 0, 0) 100% + ); + --color-toast-error-bg: linear-gradient( + 92deg, + rgba(240, 68, 56, 0.3) 0%, + rgba(0, 0, 0, 0) 100% + ); + --color-toast-info-bg: linear-gradient( + 92deg, + rgba(11, 165, 236, 0.3) 0%, + rgba(0, 0, 0, 0) 100% + ); +} diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css index e99ba4dd0a..3a0a09303c 100644 --- a/web/themes/manual-light.css +++ b/web/themes/manual-light.css @@ -1,7 +1,47 @@ html[data-theme="light"] { - --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%); - --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%); - --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%); - --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%); - --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%); -} \ No newline at end of file + --color-chatbot-bg: linear-gradient( + 180deg, + rgba(249, 250, 251, 0.9) 0%, + rgba(242, 244, 247, 0.9) 90.48% + ); + --color-chat-bubble-bg: linear-gradient( + 180deg, + #fff 0%, + rgba(255, 255, 255, 0.6) 100% + ); + --color-workflow-process-bg: linear-gradient( + 90deg, + rgba(200, 206, 218, 0.2) 0%, + rgba(200, 206, 218, 0.04) 100% + ); + --color-marketplace-divider-bg: linear-gradient( + 90deg, + rgba(16, 24, 40, 0.08) 0%, + rgba(255, 255, 255, 0) 100% + ); + --color-marketplace-plugin-empty: linear-gradient( + 180deg, + rgba(255, 255, 255, 0) 0%, + #fcfcfd 100% + ); + --color-toast-success-bg: linear-gradient( + 92deg, + rgba(23, 178, 106, 0.25) 0%, + rgba(255, 255, 255, 0) 100% + ); + --color-toast-warning-bg: linear-gradient( + 92deg, + rgba(247, 144, 9, 0.25) 0%, + rgba(255, 255, 255, 0) 100% + ); + --color-toast-error-bg: linear-gradient( + 92deg, + rgba(240, 68, 56, 0.25) 0%, + rgba(255, 255, 255, 0) 100% + ); + --color-toast-info-bg: linear-gradient( + 92deg, + rgba(11, 165, 236, 0.25) 0%, + rgba(255, 255, 255, 0) 100% + ); +} From 0e70e7259461effb3427ca91a0121304059abbb5 Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Thu, 5 Dec 2024 14:54:04 +0800 Subject: [PATCH 2/2] fix: marketplace list --- .../plugins/marketplace/context.tsx | 193 +++++++----------- .../components/plugins/marketplace/hooks.ts | 42 +++- .../components/plugins/marketplace/index.tsx | 12 +- .../marketplace/intersection-line/hooks.ts | 5 +- .../marketplace/intersection-line/index.tsx | 9 +- .../plugins/marketplace/list/list-wrapper.tsx | 13 +- web/service/use-plugins.ts | 3 +- 7 files changed, 131 insertions(+), 146 deletions(-) diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx index 3236e1aefc..79618c6c9e 100644 --- a/web/app/components/plugins/marketplace/context.tsx +++ b/web/app/components/plugins/marketplace/context.tsx @@ -28,6 +28,7 @@ import type { import { DEFAULT_SORT } from './constants' import { useMarketplaceCollectionsAndPlugins, + useMarketplaceContainerScroll, useMarketplacePlugins, } from './hooks' import { @@ -51,7 +52,7 @@ export type MarketplaceContextValue = { resetPlugins: () => void sort: PluginsSort handleSortChange: (sort: PluginsSort) => void - handleQueryPluginsWhenNoCollection: () => void + handleQueryPlugins: () => void marketplaceCollectionsFromClient?: MarketplaceCollection[] setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void marketplaceCollectionPluginsMapFromClient?: Record @@ -75,7 +76,7 @@ export const MarketplaceContext = createContext({ resetPlugins: () => {}, sort: DEFAULT_SORT, handleSortChange: () => {}, - handleQueryPluginsWhenNoCollection: () => {}, + handleQueryPlugins: () => {}, marketplaceCollectionsFromClient: [], setMarketplaceCollectionsFromClient: () => {}, marketplaceCollectionPluginsMapFromClient: {}, @@ -88,6 +89,7 @@ type MarketplaceContextProviderProps = { children: ReactNode searchParams?: SearchParams shouldExclude?: boolean + scrollContainerId?: string } export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) { @@ -98,6 +100,7 @@ export const MarketplaceContextProvider = ({ children, searchParams, shouldExclude, + scrollContainerId, }: MarketplaceContextProviderProps) => { const { data, isSuccess } = useInstalledPluginList(!shouldExclude) const exclude = useMemo(() => { @@ -131,6 +134,7 @@ export const MarketplaceContextProvider = ({ } = useMarketplaceCollectionsAndPlugins() const { plugins, + total: pluginsTotal, resetPlugins, queryPlugins, queryPluginsWithDebounced, @@ -161,34 +165,60 @@ export const MarketplaceContextProvider = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [queryPlugins, queryMarketplaceCollectionsAndPlugins, isSuccess, exclude]) + const handleQueryMarketplaceCollectionsAndPlugins = useCallback(() => { + queryMarketplaceCollectionsAndPlugins({ + category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current, + condition: getMarketplaceListCondition(activePluginTypeRef.current), + exclude, + type: getMarketplaceListFilterType(activePluginTypeRef.current), + }) + resetPlugins() + }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins]) + + const handleQueryPlugins = useCallback((debounced?: boolean) => { + if (debounced) { + queryPluginsWithDebounced({ + 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, + exclude, + type: getMarketplaceListFilterType(activePluginTypeRef.current), + page: pageRef.current, + }) + } + else { + 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, + exclude, + type: getMarketplaceListFilterType(activePluginTypeRef.current), + page: pageRef.current, + }) + } + }, [exclude, queryPluginsWithDebounced, queryPlugins]) + + const handleQuery = useCallback((debounced?: boolean) => { + if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) { + handleQueryMarketplaceCollectionsAndPlugins() + return + } + + handleQueryPlugins(debounced) + }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins]) + const handleSearchPluginTextChange = useCallback((text: string) => { setSearchPluginText(text) searchPluginTextRef.current = text setPage(1) pageRef.current = 1 - if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) { - queryMarketplaceCollectionsAndPlugins({ - category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current, - condition: getMarketplaceListCondition(activePluginTypeRef.current), - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - }) - resetPlugins() - - return - } - - 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, - exclude, - page: pageRef.current, - }) - }, [queryPluginsWithDebounced, queryMarketplaceCollectionsAndPlugins, resetPlugins, exclude]) + handleQuery(true) + }, [handleQuery]) const handleFilterPluginTagsChange = useCallback((tags: string[]) => { setFilterPluginTags(tags) @@ -196,29 +226,8 @@ export const MarketplaceContextProvider = ({ setPage(1) pageRef.current = 1 - if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) { - queryMarketplaceCollectionsAndPlugins({ - category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current, - condition: getMarketplaceListCondition(activePluginTypeRef.current), - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - }) - resetPlugins() - - return - } - - queryPlugins({ - query: searchPluginTextRef.current, - category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current, - tags, - sortBy: sortRef.current.sortBy, - sortOrder: sortRef.current.sortOrder, - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - page: pageRef.current, - }) - }, [queryPlugins, resetPlugins, queryMarketplaceCollectionsAndPlugins, exclude]) + handleQuery() + }, [handleQuery]) const handleActivePluginTypeChange = useCallback((type: string) => { setActivePluginType(type) @@ -226,57 +235,8 @@ export const MarketplaceContextProvider = ({ setPage(1) pageRef.current = 1 - if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) { - queryMarketplaceCollectionsAndPlugins({ - category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type, - condition: getMarketplaceListCondition(type), - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - }) - resetPlugins() - - return - } - - queryPlugins({ - query: searchPluginTextRef.current, - category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type, - tags: filterPluginTagsRef.current, - sortBy: sortRef.current.sortBy, - sortOrder: sortRef.current.sortOrder, - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - page: pageRef.current, - }) - }, [queryPlugins, resetPlugins, queryMarketplaceCollectionsAndPlugins, exclude]) - - const handlePageChange = useCallback(() => { - setPage(pageRef.current + 1) - pageRef.current++ - - if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) { - queryMarketplaceCollectionsAndPlugins({ - category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current, - condition: getMarketplaceListCondition(activePluginTypeRef.current), - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - }) - resetPlugins() - - return - } - - 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, - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - page: pageRef.current, - }) - }, [exclude, queryPlugins, queryMarketplaceCollectionsAndPlugins, resetPlugins]) + handleQuery() + }, [handleQuery]) const handleSortChange = useCallback((sort: PluginsSort) => { setSort(sort) @@ -284,32 +244,19 @@ export const MarketplaceContextProvider = ({ setPage(1) pageRef.current = 1 - 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, - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - page: pageRef.current, - }) - }, [queryPlugins, exclude]) + handleQueryPlugins() + }, [handleQueryPlugins]) - const handleQueryPluginsWhenNoCollection = useCallback(() => { - 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, - exclude, - type: getMarketplaceListFilterType(activePluginTypeRef.current), - page: pageRef.current, - }) - }, [exclude, queryPlugins]) + const handlePageChange = useCallback(() => { + if (pluginsTotal && plugins && pluginsTotal > plugins.length && (!!searchPluginTextRef.current || !!filterPluginTagsRef.current.length)) { + setPage(pageRef.current + 1) + pageRef.current++ - // useMarketplaceContainerScroll(handlePageChange) + handleQueryPlugins() + } + }, [handleQueryPlugins, plugins, pluginsTotal]) + + useMarketplaceContainerScroll(handlePageChange, scrollContainerId) return ( { export const useMarketplacePlugins = () => { const { data, - mutate, + mutateAsync, reset, isPending, } = useMutationPluginsFromMarketplace() + const [prevPlugins, setPrevPlugins] = useState() + const resetPlugins = useCallback(() => { + reset() + setPrevPlugins(undefined) + }, [reset]) + const handleUpdatePlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => { + mutateAsync(pluginsSearchParams).then((res) => { + const currentPage = pluginsSearchParams.page || 1 + const resPlugins = res.data.plugins + if (currentPage > 1) { + setPrevPlugins(prevPlugins => [...(prevPlugins || []), ...resPlugins.map((plugin) => { + return getFormattedPlugin(plugin) + })]) + } + else { + setPrevPlugins(resPlugins.map((plugin) => { + return getFormattedPlugin(plugin) + })) + } + }) + }, [mutateAsync]) const queryPlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => { - mutate(pluginsSearchParams) - }, [mutate]) + handleUpdatePlugins(pluginsSearchParams) + }, [handleUpdatePlugins]) const { run: queryPluginsWithDebounced } = useDebounceFn((pluginsSearchParams: PluginsSearchParams) => { - mutate(pluginsSearchParams) + handleUpdatePlugins(pluginsSearchParams) }, { wait: 500, }) return { - plugins: data?.data?.plugins.map((plugin) => { - return getFormattedPlugin(plugin) - }), + plugins: prevPlugins, total: data?.data?.total, - resetPlugins: reset, + resetPlugins, queryPlugins, queryPluginsWithDebounced, isLoading: isPending, @@ -97,8 +116,11 @@ export const useMixedTranslation = (localeFromOuter?: string) => { } } -export const useMarketplaceContainerScroll = (callback: () => void) => { - const container = document.getElementById('marketplace-container') +export const useMarketplaceContainerScroll = ( + callback: () => void, + scrollContainerId = 'marketplace-container', +) => { + const container = document.getElementById(scrollContainerId) const handleScroll = useCallback((e: Event) => { const target = e.target as HTMLDivElement diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx index 8549206e06..4402866c96 100644 --- a/web/app/components/plugins/marketplace/index.tsx +++ b/web/app/components/plugins/marketplace/index.tsx @@ -14,6 +14,8 @@ type MarketplaceProps = { shouldExclude?: boolean searchParams?: SearchParams pluginTypeSwitchClassName?: string + intersectionContainerId?: string + scrollContainerId?: string } const Marketplace = async ({ locale, @@ -21,6 +23,8 @@ const Marketplace = async ({ shouldExclude, searchParams, pluginTypeSwitchClassName, + intersectionContainerId, + scrollContainerId, }: MarketplaceProps) => { let marketplaceCollections: any = [] let marketplaceCollectionPluginsMap = {} @@ -32,9 +36,13 @@ const Marketplace = async ({ return ( - + - + , + intersectionContainerId = 'marketplace-container', ) => { const intersected = useMarketplaceContext(v => v.intersected) const setIntersected = useMarketplaceContext(v => v.setIntersected) useEffect(() => { - const container = document.getElementById('marketplace-container') + const container = document.getElementById(intersectionContainerId) let observer: IntersectionObserver | undefined if (container && anchorRef.current) { observer = new IntersectionObserver((entries) => { @@ -25,5 +26,5 @@ export const useScrollIntersection = ( observer.observe(anchorRef.current) } return () => observer?.disconnect() - }, [anchorRef, intersected, setIntersected]) + }, [anchorRef, intersected, setIntersected, intersectionContainerId]) } diff --git a/web/app/components/plugins/marketplace/intersection-line/index.tsx b/web/app/components/plugins/marketplace/intersection-line/index.tsx index e521d43f8c..6f8e4b02ab 100644 --- a/web/app/components/plugins/marketplace/intersection-line/index.tsx +++ b/web/app/components/plugins/marketplace/intersection-line/index.tsx @@ -3,10 +3,15 @@ import { useRef } from 'react' import { useScrollIntersection } from './hooks' -const IntersectionLine = () => { +type IntersectionLineProps = { + intersectionContainerId?: string +} +const IntersectionLine = ({ + intersectionContainerId, +}: IntersectionLineProps) => { const ref = useRef(null) - useScrollIntersection(ref) + useScrollIntersection(ref, intersectionContainerId) return (
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx index 173b9c615d..8ae23c5258 100644 --- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx +++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx @@ -26,18 +26,19 @@ const ListWrapper = ({ const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient) const isLoading = useMarketplaceContext(v => v.isLoading) const isSuccessCollections = useMarketplaceContext(v => v.isSuccessCollections) - const handleQueryPluginsWhenNoCollection = useMarketplaceContext(v => v.handleQueryPluginsWhenNoCollection) + const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins) + const page = useMarketplaceContext(v => v.page) useEffect(() => { if (!marketplaceCollectionsFromClient?.length && isSuccessCollections) - handleQueryPluginsWhenNoCollection() - }, [handleQueryPluginsWhenNoCollection, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections]) + handleQueryPlugins() + }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections]) return (
{ plugins && ( -
+
{t('plugin.marketplace.pluginsResult', { num: plugins.length })}
@@ -45,14 +46,14 @@ const ListWrapper = ({ ) } { - isLoading && ( + isLoading && page === 1 && (
) } { - !isLoading && ( + (!isLoading || page > 1) && ( { exclude, type, page = 1, + pageSize = 20, } = pluginsSearchParams return postMarketplace<{ data: PluginsFromMarketplaceResponse }>('/plugins/search/basic', { body: { page, - page_size: 100, + page_size: pageSize, query, sort_by: sortBy, sort_order: sortOrder,