refactor: little structure refactor

src/features/tbank-connection/ui/TbankConnectionSection.tsx

@@ -6,14 +6,18 @@ import {
 	Stack,
 	Text,
 } from "@mantine/core";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
 import { apiQueryClient } from "@/shared/api";
 import type { paths } from "@/shared/api/generated/schema";
-import { useAuth } from "../../auth";
+import {
+	TbankConnectionError,
+	TbankConnectionLoading,
+} from "./TbankConnectionSection.view";
+import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
 
 type Status =
 	paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
@@ -25,8 +29,15 @@ function errorCode(error: unknown): string | undefined {
 }
 
 export function TbankConnectionSection() {
+	const viewModel = useTbankConnectionViewModel();
+	if (viewModel.state === "loading") return <TbankConnectionLoading />;
+	if (viewModel.state === "error")
+		return <TbankConnectionError retry={viewModel.retry} />;
+	return <TbankConnectionSectionLoaded status={viewModel.status} />;
+}
+
+function TbankConnectionSectionLoaded({ status }: { status: Status }) {
 	const { t } = useTranslation();
-	const { accessToken } = useAuth();
 	const queryClient = useQueryClient();
 	const [deleteOpened, setDeleteOpened] = useState(false);
 	const [requestError, setRequestError] = useState<string | null>(null);
@@ -36,11 +47,6 @@ export function TbankConnectionSection() {
 		reset,
 		formState: { errors },
 	} = useForm<{ token: string }>();
-	const status = useQuery({
-		queryKey: ["tbank-connection"],
-		enabled: Boolean(accessToken),
-		...apiQueryClient.queryOptions("get", "/api/v1/tbank-connection"),
-	});
 	const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
 		onSuccess: (data) => {
 			queryClient.setQueryData(["tbank-connection"], data);
@@ -66,25 +72,16 @@ export function TbankConnectionSection() {
 	);
 	const pending = update.isPending || remove.isPending;
 
-	if (status.isPending) return <Text>{t("states.loadingText")}</Text>;
-	if (status.isError)
-		return (
-			<Alert color="red" title={t("tbank.statusError")}>
-				<Button variant="subtle" onClick={() => status.refetch()}>
-					{t("tbank.retry")}
-				</Button>
-			</Alert>
-		);
-	const connected = status.data.connected;
+	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.data.connectedAt),
-							).toLocaleDateString("ru-RU"),
+							date: new Date(String(status.connectedAt)).toLocaleDateString(
+								"ru-RU",
+							),
 						})
 					: t("tbank.disconnected")}
 			</Text>

src/features/tbank-connection/ui/TbankConnectionSection.view.test.tsx

@@ -0,0 +1,26 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+	TbankConnectionError,
+	TbankConnectionLoading,
+} from "./TbankConnectionSection.view";
+
+describe("TbankConnectionSection state views", () => {
+	it("renders loading and retries a status error", () => {
+		const retry = vi.fn();
+		const { rerender } = render(
+			<MantineProvider>
+				<TbankConnectionLoading />
+			</MantineProvider>,
+		);
+		expect(screen.getByText("Пожалуйста, подождите.")).toBeInTheDocument();
+		rerender(
+			<MantineProvider>
+				<TbankConnectionError retry={retry} />
+			</MantineProvider>,
+		);
+		screen.getByRole("button", { name: "Повторить" }).click();
+		expect(retry).toHaveBeenCalledOnce();
+	});
+});

src/features/tbank-connection/ui/TbankConnectionSection.view.tsx

@@ -0,0 +1,17 @@
+import { Alert, Button, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+export function TbankConnectionLoading() {
+	const { t } = useTranslation();
+	return <Text>{t("states.loadingText")}</Text>;
+}
+export function TbankConnectionError({ retry }: { retry: () => void }) {
+	const { t } = useTranslation();
+	return (
+		<Alert color="red" title={t("tbank.statusError")}>
+			<Button variant="subtle" onClick={retry}>
+				{t("tbank.retry")}
+			</Button>
+		</Alert>
+	);
+}

src/features/tbank-connection/ui/TbankConnectionSection.vm.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "@/features/auth";
+import { apiQueryClient } from "@/shared/api";
+
+export function useTbankConnectionViewModel() {
+	const { accessToken } = useAuth();
+	const status = useQuery({
+		queryKey: ["tbank-connection"],
+		enabled: Boolean(accessToken),
+		...apiQueryClient.queryOptions("get", "/api/v1/tbank-connection"),
+	});
+	if (status.isPending) return { state: "loading" as const };
+	if (status.isError)
+		return { state: "error" as const, retry: () => status.refetch() };
+	return { state: "loaded" as const, status: status.data };
+}