update cache in appNav after app info updated

This commit is contained in:
JzoNg
2024-03-08 14:47:46 +08:00
parent a192ae9314
commit b5f3bbead2
4 changed files with 76 additions and 29 deletions

View File

@ -1,17 +1,20 @@
'use client'
import { useCallback, useState } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams, usePathname } from 'next/navigation'
import useSWR from 'swr'
import { useParams } from 'next/navigation'
// import useSWR from 'swr'
import useSWRInfinite from 'swr/infinite'
import { flatten } from 'lodash-es'
import produce from 'immer'
import Nav from '../nav'
import { type NavItem } from '../nav/nav-selector'
import { Robot, RobotActive } from '../../base/icons/src/public/header-nav/studio'
import { fetchAppDetail, fetchAppList } from '@/service/apps'
import { fetchAppList } from '@/service/apps'
import CreateAppDialog from '@/app/components/app/create-app-dialog'
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)
@ -21,19 +24,58 @@ const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
const AppNav = () => {
const { t } = useTranslation()
const { isCurrentWorkspaceManager } = useAppContext()
const [showNewAppDialog, setShowNewAppDialog] = useState(false)
const { appId } = useParams()
const isAppDetailPage = usePathname().split('/').includes('app')
const { data: currentApp } = useSWR((appId && isAppDetailPage) ? { url: '/apps', id: appId } : null, fetchAppDetail)
const { isCurrentWorkspaceManager } = useAppContext()
const { appDetail } = useAppStore()
const [showNewAppDialog, setShowNewAppDialog] = useState(false)
const [navItems, setNavItems] = useState<NavItem[]>([])
const { data: appsData, setSize } = useSWRInfinite(appId ? getKey : () => null, fetchAppList, { revalidateFirstPage: false })
const appItems = flatten(appsData?.map(appData => appData.data))
const handleLoadmore = useCallback(() => {
setSize(size => size + 1)
}, [setSize])
useEffect(() => {
if (appsData) {
const appItems = flatten(appsData?.map(appData => appData.data))
const navItems = appItems.map((app) => {
const link = ((isCurrentWorkspaceManager, app) => {
if (!isCurrentWorkspaceManager) {
return `/app/${app.id}/overview`
}
else {
if (app.mode === 'workflow' || app.mode === 'advanced-chat')
return `/app/${app.id}/workflow`
else
return `/app/${app.id}/configuration`
}
})(isCurrentWorkspaceManager, app)
return {
id: app.id,
icon: app.icon,
icon_background: app.icon_background,
name: app.name,
link,
}
})
setNavItems(navItems)
}
}, [appsData, isCurrentWorkspaceManager, setNavItems])
// update current app name
useEffect(() => {
if (appDetail) {
const newNavItems = produce(navItems, (draft: NavItem[]) => {
navItems.forEach((app, index) => {
if (app.id === appDetail.id)
draft[index].name = appDetail.name
})
})
setNavItems(newNavItems)
}
}, [appDetail, navItems])
return (
<>
<Nav
@ -42,14 +84,8 @@ const AppNav = () => {
text={t('common.menus.apps')}
activeSegment={['apps', 'app']}
link='/apps'
curNav={currentApp}
navs={appItems.map(item => ({
id: item.id,
name: item.name,
link: `/app/${item.id}/${isCurrentWorkspaceManager ? 'configuration' : 'overview'}`,
icon: item.icon,
icon_background: item.icon_background,
}))}
curNav={appDetail}
navs={navItems}
createText={t('common.menus.newApp')}
onCreate={() => setShowNewAppDialog(true)}
onLoadmore={handleLoadmore}