fix: remove and create app not reload plan (#2220)

web/app/(commonLayout)/apps/AppCard.tsx

@@ -20,6 +20,7 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
 import CustomPopover from '@/app/components/base/popover'
 import Divider from '@/app/components/base/divider'
 import { asyncRunSafe } from '@/utils'
+import { useProviderContext } from '@/context/provider-context'
 
 export type AppCardProps = {
   app: App
@@ -30,6 +31,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const { isCurrentWorkspaceManager } = useAppContext()
+  const { onPlanInfoChanged } = useProviderContext()
   const { push } = useRouter()
 
   const mutateApps = useContextSelector(
@@ -51,6 +53,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       if (onRefresh)
         onRefresh()
       mutateApps()
+      onPlanInfoChanged()
     }
     catch (e: any) {
       notify({

web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import style from '../list.module.css'
 import NewAppDialog from './NewAppDialog'
+import { useProviderContext } from '@/context/provider-context'
 
 export type CreateAppCardProps = {
   onSuccess?: () => void
@@ -12,6 +13,8 @@ export type CreateAppCardProps = {
 
 const CreateAppCard = forwardRef<HTMLAnchorElement, CreateAppCardProps>(({ onSuccess }, ref) => {
   const { t } = useTranslation()
+  const { onPlanInfoChanged } = useProviderContext()
+
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
   return (
     <a ref={ref} className={classNames(style.listItem, style.newItemCard)} onClick={() => setShowNewAppDialog(true)}>
@@ -24,7 +27,12 @@ const CreateAppCard = forwardRef<HTMLAnchorElement, CreateAppCardProps>(({ onSuc
         </div>
       </div>
       {/* <div className='text-xs text-gray-500'>{t('app.createFromConfigFile')}</div> */}
-      <NewAppDialog show={showNewAppDialog} onSuccess={onSuccess} onClose={() => setShowNewAppDialog(false)} />
+      <NewAppDialog show={showNewAppDialog} onSuccess={
+        () => {
+          onPlanInfoChanged()
+          if (onSuccess)
+            onSuccess()
+        }} onClose={() => setShowNewAppDialog(false)} />
     </a>
   )
 })

web/context/provider-context.tsx

@@ -34,6 +34,7 @@ const ProviderContext = createContext<{
   }
   isFetchedPlan: boolean
   enableBilling: boolean
+  onPlanInfoChanged: () => void
   enableReplaceWebAppLogo: boolean
 }>({
       modelProviders: [],
@@ -58,6 +59,7 @@ const ProviderContext = createContext<{
       },
       isFetchedPlan: false,
       enableBilling: false,
+      onPlanInfoChanged: () => { },
       enableReplaceWebAppLogo: false,
     })
 
@@ -98,7 +100,6 @@ export const ProviderContextProvider = ({
   const [isFetchedPlan, setIsFetchedPlan] = useState(false)
   const [enableBilling, setEnableBilling] = useState(true)
   const [enableReplaceWebAppLogo, setEnableReplaceWebAppLogo] = useState(false)
-
   const handleOperateUtm = () => {
     let utm
     try {
@@ -116,8 +117,7 @@ export const ProviderContextProvider = ({
     if (utm.utm_source || utm.utm_medium || utm.utm_campaign || utm.utm_content || utm.utm_term)
       operationUtm({ url: '/operation/utm', body: utm })
   }
-  useEffect(() => {
-    (async () => {
+  const fetchPlan = async () => {
     const data = await fetchCurrentPlanInfo()
     const enabled = data.billing.enabled
     setEnableBilling(enabled)
@@ -127,7 +127,9 @@ export const ProviderContextProvider = ({
       handleOperateUtm()
       setIsFetchedPlan(true)
     }
-    })()
+  }
+  useEffect(() => {
+    fetchPlan()
   }, [])
 
   return (
@@ -140,6 +142,7 @@ export const ProviderContextProvider = ({
       plan,
       isFetchedPlan,
       enableBilling,
+      onPlanInfoChanged: fetchPlan,
       enableReplaceWebAppLogo,
     }}>
       {children}