WealthLedger/frontend
5
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: align frontend ownership boundaries

Browse Source 
Close audit gaps across API drift, query policy, UI, and tests.
This commit is contained in:
ksv741
2026-09-06 18:20:05 +03:00
parent 175727bc93
commit c97f62bd98
118 changed files with 2190 additions and 2254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/tbank-connection/model/connection-boundary.ts
+1 -2
View File
@@ -1,6 +1,5 @@
import type { QueryClient } from "@tanstack/react-query";
import { apiQueryClient } from "@/shared/api";
import type { paths } from "@/shared/api/generated/schema";
import { apiQueryClient, type paths } from "@/shared/api";
type TbankConnectionStatus =
paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
src/features/tbank-connection/ui/TbankConnectionSection.test.tsx
+8 -15
View File
@@ -1,24 +1,12 @@
import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import { afterEach, describe, expect, it, vi } from "vitest";
import { apiQueryClient } from "@/shared/api";
import { describe, expect, it, vi } from "vitest";
import { apiQueryClient, configureAuthClient } from "@/shared/api";
import { server } from "@/test/server";
import { TbankConnectionSection } from "./TbankConnectionSection";
vi.mock("@/features/auth", () => ({
useAuth: () => ({ accessToken: "test-token" }),
}));
afterEach(cleanup);
const brokerageAccountsQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/brokerage-accounts",
@@ -39,6 +27,11 @@ const unrelatedQueryKey = apiQueryClient.queryOptions(
).queryKey;
function renderSection(client: QueryClient) {
configureAuthClient({
accessToken: () => "test-token",
refresh: async () => true,
clear: vi.fn(),
});
return render(
<MantineProvider>
<QueryClientProvider client={client}>
src/features/tbank-connection/ui/TbankConnectionSection.tsx
+1 -142
View File
@@ -1,36 +1,10 @@
import {
Alert,
Button,
Modal,
PasswordInput,
Stack,
Text,
} from "@mantine/core";
import { useQueryClient } from "@tanstack/react-query";
import type { FC } from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { apiQueryClient } from "@/shared/api";
import {
commitTbankConnectionBoundary,
type TbankConnectionStatus,
} from "../model/connection-boundary";
import {
TbankConnectionError,
TbankConnectionLoading,
} from "./TbankConnectionSection.view";
import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
type TbankConnectionSectionLoadedProps = {
status: TbankConnectionStatus;
};
function errorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
? String(error.code)
: undefined;
}
import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
const TbankConnectionSection: FC = () => {
const viewModel = useTbankConnectionViewModel();
@@ -40,119 +14,4 @@ const TbankConnectionSection: FC = () => {
return <TbankConnectionSectionLoaded status={viewModel.status} />;
};
const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
props,
) => {
const { status } = props;
const { t } = useTranslation();
const queryClient = useQueryClient();
const [deleteOpened, setDeleteOpened] = useState(false);
const [requestError, setRequestError] = useState<string | null>(null);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<{ token: string }>();
const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
onSuccess: (data) => {
commitTbankConnectionBoundary(queryClient, data);
reset();
},
onError: (error) => setRequestError(errorCode(error) ?? "REQUEST_ERROR"),
});
const remove = apiQueryClient.useMutation(
"delete",
"/api/v1/tbank-connection",
{
onSuccess: () => {
commitTbankConnectionBoundary(queryClient, {
connected: false,
connectedAt: null,
});
setDeleteOpened(false);
},
onError: () => setRequestError("REQUEST_ERROR"),
},
);
const pending = update.isPending || remove.isPending;
const connected = status.connected;
return (
<Stack mt="xl">
<Text fw={600}>{t("tbank.title")}</Text>
<Text size="sm">
{connected
? t("tbank.connected", {
date: new Date(String(status.connectedAt)).toLocaleDateString(
"ru-RU",
),
})
: t("tbank.disconnected")}
</Text>
<Text size="sm" c="dimmed">
{t("tbank.hint")}
</Text>
<form
onSubmit={handleSubmit(({ token }) => {
setRequestError(null);
update.mutate({ body: { token } });
})}
>
<fieldset disabled={pending}>
<Stack>
<PasswordInput
label={t("tbank.token")}
{...register("token", { required: t("tbank.tokenRequired") })}
error={errors.token?.message}
/>
{requestError && (
<Alert color="red">
{t(
requestError === "INVALID_TBANK_TOKEN"
? "tbank.invalidToken"
: requestError === "TBANK_UNAVAILABLE"
? "tbank.unavailable"
: "tbank.requestError",
)}
</Alert>
)}
<Button type="submit" loading={update.isPending}>
{t(connected ? "tbank.replace" : "tbank.connect")}
</Button>
{connected && (
<Button
variant="outline"
color="red"
onClick={() => setDeleteOpened(true)}
>
{t("tbank.delete")}
</Button>
)}
</Stack>
</fieldset>
</form>
<Modal
opened={deleteOpened}
onClose={() => !pending && setDeleteOpened(false)}
title={t("tbank.deleteTitle")}
closeOnClickOutside={!pending}
closeOnEscape={!pending}
>
<Stack>
<Text>{t("tbank.deleteText")}</Text>
<Button
color="red"
loading={remove.isPending}
disabled={pending}
onClick={() => remove.mutate({})}
>
{t("tbank.deleteConfirm")}
</Button>
</Stack>
</Modal>
</Stack>
);
};
export { TbankConnectionSection };
src/features/tbank-connection/ui/TbankConnectionSection.vm.ts
+2 -5
View File
@@ -1,12 +1,9 @@
import { useQuery } from "@tanstack/react-query";
import { useAuth } from "@/features/auth";
import { useAuthenticatedQuery } from "@/shared/api";
import { tbankConnectionQueryOptions } from "../model/connection-boundary";
function useTbankConnectionViewModel() {
const { accessToken } = useAuth();
const status = useQuery({
const status = useAuthenticatedQuery({
...tbankConnectionQueryOptions(),
enabled: Boolean(accessToken),
});
if (status.isPending) return { state: "loading" as const };
if (status.isError)
src/features/tbank-connection/ui/TbankConnectionSectionLoaded.tsx
+139
View File
@@ -0,0 +1,139 @@
import {
Alert,
Button,
Modal,
PasswordInput,
Stack,
Text,
} from "@mantine/core";
import { useQueryClient } from "@tanstack/react-query";
import type { FC } from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { apiErrorCode, apiQueryClient } from "@/shared/api";
import {
commitTbankConnectionBoundary,
type TbankConnectionStatus,
} from "../model/connection-boundary";
type TbankConnectionSectionLoadedProps = {
status: TbankConnectionStatus;
};
const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
props,
) => {
const { status } = props;
const { t } = useTranslation();
const queryClient = useQueryClient();
const [deleteOpened, setDeleteOpened] = useState(false);
const [requestError, setRequestError] = useState<string | null>(null);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<{ token: string }>();
const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
onSuccess: (data) => {
commitTbankConnectionBoundary(queryClient, data);
reset();
},
onError: (error) => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
});
const remove = apiQueryClient.useMutation(
"delete",
"/api/v1/tbank-connection",
{
onSuccess: () => {
commitTbankConnectionBoundary(queryClient, {
connected: false,
connectedAt: null,
});
setDeleteOpened(false);
},
onError: () => setRequestError("REQUEST_ERROR"),
},
);
const pending = update.isPending || remove.isPending;
const connected = status.connected;
return (
<Stack mt="xl">
<Text fw={600}>{t("tbank.title")}</Text>
<Text size="sm">
{connected
? t("tbank.connected", {
date: new Date(status.connectedAt ?? "").toLocaleDateString(
"ru-RU",
),
})
: t("tbank.disconnected")}
</Text>
<Text size="sm" c="dimmed">
{t("tbank.hint")}
</Text>
<form
onSubmit={handleSubmit(({ token }) => {
setRequestError(null);
update.mutate({ body: { token } });
})}
>
<fieldset disabled={pending}>
<Stack>
<PasswordInput
label={t("tbank.token")}
{...register("token", { required: t("tbank.tokenRequired") })}
error={errors.token?.message}
/>
{requestError && (
<Alert color="red">
{t(
requestError === "INVALID_TBANK_TOKEN"
? "tbank.invalidToken"
: requestError === "TBANK_UNAVAILABLE"
? "tbank.unavailable"
: "tbank.requestError",
)}
</Alert>
)}
<Button type="submit" loading={update.isPending}>
{t(connected ? "tbank.replace" : "tbank.connect")}
</Button>
{connected && (
<Button
variant="outline"
color="red"
onClick={() => setDeleteOpened(true)}
>
{t("tbank.delete")}
</Button>
)}
</Stack>
</fieldset>
</form>
<Modal
opened={deleteOpened}
onClose={() => !pending && setDeleteOpened(false)}
title={t("tbank.deleteTitle")}
closeOnClickOutside={!pending}
closeOnEscape={!pending}
>
<Stack>
<Text>{t("tbank.deleteText")}</Text>
<Button
color="red"
loading={remove.isPending}
disabled={pending}
onClick={() => remove.mutate({})}
>
{t("tbank.deleteConfirm")}
</Button>
</Stack>
</Modal>
</Stack>
);
};
export { TbankConnectionSectionLoaded };