refactor: clarify frontend module ownership

src/app/model/index.ts

@@ -0,0 +1 @@
+export { useCurrentRoute } from "./useCurrentRoute";

src/app/model/useCurrentRoute.ts

@@ -0,0 +1,23 @@
+import { useMatch } from "react-router";
+
+function useCurrentRoute() {
+	const account = useMatch("/accounts/:accountId/:section?");
+
+	const section = (["events", "income", "operations"] as const)
+		.find(value => value === account?.params.section?.toLowerCase());
+
+	return {
+		account,
+		accounts: useMatch("/accounts"),
+		bond: useMatch("/bonds/:bondId"),
+		bonds: useMatch("/bonds"),
+		card: useMatch("/cards/:cardId"),
+		cards: useMatch("/cards"),
+		section,
+		settings: useMatch("/settings"),
+		stock: useMatch("/stocks/:stockId"),
+		stocks: useMatch("/stocks"),
+	};
+}
+
+export { useCurrentRoute };

src/app/routes/AppRoutes/AppRoutes.test.tsx

@@ -1,9 +1,11 @@
+import type { ReactNode } from "react";
+
 import { MantineProvider } from "@mantine/core";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { cssVariablesResolver, theme } from "@wealthledger/ui/theme";
 import { http, HttpResponse } from "msw";
