From 6a63a03cb2ce1bdac725a0b2112a92e1c6e0be0b Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Thu, 14 Nov 2024 14:47:53 +0800 Subject: [PATCH] feat: tool list use query --- web/app/components/tools/marketplace/index.tsx | 16 ++++++++++++++-- web/app/components/tools/provider-list.tsx | 16 ++++------------ web/i18n/en-US/common.ts | 1 + web/i18n/en-US/plugin.ts | 2 +- web/i18n/zh-Hans/common.ts | 1 + web/i18n/zh-Hans/plugin.ts | 2 +- web/service/use-tools.ts | 9 +++++++++ 7 files changed, 31 insertions(+), 16 deletions(-) diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx index e7c1aaec9e..2c56cdd322 100644 --- a/web/app/components/tools/marketplace/index.tsx +++ b/web/app/components/tools/marketplace/index.tsx @@ -1,9 +1,13 @@ -import { RiArrowUpDoubleLine } from '@remixicon/react' +import { + RiArrowRightUpLine, + RiArrowUpDoubleLine, +} from '@remixicon/react' import { useTranslation } from 'react-i18next' import { useMarketplace } from './hooks' import List from '@/app/components/plugins/marketplace/list' import Loading from '@/app/components/base/loading' import { getLocaleOnClient } from '@/i18n' +import { MARKETPLACE_URL_PREFIX } from '@/config' type MarketplaceProps = { searchPluginText: string @@ -51,7 +55,15 @@ const Marketplace = ({ {t('plugin.category.bundles')} - {t('plugin.marketplace.inDifyMarketplace')} + {t('common.operation.in')} + + {t('plugin.marketplace.difyMarketplace')} + + { diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx index acec3dad7e..364c5e00b9 100644 --- a/web/app/components/tools/provider-list.tsx +++ b/web/app/components/tools/provider-list.tsx @@ -10,10 +10,10 @@ import LabelFilter from '@/app/components/tools/labels/filter' import Input from '@/app/components/base/input' import ProviderDetail from '@/app/components/tools/provider/detail' import Empty from '@/app/components/tools/add-tool-modal/empty' -import { fetchCollectionList } from '@/service/tools' import Card from '@/app/components/plugins/card' import CardMoreInfo from '@/app/components/plugins/card/card-more-info' import { useSelector as useAppContextSelector } from '@/context/app-context' +import { useAllToolProviders } from '@/service/use-tools' const ProviderList = () => { const { t } = useTranslation() @@ -36,8 +36,7 @@ const ProviderList = () => { const handleKeywordsChange = (value: string) => { setKeywords(value) } - - const [collectionList, setCollectionList] = useState([]) + const { data: collectionList, refetch } = useAllToolProviders() const filteredCollectionList = useMemo(() => { return collectionList.filter((collection) => { if (collection.type !== activeTab) @@ -49,13 +48,6 @@ const ProviderList = () => { return true }) }, [activeTab, tagFilterValue, keywords, collectionList]) - const getProviderList = async () => { - const list = await fetchCollectionList() - setCollectionList([...list]) - } - useEffect(() => { - getProviderList() - }, []) const [currentProvider, setCurrentProvider] = useState() useEffect(() => { @@ -106,7 +98,7 @@ const ProviderList = () => { > { setCurrentProvider(undefined)} - onRefreshData={getProviderList} + onRefreshData={refetch} /> )} diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts index b9d4f80265..97b158904b 100644 --- a/web/i18n/en-US/common.ts +++ b/web/i18n/en-US/common.ts @@ -44,6 +44,7 @@ const translation = { zoomOut: 'Zoom Out', zoomIn: 'Zoom In', openInNewTab: 'Open in new tab', + in: 'in', }, errorMsg: { fieldRequired: '{{field}} is required', diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index 402d1a21b1..0fc944f3e8 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -126,7 +126,7 @@ const translation = { empower: 'Empower your AI development', discover: 'Discover', and: 'and', - inDifyMarketplace: 'in Dify Marketplace', + difyMarketplace: 'Dify Marketplace', moreFrom: 'More from Marketplace', noPluginFound: 'No plugin found', pluginsResult: '{{num}} results', diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts index 170713b95c..28be0bf3e9 100644 --- a/web/i18n/zh-Hans/common.ts +++ b/web/i18n/zh-Hans/common.ts @@ -44,6 +44,7 @@ const translation = { zoomOut: '缩小', zoomIn: '放大', openInNewTab: '在新标签页打开', + in: '在', }, errorMsg: { fieldRequired: '{{field}} 为必填项', diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index a78fdb31f7..8769762be7 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -126,7 +126,7 @@ const translation = { empower: '助力您的 AI 开发', discover: '探索', and: '和', - inDifyMarketplace: '在 Dify 市场中', + difyMarketplace: 'Dify 市场', moreFrom: '更多来自市场', noPluginFound: '未找到插件', pluginsResult: '{{num}} 个插件结果', diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts index 8b06d47342..36b8c3d120 100644 --- a/web/service/use-tools.ts +++ b/web/service/use-tools.ts @@ -13,6 +13,15 @@ import { const NAME_SPACE = 'tools' +const useAllToolProvidersKey = [NAME_SPACE, 'allToolProviders'] +export const useAllToolProviders = () => { + return useQuery({ + queryKey: useAllToolProvidersKey, + queryFn: () => get('/workspaces/current/tool-providers'), + initialData: [], + }) +} + const useAllBuiltInToolsKey = [NAME_SPACE, 'builtIn'] export const useAllBuiltInTools = () => { return useQuery({