import { useEffect, useState } from 'react'
import {
HeadContent,
Outlet,
Scripts,
createRootRoute,
} from '@tanstack/react-router'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { MantineProvider, Box } from '@pikku/mantine/core'
import { PikkuProvider, createPikku } from '@pikku/react'
import { useLocale, getLocale } from '@/i18n/config'
import '@mantine/core/styles.css'
import { PikkuFetch } from '@project/functions-sdk/pikku/pikku-fetch.gen'
import { PikkuRPC } from '@project/functions-sdk/pikku/pikku-rpc.gen'
import { theme } from '../theme'
import '../theme.css'
import '../i18n/config'
import { readInitialDirection } from '../direction'
declare global {
interface Window {
__E2E_API_URL?: string
}
}
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ title: 'Seminarhof Drawehn' },
],
}),
component: RootDocument,
})
function RootDocument() {
useLocale()
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
staleTime: 10_000,
retry: 1,
refetchOnWindowFocus: false,
},
mutations: { retry: 0 },
},
}),
)
const runtimeApiUrl =
typeof window !== 'undefined' ? window.__E2E_API_URL : undefined
const [pikku] = useState(() =>
createPikku(PikkuFetch, PikkuRPC, {
transformDate: true,
serverUrl: runtimeApiUrl ?? import.meta.env.VITE_API_URL ?? '/api',
credentials: 'include',
}),
)
return (
)
}
function HydrationReady() {
useEffect(() => {
window.document.documentElement.dataset.appHydrated = 'true'
}, [])
return null
}