-import { type InitialEntry, MemoryRouter } from "react-router";
+import { type InitialEntry, Link, MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
 
 import { AuthProvider } from "@/features/auth";
@@ -12,10 +14,11 @@ import { server } from "@/test/server";
 
 import { AppRoutes } from "./AppRoutes";
 
-function renderRoutes(path: InitialEntry) {
+function renderRoutes(path: InitialEntry, controls?: ReactNode) {
 	return render(
 		<QueryClientProvider client={createTestQueryClient()}>
 			<MemoryRouter initialEntries={[path]}>
+				{controls}
 				<MantineProvider
 					cssVariablesResolver={cssVariablesResolver}
 					theme={theme}
@@ -110,6 +113,43 @@ describe("AppRoutes", () => {
 		});
 	});
 
+	it.each([
+		{ isFailure: false, isNewDestination: false },
+		{ isFailure: true, isNewDestination: false },
+		{ isFailure: true, isNewDestination: true },
+	])("finishes logout safely: failure=$isFailure, new destination=$isNewDestination", async ({ isFailure, isNewDestination }) => {
+		const { promise: pendingLogout, resolve: finishLogout }
+			= Promise.withResolvers<void>();
+
+		server.use(
+			http.post("*/api/v1/auth/refresh", () => HttpResponse.json({
+				accessToken: "test-token", user: { email: "user@example.com", id: "user-1" },
+			})),
+			http.post("*/api/v1/auth/logout", async () => {
+				await pendingLogout;
+
+				return isFailure
+					? HttpResponse.error()
+					: new HttpResponse(null, { status: 204 });
+			}),
+		);
+		renderRoutes("/settings", <Link to="/settings?source=manual">Открыть настройки</Link>);
+		fireEvent.click(await screen.findByRole("button", { name: "Выйти" }));
+		await screen.findByRole("heading", { level: 1, name: "Вход" });
+		if (isNewDestination) fireEvent.click(screen.getByRole("link", { name: "Открыть настройки" }));
+		fireEvent.change(screen.getByLabelText("Email"), { target: { value: "user@example.com" } });
+		fireEvent.change(screen.getByLabelText("Пароль"), { target: { value: "a secure password" } });
+		fireEvent.click(screen.getByRole("button", { name: "Вход" }));
+		finishLogout();
+
+		const destination = isNewDestination
+			? { level: 1, name: "Настройки" }
+			: { level: 2, name: "Нет инвестиционных счетов" };
+
+		expect(await screen.findByRole("heading", destination)).toBeInTheDocument();
+		expect(document.title).toBe(isNewDestination ? "Настройки — WealthLedger" : "Счета — WealthLedger");
+	});
+
 	it("returns after login to cards with the selected month without T-Bank", async () => {
 		server.use(
 			http.get("*/api/v1/bank-cards/categories", () => HttpResponse.json([])),

src/app/routes/DocumentTitle/DocumentTitle.tsx

@@ -2,8 +2,8 @@ import type { FC } from "react";
 
 import { useDocumentTitle } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
-import { useMatch } from "react-router";
 
+import { useCurrentRoute } from "@/app/model";
 import { useBankCard } from "@/entities/bank-card";
 import { useBond } from "@/entities/bond";
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
@@ -82,14 +82,18 @@ const CardDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
 
 const ProtectedDocumentTitle: FC = () => {
 	const { t } = useTranslation();
-	const account = useMatch("/accounts/:accountId/:section?");
-	const bond = useMatch("/bonds/:bondId");
-	const stock = useMatch("/stocks/:stockId");
-	const card = useMatch("/cards/:cardId");
-	const cards = useMatch("/cards");
-	const bonds = useMatch("/bonds");
-	const stocks = useMatch("/stocks");
-	const settings = useMatch("/settings");
+
+	const {
+		account,
+		bond,
+		bonds,
+		card,
+		cards,
+		settings,
+		stock,
+		stocks,
+	} = useCurrentRoute();
+
 	if (card) return <CardDocumentTitle identifier={card.params.cardId ?? ""} />;
 	if (account)
 		return (

src/app/routes/RouteFallback.tsx

@@ -1,6 +1,7 @@
 import type { FC, PropsWithChildren } from "react";
 
 import { Container, Group, Skeleton, Stack } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
 import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -19,11 +20,7 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 	if (variant === "auth")
 		return (
 			<Container py="xl" size={420}>
-				<Stack
-					aria-busy="true"
-					aria-label={t("states.loadingTitle")}
-					role="status"
-				>
+				<LoadingSkeleton label={t("states.loadingTitle")}>
 					<Skeleton height={32} width="45%" />
 
 					<Skeleton height={48} radius="sm" />
@@ -31,7 +28,7 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 					<Skeleton height={48} radius="sm" />
 
 					<Skeleton height={36} radius="sm" />
-				</Stack>
+				</LoadingSkeleton>
 			</Container>
 		);
 
@@ -62,11 +59,11 @@ const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
 		);
 
 	return (
-		<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
+		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="30%" />
 
 			<Skeleton height={160} radius="md" />
-		</Stack>
+		</LoadingSkeleton>
 	);
 };
 

src/app/routes/RouteGuards.tsx

@@ -1,5 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
-
+import { type FC, type PropsWithChildren, useState } from "react";
 import { Navigate, useLocation } from "react-router";
 
 import { useAuth } from "@/features/auth";
@@ -8,16 +7,22 @@ import { RouteSkeleton } from "./RouteFallback";
 
 const Protected: FC<PropsWithChildren> = (props) => {
 	const { children } = props;
-	const { ready, user } = useAuth();
+	const { ready, signedOut, user } = useAuth();
 	const location = useLocation();
+	const [wasAuthenticated, setWasAuthenticated] = useState(false);
+	if (user && !wasAuthenticated) setWasAuthenticated(true);
 	if (!ready) return <RouteSkeleton variant="shell" />;
 
+	const loginState = signedOut && wasAuthenticated
+		? undefined
+		: { returnTo: `${location.pathname}${location.search}` };
+
 	return user
 		? <>{children}</>
 		: (
 				<Navigate
 					replace
-					state={{ returnTo: `${location.pathname}${location.search}` }}
+					state={loginState}
 					to="/login"
 				/>
 			);

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.tsx

@@ -2,7 +2,8 @@ import type { FC } from "react";
 
 import { Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { useMatch } from "react-router";
+
+import { useCurrentRoute } from "@/app/model";
 
 import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
 import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
@@ -14,19 +15,17 @@ import { StockBreadcrumbs } from "./StockBreadcrumbs";
 const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
 
-	const account = useMatch("/accounts/:accountId/:section?");
+	const {
+		account,
+		accounts,
+		bond,
+		card,
+		cards,
+		section,
+		settings,
+		stock,
+	} = useCurrentRoute();
 
-	const section = (["events", "income", "operations"] as const).find(
-		value => value === account?.params.section?.toLowerCase(),
-	);
-
-	const card = useMatch("/cards/:cardId");
-	const cards = useMatch("/cards");
-	const accounts = useMatch({ end: true, path: "/accounts" });
-	const settings = useMatch({ end: true, path: "/settings" });
-
-	const stock = useMatch({ end: true, path: "/stocks/:stockId" });
-	const bond = useMatch({ end: true, path: "/bonds/:bondId" });
 	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
 	if (stock)
 		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;