refactor: align frontend ownership boundaries
Close audit gaps across API drift, query policy, UI, and tests.
This commit is contained in:
@@ -1,25 +1,20 @@
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { HttpResponse, http } from "msw";
|
||||
import { MemoryRouter } from "react-router";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { AuthProvider } from "@/features/auth";
|
||||
import {
|
||||
AccountsPageEmpty,
|
||||
AccountsPageError,
|
||||
AccountsPageLoading,
|
||||
} from "@/pages/accounts";
|
||||
import { createTestQueryClient } from "@/test/query";
|
||||
import { server } from "@/test/server";
|
||||
import { theme } from "../theme";
|
||||
import { AppRoutes } from "./AppRoutes";
|
||||
|
||||
describe("AppRoutes", () => {
|
||||
afterEach(cleanup);
|
||||
function renderRoutes(path: string) {
|
||||
return render(
|
||||
<QueryClientProvider client={new QueryClient()}>
|
||||
<QueryClientProvider client={createTestQueryClient()}>
|
||||
<MemoryRouter initialEntries={[path]}>
|
||||
<MantineProvider theme={theme}>
|
||||
<AuthProvider>
|
||||
@@ -50,37 +45,6 @@ describe("AppRoutes", () => {
|
||||
);
|
||||
});
|
||||
|
||||
it("renders the T-Bank settings action for a missing connection", () => {
|
||||
render(
|
||||
<MantineProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<AccountsPageError code="TBANK_NOT_CONNECTED" />
|
||||
</MemoryRouter>
|
||||
</MantineProvider>,
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
|
||||
).toHaveAttribute("href", "/settings");
|
||||
});
|
||||
|
||||
it("renders retry and settings actions when T-Bank is unavailable", () => {
|
||||
const retry = vi.fn();
|
||||
render(
|
||||
<MantineProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<AccountsPageError code="TBANK_UNAVAILABLE" retry={retry} />
|
||||
</MemoryRouter>
|
||||
</MantineProvider>,
|
||||
);
|
||||
|
||||
screen.getByRole("button", { name: "Повторить" }).click();
|
||||
expect(retry).toHaveBeenCalledOnce();
|
||||
expect(
|
||||
screen.getByRole("link", { name: "Открыть настройки T-Bank" }),
|
||||
).toHaveAttribute("href", "/settings");
|
||||
});
|
||||
|
||||
it("redirects anonymous users from accounts", async () => {
|
||||
renderRoutes("/accounts");
|
||||
|
||||
@@ -91,6 +55,40 @@ describe("AppRoutes", () => {
|
||||
);
|
||||
});
|
||||
|
||||
it("logs in through the public form and reaches the protected landing", async () => {
|
||||
let credentials: unknown;
|
||||
server.use(
|
||||
http.post("*/api/v1/auth/login", async ({ request }) => {
|
||||
credentials = await request.json();
|
||||
return HttpResponse.json({
|
||||
accessToken: "login-token",
|
||||
user: { id: "user-1", email: "user@example.com" },
|
||||
});
|
||||
}),
|
||||
);
|
||||
renderRoutes("/accounts");
|
||||
|
||||
await screen.findByRole("heading", { level: 1, 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: "Вход" }));
|
||||
|
||||
expect(
|
||||
await screen.findByRole("heading", {
|
||||
level: 2,
|
||||
name: "Нет инвестиционных счетов",
|
||||
}),
|
||||
).toBeInTheDocument();
|
||||
expect(credentials).toEqual({
|
||||
email: "user@example.com",
|
||||
password: "a secure password",
|
||||
});
|
||||
});
|
||||
|
||||
it("lazy-loads the protected shell for an authenticated accounts route", async () => {
|
||||
server.use(
|
||||
http.post("*/api/v1/auth/refresh", () =>
|
||||
@@ -114,37 +112,4 @@ describe("AppRoutes", () => {
|
||||
screen.getByRole("navigation", { name: "WealthLedger" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
["loading", AccountsPageLoading, "status"],
|
||||
["error", AccountsPageError, "alert"],
|
||||
["empty", AccountsPageEmpty, undefined],
|
||||
] as const)("renders only the Accounts %s state", (_name, State, role) => {
|
||||
render(
|
||||
<MantineProvider theme={theme}>
|
||||
<State />
|
||||
</MantineProvider>,
|
||||
);
|
||||
|
||||
if (role) {
|
||||
expect(screen.getByRole(role)).toBeInTheDocument();
|
||||
} else {
|
||||
expect(
|
||||
screen.getByRole("heading", {
|
||||
level: 2,
|
||||
name: "Нет инвестиционных счетов",
|
||||
}),
|
||||
).toBeInTheDocument();
|
||||
}
|
||||
|
||||
expect(screen.queryAllByRole("status")).toHaveLength(
|
||||
role === "status" ? 1 : 0,
|
||||
);
|
||||
expect(screen.queryAllByRole("alert")).toHaveLength(
|
||||
role === "alert" ? 1 : 0,
|
||||
);
|
||||
expect(screen.queryAllByText("Нет инвестиционных счетов")).toHaveLength(
|
||||
role ? 0 : 1,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
+89
-181
@@ -1,9 +1,8 @@
|
||||
import { Container, Group, Skeleton, Stack } from "@mantine/core";
|
||||
import type { FC, PropsWithChildren } from "react";
|
||||
import { lazy, Suspense } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Navigate, Route, Routes, useLocation } from "react-router";
|
||||
import { useAuth } from "@/features/auth";
|
||||
import type { FC } from "react";
|
||||
import { lazy } from "react";
|
||||
import { Navigate, Route, Routes } from "react-router";
|
||||
import { LazyPage } from "./RouteFallback";
|
||||
import { Protected, Public } from "./RouteGuards";
|
||||
|
||||
const AccountPage = lazy(async () => {
|
||||
const { AccountPage } = await import("@/pages/account");
|
||||
@@ -46,187 +45,96 @@ const ProtectedLayout = lazy(async () => {
|
||||
return { default: ProtectedLayout };
|
||||
});
|
||||
|
||||
type RouteSkeletonVariant = "auth" | "content" | "shell";
|
||||
|
||||
type LazyPageProps = PropsWithChildren<{
|
||||
variant: RouteSkeletonVariant;
|
||||
}>;
|
||||
|
||||
const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
|
||||
const { variant } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (variant === "auth")
|
||||
return (
|
||||
<Container size={420} py="xl">
|
||||
<Stack
|
||||
aria-busy="true"
|
||||
aria-label={t("states.loadingTitle")}
|
||||
role="status"
|
||||
>
|
||||
<Skeleton height={32} width="45%" />
|
||||
<Skeleton height={48} radius="sm" />
|
||||
<Skeleton height={48} radius="sm" />
|
||||
<Skeleton height={36} radius="sm" />
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
|
||||
if (variant === "shell")
|
||||
return (
|
||||
<Stack
|
||||
aria-busy="true"
|
||||
aria-label={t("states.loadingTitle")}
|
||||
gap={0}
|
||||
role="status"
|
||||
>
|
||||
<Group justify="space-between" p="md">
|
||||
<Skeleton height={28} width={160} />
|
||||
<Skeleton height={28} width={96} />
|
||||
</Group>
|
||||
<Container fluid p="md">
|
||||
<Skeleton height={20} width="30%" />
|
||||
<Stack mt="lg">
|
||||
<Skeleton height={32} width="30%" />
|
||||
<Skeleton height={160} radius="md" />
|
||||
</Stack>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
|
||||
<Skeleton height={32} width="30%" />
|
||||
<Skeleton height={160} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const LazyPage: FC<LazyPageProps> = (props) => {
|
||||
const { children, variant } = props;
|
||||
|
||||
return (
|
||||
<Suspense fallback={<RouteSkeleton variant={variant} />}>
|
||||
{children}
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
const Protected: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props;
|
||||
const { user, ready } = useAuth();
|
||||
const location = useLocation();
|
||||
if (!ready) return <RouteSkeleton variant="shell" />;
|
||||
return user ? (
|
||||
children
|
||||
) : (
|
||||
<Navigate
|
||||
to="/login"
|
||||
state={{ returnTo: `${location.pathname}${location.search}` }}
|
||||
replace
|
||||
const AppRoutes: FC = () => (
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/accounts" replace />} />
|
||||
<Route
|
||||
path="/login"
|
||||
element={
|
||||
<Public>
|
||||
<LazyPage variant="auth">
|
||||
<LoginPage />
|
||||
</LazyPage>
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Public: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props;
|
||||
const { user, ready } = useAuth();
|
||||
if (!ready) return <RouteSkeleton variant="shell" />;
|
||||
return user ? <Navigate to="/accounts" replace /> : children;
|
||||
};
|
||||
|
||||
const AppRoutes: FC = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/accounts" replace />} />
|
||||
<Route
|
||||
path="/register"
|
||||
element={
|
||||
<Public>
|
||||
<LazyPage variant="auth">
|
||||
<RegisterPage />
|
||||
</LazyPage>
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
element={
|
||||
<Protected>
|
||||
<LazyPage variant="shell">
|
||||
<ProtectedLayout />
|
||||
</LazyPage>
|
||||
</Protected>
|
||||
}
|
||||
>
|
||||
<Route
|
||||
path="/login"
|
||||
element={
|
||||
<Public>
|
||||
<LazyPage variant="auth">
|
||||
<LoginPage />
|
||||
</LazyPage>
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/register"
|
||||
element={
|
||||
<Public>
|
||||
<LazyPage variant="auth">
|
||||
<RegisterPage />
|
||||
</LazyPage>
|
||||
</Public>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
element={
|
||||
<Protected>
|
||||
<LazyPage variant="shell">
|
||||
<ProtectedLayout />
|
||||
</LazyPage>
|
||||
</Protected>
|
||||
}
|
||||
>
|
||||
<Route
|
||||
path="/accounts"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/events"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountEventsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/income"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountIncomePage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/operations"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountOperationsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/settings"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<SettingsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
path="*"
|
||||
path="/accounts"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<NotFoundPage />
|
||||
<AccountsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
<Route
|
||||
path="/accounts/:accountId"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/events"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountEventsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/income"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountIncomePage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/accounts/:accountId/operations"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<AccountOperationsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/settings"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<SettingsPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<LazyPage variant="content">
|
||||
<NotFoundPage />
|
||||
</LazyPage>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
|
||||
export { AppRoutes };
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { cleanup, render, screen, waitFor } from "@testing-library/react";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import type { FC } from "react";
|
||||
import { MemoryRouter, useLocation, useNavigate } from "react-router";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { RouteErrorBoundary } from "./RouteErrorBoundary";
|
||||
|
||||
let authenticated = false;
|
||||
@@ -52,7 +52,6 @@ function renderBoundary(path: string) {
|
||||
}
|
||||
|
||||
describe("RouteErrorBoundary", () => {
|
||||
afterEach(cleanup);
|
||||
it("offers login after a public route error without error details", () => {
|
||||
authenticated = false;
|
||||
renderBoundary("/login");
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Container, Group, Skeleton, Stack } from "@mantine/core";
|
||||
import type { FC, PropsWithChildren } from "react";
|
||||
import { Suspense } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type RouteSkeletonVariant = "auth" | "content" | "shell";
|
||||
type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>;
|
||||
|
||||
const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
|
||||
const { variant } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (variant === "auth")
|
||||
return (
|
||||
<Container size={420} py="xl">
|
||||
<Stack
|
||||
aria-busy="true"
|
||||
aria-label={t("states.loadingTitle")}
|
||||
role="status"
|
||||
>
|
||||
<Skeleton height={32} width="45%" />
|
||||
<Skeleton height={48} radius="sm" />
|
||||
<Skeleton height={48} radius="sm" />
|
||||
<Skeleton height={36} radius="sm" />
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
|
||||
if (variant === "shell")
|
||||
return (
|
||||
<Stack
|
||||
aria-busy="true"
|
||||
aria-label={t("states.loadingTitle")}
|
||||
gap={0}
|
||||
role="status"
|
||||
>
|
||||
<Group justify="space-between" p="md">
|
||||
<Skeleton height={28} width={160} />
|
||||
<Skeleton height={28} width={96} />
|
||||
</Group>
|
||||
<Container fluid p="md">
|
||||
<Skeleton height={20} width="30%" />
|
||||
<Stack mt="lg">
|
||||
<Skeleton height={32} width="30%" />
|
||||
<Skeleton height={160} radius="md" />
|
||||
</Stack>
|
||||
</Container>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
|
||||
<Skeleton height={32} width="30%" />
|
||||
<Skeleton height={160} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
const LazyPage: FC<LazyPageProps> = (props) => {
|
||||
const { children, variant } = props;
|
||||
return (
|
||||
<Suspense fallback={<RouteSkeleton variant={variant} />}>
|
||||
{children}
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export { LazyPage, RouteSkeleton };
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { FC, PropsWithChildren } from "react";
|
||||
import { Navigate, useLocation } from "react-router";
|
||||
import { useAuth } from "@/features/auth";
|
||||
import { RouteSkeleton } from "./RouteFallback";
|
||||
|
||||
const Protected: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props;
|
||||
const { user, ready } = useAuth();
|
||||
const location = useLocation();
|
||||
if (!ready) return <RouteSkeleton variant="shell" />;
|
||||
return user ? (
|
||||
children
|
||||
) : (
|
||||
<Navigate
|
||||
to="/login"
|
||||
state={{ returnTo: `${location.pathname}${location.search}` }}
|
||||
replace
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Public: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props;
|
||||
const { user, ready } = useAuth();
|
||||
if (!ready) return <RouteSkeleton variant="shell" />;
|
||||
return user ? <Navigate to="/accounts" replace /> : children;
|
||||
};
|
||||
|
||||
export { Protected, Public };
|
||||
+2
-69
@@ -1,79 +1,12 @@
|
||||
:root {
|
||||
--ft-color-bg-page: #e8ecf1;
|
||||
--ft-color-bg-app: #f5f7fa;
|
||||
--ft-color-bg-surface: #ffffff;
|
||||
--ft-color-bg-muted: #f1f5f9;
|
||||
--ft-color-text-primary: #1e293b;
|
||||
--ft-color-text-secondary: #64748b;
|
||||
--ft-color-border: #e2e8f0;
|
||||
--ft-color-accent: #2563eb;
|
||||
--ft-color-danger: #ef4444;
|
||||
--ft-radius-card: 12px;
|
||||
--ft-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--ft-color-bg-page);
|
||||
color: var(--ft-color-text-primary);
|
||||
background: var(--mantine-color-gray-2);
|
||||
color: var(--mantine-color-dark-7);
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.app-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.bottom-nav {
|
||||
display: none;
|
||||
}
|
||||
[data-depth] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
[data-depth] a {
|
||||
color: var(--ft-color-accent);
|
||||
}
|
||||
.auth-page {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 100dvh;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.auth-card {
|
||||
box-shadow: 0 12px 32px rgba(30, 41, 59, 0.1);
|
||||
width: min(100%, 26rem);
|
||||
}
|
||||
.auth-card fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 47.99375em) {
|
||||
.bottom-nav {
|
||||
background: var(--ft-color-bg-surface);
|
||||
border-top: 1px solid var(--ft-color-border);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
left: 0;
|
||||
padding: 0.75rem;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 200;
|
||||
}
|
||||
.bottom-nav .active {
|
||||
color: var(--ft-color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
[data-depth="3"] > :nth-child(-n + 2) {
|
||||
display: none;
|
||||
}
|
||||
.mantine-AppShell-main {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useBrokerageAccounts } from "@/entities/brokerage-account";
|
||||
import { BreadcrumbTrail } from "./BreadcrumbTrail";
|
||||
|
||||
type AccountBreadcrumbsProps = {
|
||||
accountId: string;
|
||||
section?: "events" | "income" | "operations";
|
||||
};
|
||||
|
||||
const AccountBreadcrumbs: FC<AccountBreadcrumbsProps> = (props) => {
|
||||
const { accountId, section } = props;
|
||||
const { data: accounts } = useBrokerageAccounts();
|
||||
const { t } = useTranslation();
|
||||
const accountName =
|
||||
accounts?.find((account) => account.id === accountId)?.name ??
|
||||
t("breadcrumbs.accountFallback");
|
||||
const accountPath = `/accounts/${accountId}`;
|
||||
const items = [
|
||||
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
||||
section ? { label: accountName, to: accountPath } : { label: accountName },
|
||||
...(section ? [{ label: t(`breadcrumbs.${section}`) }] : []),
|
||||
];
|
||||
|
||||
return <BreadcrumbTrail items={items} />;
|
||||
};
|
||||
|
||||
export { AccountBreadcrumbs };
|
||||
+3
-1
@@ -8,7 +8,9 @@ import { theme } from "@/app/theme";
|
||||
import { AuthProvider } from "@/features/auth";
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { refetchOnWindowFocus: false } },
|
||||
defaultOptions: {
|
||||
queries: { refetchOnWindowFocus: false, retry: false },
|
||||
},
|
||||
});
|
||||
|
||||
const App: FC = () => {
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
.trail {
|
||||
margin-bottom: var(--mantine-spacing-md);
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--mantine-primary-color-filled);
|
||||
}
|
||||
|
||||
@media (max-width: 47.99375em) {
|
||||
.trail[data-depth="3"] > :nth-child(-n + 2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { MantineProvider } from "@mantine/core";
|
||||
import { cleanup, render, screen } from "@testing-library/react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { MemoryRouter } from "react-router";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { AppBreadcrumbs } from "./AppBreadcrumbs";
|
||||
@@ -26,7 +26,6 @@ function renderBreadcrumbs(
|
||||
|
||||
describe("AppBreadcrumbs", () => {
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
|
||||
+16
-113
@@ -1,141 +1,44 @@
|
||||
import { Breadcrumbs } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useMatch } from "react-router";
|
||||
import { useBrokerageAccounts } from "@/entities/brokerage-account";
|
||||
|
||||
type Crumb = { label: string; to?: string };
|
||||
|
||||
type BreadcrumbTrailProps = {
|
||||
items: Crumb[];
|
||||
};
|
||||
|
||||
type AccountBreadcrumbsProps = {
|
||||
accountId: string;
|
||||
events: boolean;
|
||||
income: boolean;
|
||||
operations: boolean;
|
||||
};
|
||||
|
||||
const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
|
||||
const { items } = props;
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Breadcrumbs
|
||||
aria-label={t("breadcrumbs.label")}
|
||||
component="nav"
|
||||
data-depth={items.length}
|
||||
separator={<span aria-hidden="true">→</span>}
|
||||
>
|
||||
{items.map((item) =>
|
||||
item.to ? (
|
||||
<Link key={item.to} to={item.to}>
|
||||
{item.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span aria-current="page" key={item.label}>
|
||||
{item.label}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</Breadcrumbs>
|
||||
);
|
||||
};
|
||||
|
||||
const AccountBreadcrumbs: FC<AccountBreadcrumbsProps> = (props) => {
|
||||
const { accountId, events, income, operations } = props;
|
||||
const { data: accounts } = useBrokerageAccounts();
|
||||
const { t } = useTranslation();
|
||||
const accountName =
|
||||
accounts?.find((account) => account.id === accountId)?.name ??
|
||||
t("breadcrumbs.accountFallback");
|
||||
const accountPath = `/accounts/${accountId}`;
|
||||
|
||||
return (
|
||||
<BreadcrumbTrail
|
||||
items={
|
||||
events
|
||||
? [
|
||||
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
||||
{ label: accountName, to: accountPath },
|
||||
{ label: t("breadcrumbs.events") },
|
||||
]
|
||||
: operations
|
||||
? [
|
||||
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
||||
{ label: accountName, to: accountPath },
|
||||
{ label: t("breadcrumbs.operations") },
|
||||
]
|
||||
: income
|
||||
? [
|
||||
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
||||
{ label: accountName, to: accountPath },
|
||||
{ label: t("breadcrumbs.income") },
|
||||
]
|
||||
: [
|
||||
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
||||
{ label: accountName },
|
||||
]
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
import { useMatch } from "react-router";
|
||||
import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
|
||||
import { BreadcrumbTrail } from "./BreadcrumbTrail";
|
||||
|
||||
const AppBreadcrumbs: FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const accountOperations = useMatch({
|
||||
const operations = useMatch({
|
||||
path: "/accounts/:accountId/operations",
|
||||
end: true,
|
||||
});
|
||||
const accountEvents = useMatch({
|
||||
path: "/accounts/:accountId/events",
|
||||
end: true,
|
||||
});
|
||||
const accountIncome = useMatch({
|
||||
path: "/accounts/:accountId/income",
|
||||
end: true,
|
||||
});
|
||||
const events = useMatch({ path: "/accounts/:accountId/events", end: true });
|
||||
const income = useMatch({ path: "/accounts/:accountId/income", end: true });
|
||||
const account = useMatch({ path: "/accounts/:accountId", end: true });
|
||||
const accounts = useMatch({ path: "/accounts", end: true });
|
||||
const settings = useMatch({ path: "/settings", end: true });
|
||||
|
||||
if (accountOperations)
|
||||
if (operations)
|
||||
return (
|
||||
<AccountBreadcrumbs
|
||||
accountId={accountOperations.params.accountId ?? ""}
|
||||
events={false}
|
||||
income={false}
|
||||
operations
|
||||
accountId={operations.params.accountId ?? ""}
|
||||
section="operations"
|
||||
/>
|
||||
);
|
||||
if (accountEvents)
|
||||
if (events)
|
||||
return (
|
||||
<AccountBreadcrumbs
|
||||
accountId={accountEvents.params.accountId ?? ""}
|
||||
events
|
||||
income={false}
|
||||
operations={false}
|
||||
accountId={events.params.accountId ?? ""}
|
||||
section="events"
|
||||
/>
|
||||
);
|
||||
if (accountIncome)
|
||||
if (income)
|
||||
return (
|
||||
<AccountBreadcrumbs
|
||||
accountId={accountIncome.params.accountId ?? ""}
|
||||
events={false}
|
||||
income
|
||||
operations={false}
|
||||
accountId={income.params.accountId ?? ""}
|
||||
section="income"
|
||||
/>
|
||||
);
|
||||
if (account)
|
||||
return (
|
||||
<AccountBreadcrumbs
|
||||
accountId={account.params.accountId ?? ""}
|
||||
events={false}
|
||||
income={false}
|
||||
operations={false}
|
||||
/>
|
||||
);
|
||||
return <AccountBreadcrumbs accountId={account.params.accountId ?? ""} />;
|
||||
if (accounts)
|
||||
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
|
||||
if (settings)
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Breadcrumbs } from "@mantine/core";
|
||||
import type { FC } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router";
|
||||
import classes from "./AppBreadcrumbs.module.css";
|
||||
|
||||
type Crumb = { label: string; to?: string };
|
||||
type BreadcrumbTrailProps = { items: Crumb[] };
|
||||
|
||||
const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
|
||||
const { items } = props;
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Breadcrumbs
|
||||
aria-label={t("breadcrumbs.label")}
|
||||
className={classes.trail}
|
||||
component="nav"
|
||||
data-depth={items.length}
|
||||
separator={<span aria-hidden="true">→</span>}
|
||||
>
|
||||
{items.map((item) =>
|
||||
item.to ? (
|
||||
<Link className={classes.link} key={item.to} to={item.to}>
|
||||
{item.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span aria-current="page" key={item.label}>
|
||||
{item.label}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</Breadcrumbs>
|
||||
);
|
||||
};
|
||||
|
||||
export { BreadcrumbTrail };
|
||||
Reference in New Issue
Block a user