refactor: migrate common service toward TanStack Query (#29009)

web/app/components/base/features/new-feature-panel/moderation/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import useSWR from 'swr'
 import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import { RiEqualizer2Line } from '@remixicon/react'
@@ -10,9 +9,9 @@ import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { FeatureEnum } from '@/app/components/base/features/types'
-import { fetchCodeBasedExtensionList } from '@/service/common'
 import { useModalContext } from '@/context/modal-context'
 import I18n from '@/context/i18n'
+import { useCodeBasedExtensions } from '@/service/use-common'
 
 type Props = {
   disabled?: boolean
@@ -28,10 +27,7 @@ const Moderation = ({
   const { locale } = useContext(I18n)
   const featuresStore = useFeaturesStore()
   const moderation = useFeatures(s => s.features.moderation)
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=moderation',
-    fetchCodeBasedExtensionList,
-  )
+  const { data: codeBasedExtensionList } = useCodeBasedExtensions('moderation')
   const [isHovering, setIsHovering] = useState(false)
 
   const handleOpenModerationSettingModal = () => {

web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx

@@ -1,6 +1,5 @@
 import type { ChangeEvent, FC } from 'react'
 import { useState } from 'react'
-import useSWR from 'swr'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
@@ -13,10 +12,6 @@ import Divider from '@/app/components/base/divider'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
 import { useToastContext } from '@/app/components/base/toast'
-import {
-  fetchCodeBasedExtensionList,
-  fetchModelProviders,
-} from '@/service/common'
 import type { CodeBasedExtensionItem } from '@/models/common'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
@@ -27,6 +22,7 @@ import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+import { useCodeBasedExtensions, useModelProviders } from '@/service/use-common'
 
 const systemTypes = ['openai_moderation', 'keywords', 'api']
 
@@ -51,21 +47,18 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
   const docLink = useDocLink()
   const { notify } = useToastContext()
   const { locale } = useContext(I18n)
-  const { data: modelProviders, isLoading, mutate } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
+  const { data: modelProviders, isPending: isLoading, refetch: refetchModelProviders } = useModelProviders()
   const [localeData, setLocaleData] = useState<ModerationConfig>(data)
   const { setShowAccountSettingModal } = useModalContext()
   const handleOpenSettingsModal = () => {
     setShowAccountSettingModal({
       payload: ACCOUNT_SETTING_TAB.PROVIDER,
       onCancelCallback: () => {
-        mutate()
+        refetchModelProviders()
       },
     })
   }
-  const { data: codeBasedExtensionList } = useSWR(
-    '/code-based-extension?module=moderation',
-    fetchCodeBasedExtensionList,
-  )
+  const { data: codeBasedExtensionList } = useCodeBasedExtensions('moderation')
   const openaiProvider = modelProviders?.data.find(item => item.provider === 'langgenius/openai/openai')
   const systemOpenaiProviderEnabled = openaiProvider?.system_configuration.enabled
   const systemOpenaiProviderQuota = systemOpenaiProviderEnabled ? openaiProvider?.system_configuration.quota_configurations.find(item => item.quota_type === openaiProvider.system_configuration.current_quota_type) : undefined