refactor: remove unused fetchInstalledPluginList function and integrate useInstalledPluginList hook

web/service/plugins.ts

@@ -6,7 +6,6 @@ import type {
   EndpointsRequest,
   EndpointsResponse,
   InstallPackageResponse,
-  InstalledPluginListResponse,
   Permissions,
   PluginDeclaration,
   PluginManifestInMarket,
@@ -140,10 +139,6 @@ export const updatePermission = async (permissions: Permissions) => {
   return post('/workspaces/current/plugin/permission/change', { body: permissions })
 }
 
-export const fetchInstalledPluginList: Fetcher<InstalledPluginListResponse, { url: string }> = ({ url }) => {
-  return get<InstalledPluginListResponse>(url)
-}
-
 export const uninstallPlugin = async (pluginId: string) => {
   return post<UninstallPluginResponse>('/workspaces/current/plugin/uninstall', { body: { plugin_installation_id: pluginId } })
 }

web/service/use-plugins.ts

@@ -0,0 +1,29 @@
+import type { InstalledPluginListResponse } from '@/app/components/plugins/types'
+import { get } from './base'
+import {
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import {
+  useQuery,
+} from '@tanstack/react-query'
+
+const NAME_SPACE = 'plugins'
+
+const useInstalledPluginListKey = [NAME_SPACE, 'installedPluginList']
+export const useInstalledPluginList = () => {
+  return useQuery<InstalledPluginListResponse>({
+    queryKey: useInstalledPluginListKey,
+    queryFn: () => get<InstalledPluginListResponse>('/workspaces/current/plugin/list'),
+  })
+}
+
+export const useInvalidateInstalledPluginList = () => {
+  const queryClient = useQueryClient()
+  return () => {
+    queryClient.invalidateQueries(
+      {
+        queryKey: useInstalledPluginListKey,
+      })
+  }
+}