86 lines
3.7 KiB
TypeScript
86 lines
3.7 KiB
TypeScript
![]() |
'use client'
|
|||
|
import type { FC } from 'react'
|
|||
|
import React, { useEffect, useState } from 'react'
|
|||
|
import { usePathname, useRouter, useSelectedLayoutSegments } from 'next/navigation'
|
|||
|
import useSWR, { SWRConfig } from 'swr'
|
|||
|
import Header from '../components/header'
|
|||
|
import { fetchAppList } from '@/service/apps'
|
|||
|
import { fetchDatasets } from '@/service/datasets'
|
|||
|
import { fetchLanggeniusVersion, fetchUserProfile, logout } from '@/service/common'
|
|||
|
import Loading from '@/app/components/base/loading'
|
|||
|
import AppContext from '@/context/app-context'
|
|||
|
import DatasetsContext from '@/context/datasets-context'
|
|||
|
import type { LangGeniusVersionResponse, UserProfileResponse } from '@/models/common'
|
|||
|
|
|||
|
export type ICommonLayoutProps = {
|
|||
|
children: React.ReactNode
|
|||
|
}
|
|||
|
|
|||
|
const CommonLayout: FC<ICommonLayoutProps> = ({ children }) => {
|
|||
|
const router = useRouter()
|
|||
|
const pathname = usePathname()
|
|||
|
const segments = useSelectedLayoutSegments()
|
|||
|
const pattern = pathname.replace(/.*\/app\//, '')
|
|||
|
const [idOrMethod] = pattern.split('/')
|
|||
|
const isNotDetailPage = idOrMethod === 'list'
|
|||
|
|
|||
|
const appId = isNotDetailPage ? '' : idOrMethod
|
|||
|
|
|||
|
const { data: appList, mutate: mutateApps } = useSWR({ url: '/apps', params: { page: 1 } }, fetchAppList)
|
|||
|
const { data: datasetList, mutate: mutateDatasets } = useSWR(segments[0] === 'datasets' ? { url: '/datasets', params: { page: 1 } } : null, fetchDatasets)
|
|||
|
const { data: userProfileResponse, mutate: mutateUserProfile } = useSWR({ url: '/account/profile', params: {} }, fetchUserProfile)
|
|||
|
|
|||
|
const [userProfile, setUserProfile] = useState<UserProfileResponse>()
|
|||
|
const [langeniusVersionInfo, setLangeniusVersionInfo] = useState<LangGeniusVersionResponse>()
|
|||
|
const updateUserProfileAndVersion = async () => {
|
|||
|
if (userProfileResponse && !userProfileResponse.bodyUsed) {
|
|||
|
const result = await userProfileResponse.json()
|
|||
|
setUserProfile(result)
|
|||
|
const current_version = userProfileResponse.headers.get('x-version')
|
|||
|
const current_env = userProfileResponse.headers.get('x-env')
|
|||
|
const versionData = await fetchLanggeniusVersion({ url: '/version', params: { current_version } })
|
|||
|
setLangeniusVersionInfo({ ...versionData, current_version, latest_version: versionData.version, current_env })
|
|||
|
}
|
|||
|
}
|
|||
|
useEffect(() => {
|
|||
|
updateUserProfileAndVersion()
|
|||
|
}, [userProfileResponse])
|
|||
|
|
|||
|
if (!appList || !userProfile || !langeniusVersionInfo)
|
|||
|
return <Loading type='app' />
|
|||
|
|
|||
|
const curApp = appList?.data.find(opt => opt.id === appId)
|
|||
|
const currentDatasetId = segments[0] === 'datasets' && segments[2]
|
|||
|
const currentDataset = datasetList?.data?.find(opt => opt.id === currentDatasetId)
|
|||
|
|
|||
|
// if (!isNotDetailPage && !curApp) {
|
|||
|
// alert('app not found') // TODO: use toast. Now can not get toast context here.
|
|||
|
// // notify({ type: 'error', message: 'App not found' })
|
|||
|
// router.push('/apps')
|
|||
|
// }
|
|||
|
|
|||
|
const onLogout = async () => {
|
|||
|
await logout({
|
|||
|
url: '/logout',
|
|||
|
params: {},
|
|||
|
})
|
|||
|
router.push('/signin')
|
|||
|
}
|
|||
|
|
|||
|
return (
|
|||
|
<SWRConfig value={{
|
|||
|
shouldRetryOnError: false
|
|||
|
}}>
|
|||
|
<AppContext.Provider value={{ apps: appList.data, mutateApps, userProfile, mutateUserProfile }}>
|
|||
|
<DatasetsContext.Provider value={{ datasets: datasetList?.data || [], mutateDatasets, currentDataset }}>
|
|||
|
<div className='relative flex flex-col h-full overflow-scroll bg-gray-100'>
|
|||
|
<Header isBordered={['/apps', '/datasets'].includes(pathname)} curApp={curApp as any} appItems={appList.data} userProfile={userProfile} onLogout={onLogout} langeniusVersionInfo={langeniusVersionInfo} />
|
|||
|
{children}
|
|||
|
</div>
|
|||
|
</DatasetsContext.Provider>
|
|||
|
</AppContext.Provider>
|
|||
|
</SWRConfig>
|
|||
|
)
|
|||
|
}
|
|||
|
export default React.memo(CommonLayout)
|