Files
flights_web/src/routes/layout.tsx
T

53 lines
1.6 KiB
TypeScript

import { useMemo } from "react";
import { Outlet, useLocation } from "@modern-js/runtime/router";
import { ErrorBoundary } from "@/ui/errors/ErrorBoundary";
import { AeroflotShell } from "@/ui/shell";
import { LoggerProvider } from "@/observability/logger/provider";
import { createRootLogger } from "@/observability/logger/root";
import { ApiClientProvider } from "@/shared/api/provider";
import { ApiClient } from "@/shared/api/client";
import { getEnv } from "@/env/index";
import { resolveLocaleFromPath, localeToLanguage } from "@/i18n/resolver";
// Global styles
import "@/styles/index.scss";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import "leaflet/dist/leaflet.css";
/**
* Root layout — wraps the entire app with global providers.
* Uses <Outlet /> (not {children}) because Modern.js uses React Router
* nested routes.
*/
export default function RootLayout(): JSX.Element {
const location = useLocation();
const logger = useMemo(() => createRootLogger(), []);
const locale = resolveLocaleFromPath(location.pathname);
const language = locale ? localeToLanguage(locale) : "ru";
const apiClient = useMemo(
() => {
const env = getEnv();
return new ApiClient({
baseUrl: env.API_BASE_URL,
locale: "ru",
logger,
});
},
[logger],
);
return (
<LoggerProvider logger={logger}>
<ApiClientProvider client={apiClient}>
<ErrorBoundary>
<AeroflotShell language={language}>
<Outlet />
</AeroflotShell>
</ErrorBoundary>
</ApiClientProvider>
</LoggerProvider>
);
}