fix app list cache

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

@@ -46,6 +46,7 @@ const Apps = () => {
   const { isCurrentWorkspaceManager } = useAppContext()
   const [activeTab, setActiveTab] = useTabSearchParams({
     defaultTab: 'all',
+    disableSearchParams: true, // use search params will distroy app list mutation
   })
   const [keywords, setKeywords] = useState('')
   const [searchKeywords, setSearchKeywords] = useState('')

web/app/components/app/create-app-dialog/index.tsx

@@ -10,7 +10,7 @@ type CreateAppDialogProps = {
   onClose: () => void
 }
 
-const CreateAppTemplateDialog = ({ show, onClose }: CreateAppDialogProps) => {
+const CreateAppTemplateDialog = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
   const { t } = useTranslation()
 
   return (
@@ -22,7 +22,10 @@ const CreateAppTemplateDialog = ({ show, onClose }: CreateAppDialogProps) => {
       {/* template list */}
       <div className='grow flex flex-col h-full bg-gray-100'>
         <div className='shrink-0 pl-8 pr-6 pt-6 pb-3 bg-gray-100 rounded-se-xl text-xl leading-[30px] font-semibold text-gray-900 z-10'>{t('app.newApp.startFromTemplate')}</div>
-        <AppList pageType={PageType.CREATE} />
+        <AppList onSuccess={() => {
+          onSuccess()
+          onClose()
+        }} pageType={PageType.CREATE} />
       </div>
       <div className='absolute right-6 top-6 p-2 cursor-pointer z-20' onClick={onClose}>
         <XClose className='w-4 h-4 text-gray-500' />

web/app/components/app/create-app-modal/index.tsx

@@ -20,6 +20,7 @@ import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/ven
 import { HelpCircle, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 
 type CreateAppDialogProps = {
@@ -70,6 +71,7 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
       onSuccess()
       onClose()
       mutateApps()
+      localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
       getRedirection(isCurrentWorkspaceManager, app, push)
     }
     catch (e) {

web/app/components/explore/app-list/index.tsx

@@ -25,6 +25,7 @@ import { getRedirection } from '@/utils/app-redirection'
 
 type AppsProps = {
   pageType?: PageType
+  onSuccess?: () => void
 }
 
 export enum PageType {
@@ -34,6 +35,7 @@ export enum PageType {
 
 const Apps = ({
   pageType = PageType.EXPLORE,
+  onSuccess,
 }: AppsProps) => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager } = useAppContext()
@@ -111,6 +113,8 @@ const Apps = ({
         type: 'success',
         message: t('app.newApp.appCreated'),
       })
+      if (onSuccess)
+        onSuccess()
       localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
       getRedirection(isCurrentWorkspaceManager, app, push)
     }

web/app/components/header/app-nav/index.tsx

@@ -17,9 +17,22 @@ import type { AppListResponse } from '@/models/app'
 import { useAppContext } from '@/context/app-context'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
-const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
-  if (!pageIndex || previousPageData.has_more)
-    return { url: 'apps', params: { page: pageIndex + 1, limit: 30 } }
+const getKey = (
+  pageIndex: number,
+  previousPageData: AppListResponse,
+  activeTab: string,
+  keywords: string,
+) => {
+  if (!pageIndex || previousPageData.has_more) {
+    const params: any = { url: 'apps', params: { page: pageIndex + 1, limit: 30, name: keywords } }
+
+    if (activeTab !== 'all')
+      params.params.mode = activeTab
+    else
+      delete params.params.mode
+
+    return params
+  }
   return null
 }
 
@@ -33,7 +46,13 @@ const AppNav = () => {
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
   const [navItems, setNavItems] = useState<NavItem[]>([])
 
-  const { data: appsData, setSize } = useSWRInfinite(appId ? getKey : () => null, fetchAppList, { revalidateFirstPage: false })
+  const { data: appsData, setSize, mutate } = useSWRInfinite(
+    appId
+      ? (pageIndex: number, previousPageData: AppListResponse) => getKey(pageIndex, previousPageData, 'all', '')
+      : () => null,
+    fetchAppList,
+    { revalidateFirstPage: false },
+  )
 
   const handleLoadmore = useCallback(() => {
     setSize(size => size + 1)
@@ -105,17 +124,17 @@ const AppNav = () => {
       <CreateAppModal
         show={showNewAppDialog}
         onClose={() => setShowNewAppDialog(false)}
-        onSuccess={() => {}}
+        onSuccess={() => mutate()}
       />
       <CreateAppTemplateDialog
         show={showNewAppTemplateDialog}
         onClose={() => setShowNewAppTemplateDialog(false)}
-        onSuccess={() => {}}
+        onSuccess={() => mutate()}
       />
       <CreateFromDSLModal
         show={showCreateFromDSLModal}
         onClose={() => setShowCreateFromDSLModal(false)}
-        onSuccess={() => {}}
+        onSuccess={() => mutate()}
       />
     </>
   )