| @@ -40,7 +40,7 @@ const TabSlider: FC<TabSliderProps> = ({ | |||
| const newIndex = options.findIndex(option => option.value === value) | |||
| setActiveIndex(newIndex) | |||
| updateSliderStyle(newIndex) | |||
| }, [value, options, pluginList]) | |||
| }, [value, options, pluginList?.total]) | |||
| return ( | |||
| <div className={cn(className, 'relative inline-flex items-center justify-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5')}> | |||
| @@ -69,13 +69,13 @@ const TabSlider: FC<TabSliderProps> = ({ | |||
| {option.text} | |||
| {/* if no plugin installed, the badge won't show */} | |||
| {option.value === 'plugins' | |||
| && (pluginList?.plugins.length ?? 0) > 0 | |||
| && (pluginList?.total ?? 0) > 0 | |||
| && <Badge | |||
| size='s' | |||
| uppercase={true} | |||
| state={BadgeState.Default} | |||
| > | |||
| {pluginList?.plugins.length} | |||
| {pluginList?.total} | |||
| </Badge> | |||
| } | |||
| </div> | |||
| @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next' | |||
| import type { FilterState } from './filter-management' | |||
| import FilterManagement from './filter-management' | |||
| import List from './list' | |||
| import { useInstalledLatestVersion, useInstalledPluginListWithPagination, useInvalidateInstalledPluginList } from '@/service/use-plugins' | |||
| import { useInstalledLatestVersion, useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins' | |||
| import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel' | |||
| import { usePluginPageContext } from './context' | |||
| import { useDebounceFn } from 'ahooks' | |||
| @@ -17,7 +17,7 @@ const PluginsPanel = () => { | |||
| const { t } = useTranslation() | |||
| const filters = usePluginPageContext(v => v.filters) as FilterState | |||
| const setFilters = usePluginPageContext(v => v.setFilters) | |||
| const { data: pluginList, isLoading: isPluginListLoading, isFetching, isLastPage, loadNextPage } = useInstalledPluginListWithPagination() | |||
| const { data: pluginList, isLoading: isPluginListLoading, isFetching, isLastPage, loadNextPage } = useInstalledPluginList() | |||
| const { data: installedLatestVersion } = useInstalledLatestVersion( | |||
| pluginList?.plugins | |||
| .filter(plugin => plugin.source === PluginSource.marketplace) | |||
| @@ -10,7 +10,6 @@ import type { | |||
| GitHubItemAndMarketPlaceDependency, | |||
| InstallPackageResponse, | |||
| InstalledLatestVersionResponse, | |||
| InstalledPluginListResponse, | |||
| InstalledPluginListWithTotalResponse, | |||
| PackageDependency, | |||
| Permissions, | |||
| @@ -67,16 +66,7 @@ export const useCheckInstalled = ({ | |||
| }) | |||
| } | |||
| export const useInstalledPluginList = (disable?: boolean) => { | |||
| return useQuery<InstalledPluginListResponse>({ | |||
| queryKey: useInstalledPluginListKey, | |||
| queryFn: () => get<InstalledPluginListResponse>('/workspaces/current/plugin/list'), | |||
| enabled: !disable, | |||
| initialData: !disable ? undefined : { plugins: [] }, | |||
| }) | |||
| } | |||
| export const useInstalledPluginListWithPagination = (pageSize = 100) => { | |||
| export const useInstalledPluginList = (disable?: boolean, pageSize = 100) => { | |||
| const fetchPlugins = async ({ pageParam = 1 }) => { | |||
| const response = await get<InstalledPluginListWithTotalResponse>( | |||
| `/workspaces/current/plugin/list?page=${pageParam}&page_size=${pageSize}`, | |||
| @@ -91,8 +81,10 @@ export const useInstalledPluginListWithPagination = (pageSize = 100) => { | |||
| hasNextPage, | |||
| isFetchingNextPage, | |||
| isLoading, | |||
| isSuccess, | |||
| } = useInfiniteQuery({ | |||
| queryKey: ['installed-plugins', pageSize], | |||
| enabled: !disable, | |||
| queryKey: useInstalledPluginListKey, | |||
| queryFn: fetchPlugins, | |||
| getNextPageParam: (lastPage, pages) => { | |||
| const totalItems = lastPage.total | |||
| @@ -108,10 +100,12 @@ export const useInstalledPluginListWithPagination = (pageSize = 100) => { | |||
| }) | |||
| const plugins = data?.pages.flatMap(page => page.plugins) ?? [] | |||
| const total = data?.pages[0].total ?? 0 | |||
| return { | |||
| data: { | |||
| data: disable ? undefined : { | |||
| plugins, | |||
| total, | |||
| }, | |||
| isLastPage: !hasNextPage, | |||
| loadNextPage: () => { | |||
| @@ -120,6 +114,7 @@ export const useInstalledPluginListWithPagination = (pageSize = 100) => { | |||
| isLoading, | |||
| isFetching: isFetchingNextPage, | |||
| error, | |||
| isSuccess, | |||
| } | |||
| } | |||