79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
HeadContent,
|
|
Outlet,
|
|
Scripts,
|
|
createRootRoute,
|
|
} from '@tanstack/react-router'
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
import { MantineProvider } from '@pikku/mantine/core'
|
|
import { Notifications } from '@mantine/notifications'
|
|
import { PikkuProvider, createPikku } from '@pikku/react'
|
|
import '@mantine/core/styles.css'
|
|
import '@mantine/notifications/styles.css'
|
|
import { PikkuFetch } from '@perauset/functions-sdk/pikku/pikku-fetch.gen'
|
|
import { PikkuRPC } from '@perauset/functions-sdk/pikku/pikku-rpc.gen'
|
|
import { useLocale } from '../i18n/config'
|
|
import { theme } from '@perauset/mantine-theme'
|
|
|
|
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: 'PerAuset' },
|
|
],
|
|
}),
|
|
component: RootDocument,
|
|
})
|
|
|
|
function RootDocument() {
|
|
const [queryClient] = useState(
|
|
() =>
|
|
new QueryClient({
|
|
defaultOptions: {
|
|
queries: { staleTime: 30_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',
|
|
}),
|
|
)
|
|
|
|
// Reactive locale from the Paraglide store (persists to localStorage +
|
|
// reflects <html lang> itself; initial detection runs on import).
|
|
const { locale, dir } = useLocale()
|
|
|
|
return (
|
|
<html lang={locale} dir={dir}>
|
|
<head>
|
|
<HeadContent />
|
|
</head>
|
|
<body>
|
|
<QueryClientProvider client={queryClient}>
|
|
<MantineProvider theme={theme}>
|
|
<Notifications />
|
|
<PikkuProvider pikku={pikku}>
|
|
<Outlet />
|
|
</PikkuProvider>
|
|
</MantineProvider>
|
|
</QueryClientProvider>
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|