102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import type { CommonProps } from '@/proxy/common'
|
||
import ConfigProvider from '@/components/ui/ConfigProvider'
|
||
import { themeConfig } from '@/proxy/theme/theme.config'
|
||
import { useStoreActions, useStoreState } from '@/store'
|
||
import useDarkMode from '@/utils/hooks/useDarkmode'
|
||
import { useSetting } from '@/utils/hooks/useSetting'
|
||
import useTabFocus from '@/utils/hooks/useTabFocus'
|
||
import { ComponentProps, useEffect } from 'react'
|
||
import { Helmet } from 'react-helmet'
|
||
import { useNavigate, useLocation } from 'react-router-dom'
|
||
import { getSetupStatus } from '@/services/setup.service'
|
||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
import { useAppVersionNotice } from '@/views/version/useAppVersionNotice'
|
||
|
||
let didInit = false
|
||
|
||
const Theme = (props: CommonProps) => {
|
||
const { getConfig } = useStoreActions((a) => a.abpConfig)
|
||
const { setSetupMode, setBootstrapFailed } = useStoreActions((a) => a.base.common)
|
||
const navigate = useNavigate()
|
||
const location = useLocation()
|
||
|
||
useEffect(() => {
|
||
if (didInit) return
|
||
didInit = true
|
||
|
||
// Direkt /setup'a gelindiyse — hemen setupMode=true yap (loading gate açılsın)
|
||
if (location.pathname === ROUTES_ENUM.setup) {
|
||
setSetupMode(true)
|
||
return
|
||
}
|
||
|
||
// Doğrudan config yüklenir. Her sayfa açılışında ayrıca veritabanı probe'u
|
||
// atılmaz — bu, canlı sistemde gereksiz bir istek ve DB bağlantısıydı.
|
||
//
|
||
// silentError: açılıştaki config hatası global hata diyaloğunu tetiklemez;
|
||
// kurulum modu kararı aşağıda verilir. Aksi halde kullanıcı kurulum sayfasının
|
||
// üstünde anlamsız bir "503" penceresi görüyordu.
|
||
getConfig({ silentError: true }).catch(async () => {
|
||
// Config alınamadı. Sunucu gerçekten kurulum modunda mı, yoksa geçici bir
|
||
// arıza mı? Yönlendirme SADECE sunucu kurulum modundayken yapılır; böylece
|
||
// çalışan bir sistemde veritabanı sorunu kullanıcıyı kurulum ekranına düşürmez.
|
||
try {
|
||
const { data } = await getSetupStatus()
|
||
if (data.setupMode) {
|
||
setSetupMode(true)
|
||
navigate(ROUTES_ENUM.setup, { replace: true })
|
||
return
|
||
}
|
||
} catch {
|
||
// Sunucuya hiç ulaşılamıyor — aşağıdaki bakım ekranı gösterilir.
|
||
}
|
||
|
||
// Sunucu kurulum modunda değil ama uygulama da açılamıyor.
|
||
// Bu bayrak olmadan loading gate hiç kapanmıyor ve ekran sonsuza kadar
|
||
// spinner'da kalıyordu.
|
||
setBootstrapFailed(true)
|
||
})
|
||
}, [])
|
||
|
||
function getThemeStyle() {
|
||
const mode = theme.mode
|
||
const style = setting('App.SiteManagement.Theme.Style')
|
||
|
||
return style?.replace(mode === 'dark' ? 'light' : 'dark', mode)
|
||
}
|
||
|
||
const { setting } = useSetting()
|
||
|
||
const theme = useStoreState((state) => state.theme)
|
||
const locale =
|
||
useStoreState((state) => state.abpConfig.config?.localization.currentCulture.cultureName) ??
|
||
'en'
|
||
useDarkMode()
|
||
useTabFocus()
|
||
useAppVersionNotice()
|
||
|
||
type ConfigProviderValue = NonNullable<ComponentProps<typeof ConfigProvider>['value']>
|
||
|
||
const currentTheme = {
|
||
...themeConfig,
|
||
...theme,
|
||
...{ locale },
|
||
} as ConfigProviderValue
|
||
|
||
return (
|
||
<>
|
||
{setting('App.SiteManagement.Theme.Style') && (
|
||
<Helmet key="Devexpress stylesheet Helmet">
|
||
<link
|
||
key="Devexpress stylesheet Helmet link"
|
||
rel="stylesheet"
|
||
href={`/css/${getThemeStyle()}.css`}
|
||
/>
|
||
</Helmet>
|
||
)}
|
||
<ConfigProvider value={currentTheme}>{props.children}</ConfigProvider>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Theme
|