refactor: little structure refactor

src/app/routes/RouteErrorBoundary.test.tsx

@@ -0,0 +1,69 @@
+import { MantineProvider } from "@mantine/core";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, useLocation, useNavigate } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { RouteErrorBoundary } from "./RouteErrorBoundary";
+
+let authenticated = false;
+vi.mock("@/features/auth", () => ({
+	useAuth: () => ({ user: authenticated ? {} : null }),
+}));
+
+function ThrowingRoute(): never {
+	throw new Error("test route failure");
+}
+function HealthyRoute() {
+	return (
+		<div>
+			{useLocation().pathname === "/healthy" ? (
+				"healthy route"
+			) : (
+				<ThrowingRoute />
+			)}
+		</div>
+	);
+}
+function RouteHarness() {
+	const navigate = useNavigate();
+	return (
+		<>
+			<button type="button" onClick={() => navigate("/healthy")}>
+				go healthy
+			</button>
+			<RouteErrorBoundary>
+				<HealthyRoute />
+			</RouteErrorBoundary>
+		</>
+	);
+}
+function renderBoundary(path: string) {
+	return render(
+		<MantineProvider>
+			<MemoryRouter initialEntries={[path]}>
+				<RouteHarness />
+			</MemoryRouter>
+		</MantineProvider>,
+	);
+}
+
+describe("RouteErrorBoundary", () => {
+	afterEach(cleanup);
+	it("offers login after a public route error without error details", () => {
+		authenticated = false;
+		renderBoundary("/login");
+		expect(screen.getByRole("link", { name: "Продолжить" })).toHaveAttribute(
+			"href",
+			"/login",
+		);
+		expect(screen.queryByText("test route failure")).not.toBeInTheDocument();
+	});
+
+	it("offers accounts after a protected route error and resets on navigation", async () => {
+		authenticated = true;
+		renderBoundary("/accounts");
+		screen.getByRole("button", { name: "go healthy" }).click();
+		await waitFor(() =>
+			expect(screen.getByText("healthy route")).toBeInTheDocument(),
+		);
+	});
+});

src/app/routes/RouteErrorBoundary.tsx

@@ -0,0 +1,61 @@
+import { Button, Stack, Text, Title } from "@mantine/core";
+import { Component } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation } from "react-router";
+import { useAuth } from "@/features/auth";
+
+type Props = {
+	children: React.ReactNode;
+	routeKey: string;
+	authenticated: boolean;
+};
+type State = { hasError: boolean };
+
+class Boundary extends Component<Props, State> {
+	state: State = { hasError: false };
+
+	static getDerivedStateFromError(): State {
+		return { hasError: true };
+	}
+
+	componentDidUpdate(previousProps: Props) {
+		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
+			this.setState({ hasError: false });
+		}
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return <RouteErrorFallback authenticated={this.props.authenticated} />;
+		}
+		return this.props.children;
+	}
+}
+
+function RouteErrorFallback({ authenticated }: { authenticated: boolean }) {
+	const { t } = useTranslation();
+	const to = authenticated ? "/accounts" : "/login";
+	return (
+		<Stack>
+			<Title order={1}>{t("routeError.title")}</Title>
+			<Text>{t("routeError.text")}</Text>
+			<Button component={Link} to={to}>
+				{t("routeError.action")}
+			</Button>
+		</Stack>
+	);
+}
+
+export function RouteErrorBoundary({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const { pathname, search } = useLocation();
+	const { user } = useAuth();
+	return (
+		<Boundary authenticated={Boolean(user)} routeKey={`${pathname}${search}`}>
+			{children}
+		</Boundary>
+	);
+}

src/app/ui/App.tsx

@@ -2,6 +2,7 @@ import { MantineProvider } from "@mantine/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter } from "react-router";
 import { AppRoutes } from "@/app/routes";
+import { RouteErrorBoundary } from "@/app/routes/RouteErrorBoundary";
 import { theme } from "@/app/theme";
 import { AuthProvider } from "@/features/auth";
 
@@ -15,7 +16,9 @@ export function App() {
 			<QueryClientProvider client={queryClient}>
 				<BrowserRouter>
 					<AuthProvider>
-						<AppRoutes />
+						<RouteErrorBoundary>
+							<AppRoutes />
+						</RouteErrorBoundary>
 					</AuthProvider>
 				</BrowserRouter>
 			</QueryClientProvider>