From e65a47cff70b92871f4813d3d813b06e057c9cda Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Tue, 29 Oct 2024 14:44:30 +0800 Subject: [PATCH] feat: marketplace list --- .../plugins/marketplace/context.tsx | 28 ++------ .../components/plugins/marketplace/index.tsx | 15 +---- .../plugins/marketplace/list/index.tsx | 2 +- .../components/plugins/marketplace/utils.ts | 67 +++++++++++++++++++ web/app/components/tools/marketplace/hooks.ts | 17 ++--- .../components/tools/marketplace/index.tsx | 27 ++++++-- 6 files changed, 102 insertions(+), 54 deletions(-) create mode 100644 web/app/components/plugins/marketplace/utils.ts diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx index 8754b2c551..7b9712aeef 100644 --- a/web/app/components/plugins/marketplace/context.tsx +++ b/web/app/components/plugins/marketplace/context.tsx @@ -13,6 +13,7 @@ import { useDebounceFn } from 'ahooks' import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch' import type { Plugin } from '../types' import type { PluginsSearchParams } from './types' +import { getMarketplacePlugins } from './utils' export type MarketplaceContextValue = { intersected: boolean @@ -57,31 +58,10 @@ export const MarketplaceContextProvider = ({ const [activePluginType, setActivePluginType] = useState(PLUGIN_TYPE_SEARCH_MAP.all) const [plugins, setPlugins] = useState() - const handleUpdatePlugins = useCallback((query: PluginsSearchParams) => { - const fetchPlugins = async () => { - const response = await fetch( - 'https://marketplace.dify.dev/api/v1/plugins/search/basic', - { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - query: query.query, - page: 1, - page_size: 10, - sort_by: query.sortBy, - sort_order: query.sortOrder, - category: query.category, - tag: query.tag, - }), - }, - ) - const data = await response.json() - setPlugins(data.data.plugins) - } + const handleUpdatePlugins = useCallback(async (query: PluginsSearchParams) => { + const { marketplacePlugins } = await getMarketplacePlugins(query) - fetchPlugins() + setPlugins(marketplacePlugins) }, []) const { run: handleUpdatePluginsWithDebounced } = useDebounceFn(handleUpdatePlugins, { diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx index d8843ce97c..300aad9e7c 100644 --- a/web/app/components/plugins/marketplace/index.tsx +++ b/web/app/components/plugins/marketplace/index.tsx @@ -1,24 +1,13 @@ -import type { Plugin } from '../types' import { MarketplaceContextProvider } from './context' import Description from './description' import IntersectionLine from './intersection-line' import SearchBox from './search-box' import PluginTypeSwitch from './plugin-type-switch' import ListWrapper from './list/list-wrapper' -import type { MarketplaceCollection } from './types' +import { getMarketplaceCollectionsAndPlugins } from './utils' const Marketplace = async () => { - const marketplaceCollectionsData = await globalThis.fetch('https://marketplace.dify.dev/api/v1/collections') - const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json() - const marketplaceCollections = marketplaceCollectionsDataJson.data.collections - const marketplaceCollectionPluginsMap = {} as Record - await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => { - const marketplaceCollectionPluginsData = await globalThis.fetch(`https://marketplace.dify.dev/api/v1/collections/${collection.name}/plugins`) - const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json() - const plugins = marketplaceCollectionPluginsDataJson.data.plugins - - marketplaceCollectionPluginsMap[collection.name] = plugins - })) + const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins() return ( diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx index 8db131f42a..6f268839ec 100644 --- a/web/app/components/plugins/marketplace/list/index.tsx +++ b/web/app/components/plugins/marketplace/list/index.tsx @@ -27,7 +27,7 @@ const List = ({ } { plugins && ( -
+
{ plugins.map(plugin => ( { + let marketplaceCollections = [] as MarketplaceCollection[] + let marketplaceCollectionPluginsMap = {} as Record + try { + const marketplaceCollectionsData = await globalThis.fetch(`${MARKETPLACE_API_URL}/collections`) + const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json() + marketplaceCollections = marketplaceCollectionsDataJson.data.collections + await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => { + const marketplaceCollectionPluginsData = await globalThis.fetch(`${MARKETPLACE_API_URL}/collections/${collection.name}/plugins`) + const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json() + const plugins = marketplaceCollectionPluginsDataJson.data.plugins + + marketplaceCollectionPluginsMap[collection.name] = plugins + })) + } + // eslint-disable-next-line unused-imports/no-unused-vars + catch (e) { + marketplaceCollections = [] + marketplaceCollectionPluginsMap = {} + } + + return { + marketplaceCollections, + marketplaceCollectionPluginsMap, + } +} + +export const getMarketplacePlugins = async (query: PluginsSearchParams) => { + let marketplacePlugins = [] as Plugin[] + try { + const marketplacePluginsData = await globalThis.fetch( + `${MARKETPLACE_API_URL}/plugins`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + page: 1, + page_size: 10, + query: query.query, + sort_by: query.sortBy, + sort_order: query.sortOrder, + category: query.category, + tag: query.tag, + }), + }, + ) + const marketplacePluginsDataJson = await marketplacePluginsData.json() + marketplacePlugins = marketplacePluginsDataJson.data.plugins + } + // eslint-disable-next-line unused-imports/no-unused-vars + catch (e) { + marketplacePlugins = [] + } + + return { + marketplacePlugins, + } +} diff --git a/web/app/components/tools/marketplace/hooks.ts b/web/app/components/tools/marketplace/hooks.ts index 8f89aadfda..0486db71d2 100644 --- a/web/app/components/tools/marketplace/hooks.ts +++ b/web/app/components/tools/marketplace/hooks.ts @@ -5,22 +5,16 @@ import { } from 'react' import type { Plugin } from '@/app/components/plugins/types' import type { MarketplaceCollection } from '@/app/components/plugins/marketplace/types' +import { getMarketplaceCollectionsAndPlugins } from '@/app/components/plugins/marketplace/utils' export const useMarketplace = () => { const [marketplaceCollections, setMarketplaceCollections] = useState([]) const [marketplaceCollectionPluginsMap, setMarketplaceCollectionPluginsMap] = useState>({}) + const [isLoading, setIsLoading] = useState(true) const getMarketplaceCollections = useCallback(async () => { - const marketplaceCollectionsData = await globalThis.fetch('https://marketplace.dify.dev/api/v1/collections') - const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json() - const marketplaceCollections = marketplaceCollectionsDataJson.data.collections - const marketplaceCollectionPluginsMap = {} as Record - await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => { - const marketplaceCollectionPluginsData = await globalThis.fetch(`https://marketplace.dify.dev/api/v1/collections/${collection.name}/plugins`) - const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json() - const plugins = marketplaceCollectionPluginsDataJson.data.plugins - - marketplaceCollectionPluginsMap[collection.name] = plugins - })) + setIsLoading(true) + const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins() + setIsLoading(false) setMarketplaceCollections(marketplaceCollections) setMarketplaceCollectionPluginsMap(marketplaceCollectionPluginsMap) }, []) @@ -29,6 +23,7 @@ export const useMarketplace = () => { }, [getMarketplaceCollections]) return { + isLoading, marketplaceCollections, marketplaceCollectionPluginsMap, } diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx index 1d1a4c3c88..aeed373489 100644 --- a/web/app/components/tools/marketplace/index.tsx +++ b/web/app/components/tools/marketplace/index.tsx @@ -1,6 +1,7 @@ import { RiArrowUpDoubleLine } from '@remixicon/react' import { useMarketplace } from './hooks' import List from '@/app/components/plugins/marketplace/list' +import Loading from '@/app/components/base/loading' type MarketplaceProps = { onMarketplaceScroll: () => void @@ -8,7 +9,12 @@ type MarketplaceProps = { const Marketplace = ({ onMarketplaceScroll, }: MarketplaceProps) => { - const { marketplaceCollections, marketplaceCollectionPluginsMap } = useMarketplace() + const { + isLoading, + marketplaceCollections, + marketplaceCollectionPluginsMap, + } = useMarketplace() + return (
- + { + isLoading && ( +
+ +
+ ) + } + { + !isLoading && ( + + ) + }
) }