141 lines
3.8 KiB
TypeScript
141 lines
3.8 KiB
TypeScript
import {
|
|
HeadContent,
|
|
Navigate,
|
|
Outlet,
|
|
Scripts,
|
|
createRootRouteWithContext,
|
|
} from "@tanstack/react-router";
|
|
import * as React from "react";
|
|
import { DefaultCatchBoundary } from "@/components/DefaultCatchBoundary";
|
|
import { type QueryClient } from "@tanstack/react-query";
|
|
import { ensureSuperTokensFrontend } from "@/lib/supertokens/client";
|
|
import { AuthContextType } from "@/contexts/auth-context";
|
|
import Providers from "@/features/core/components/providers";
|
|
import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
|
|
import { HeaderConfig } from "@/features/core/types/header-config";
|
|
import { playerQueries } from "@/features/players/queries";
|
|
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
|
|
import FullScreenLoader from "@/components/full-screen-loader";
|
|
import mantineCssUrl from '@mantine/core/styles.css?url'
|
|
import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
|
|
import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
|
|
import mantineTiptapCssUrl from '@mantine/tiptap/styles.css?url'
|
|
|
|
export const Route = createRootRouteWithContext<{
|
|
queryClient: QueryClient;
|
|
auth: AuthContextType;
|
|
header: HeaderConfig;
|
|
refresh: string[];
|
|
withPadding: boolean;
|
|
fullWidth: boolean;
|
|
}>()({
|
|
head: () => ({
|
|
meta: [
|
|
{
|
|
charSet: "utf-8",
|
|
},
|
|
{
|
|
name: "viewport",
|
|
content:
|
|
"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=overlays-content",
|
|
},
|
|
],
|
|
links: [
|
|
{
|
|
rel: "apple-touch-icon",
|
|
sizes: "180x180",
|
|
href: "/apple-touch-icon.png",
|
|
},
|
|
{
|
|
rel: "icon",
|
|
type: "image/png",
|
|
sizes: "32x32",
|
|
href: "/favicon-32x32.png",
|
|
},
|
|
{
|
|
rel: "icon",
|
|
type: "image/png",
|
|
sizes: "16x16",
|
|
href: "/favicon-16x16.png",
|
|
},
|
|
{ rel: "manifest", href: "/site.webmanifest" },
|
|
{ rel: "icon", href: "/favicon.ico" },
|
|
{ rel: 'stylesheet', href: mantineCssUrl },
|
|
{ rel: 'stylesheet', href: mantineCarouselCssUrl },
|
|
{ rel: 'stylesheet', href: mantineDatesCssUrl },
|
|
{ rel: 'stylesheet', href: mantineTiptapCssUrl }
|
|
],
|
|
}),
|
|
errorComponent: (props) => {
|
|
return (
|
|
<RootDocument>
|
|
<Providers>
|
|
<DefaultCatchBoundary {...props} />
|
|
</Providers>
|
|
</RootDocument>
|
|
);
|
|
},
|
|
component: RootComponent,
|
|
notFoundComponent: () => <Navigate to="/" />,
|
|
beforeLoad: async ({ context, location }) => {
|
|
// Skip auth check for refresh-session route to avoid infinite loops
|
|
if (location.pathname === '/refresh-session') {
|
|
return {};
|
|
}
|
|
|
|
// https://github.com/TanStack/router/discussions/3531
|
|
const auth = await ensureServerQueryData(
|
|
context.queryClient,
|
|
playerQueries.auth()
|
|
);
|
|
return { auth };
|
|
},
|
|
pendingComponent: () => <Providers><FullScreenLoader /></Providers>,
|
|
});
|
|
|
|
function RootComponent() {
|
|
React.useEffect(() => {
|
|
ensureSuperTokensFrontend();
|
|
}, []);
|
|
|
|
return (
|
|
<RootDocument>
|
|
<Providers>
|
|
<Outlet />
|
|
</Providers>
|
|
</RootDocument>
|
|
);
|
|
}
|
|
|
|
// todo: analytics -> process.env data-website-id
|
|
function RootDocument({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html
|
|
{...mantineHtmlProps}
|
|
style={{
|
|
overflowX: "hidden",
|
|
overflowY: "hidden",
|
|
position: "fixed",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<head>
|
|
<HeadContent />
|
|
<ColorSchemeScript />
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body
|
|
style={{
|
|
overflowX: "hidden",
|
|
overflowY: "hidden",
|
|
position: "fixed",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div className="app">{children}</div>
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|