refactor: refactor foundation

src/features/auth/model/auth.test.tsx

@@ -0,0 +1,37 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import type { ReactNode } from "react";
+import { describe, expect, it } from "vitest";
+import { apiClient } from "@/shared/api";
+import { server } from "@/test/server";
+import { AuthProvider, useAuth } from "./auth";
+
+describe("AuthProvider", () => {
+	it("authorizes requests after restoring the initial session", async () => {
+		let authorization: string | null = null;
+		server.use(
+			http.post("*/api/v1/auth/refresh", () =>
+				HttpResponse.json({
+					accessToken: "restored-token",
+					user: { id: "user-1", email: "user@example.com" },
+				}),
+			),
+			http.get("*/api/v1/brokerage-accounts", ({ request }) => {
+				authorization = request.headers.get("Authorization");
+				return HttpResponse.json([]);
+			}),
+		);
+		const wrapper = ({ children }: { children: ReactNode }) => (
+			<QueryClientProvider client={new QueryClient()}>
+				<AuthProvider>{children}</AuthProvider>
+			</QueryClientProvider>
+		);
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => expect(result.current.ready).toBe(true));
+		await apiClient.GET("/api/v1/brokerage-accounts");
+
+		expect(authorization).toBe("Bearer restored-token");
+	});
+});

src/features/auth/model/auth.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { apiClient, configureAuthClient } from "../../../shared/api";
-import type { paths } from "../../../shared/api/generated/schema";
+import { apiClient, configureAuthClient } from "@/shared/api";
+import type { paths } from "@/shared/api/generated/schema";
 
 type User =
 	paths["/api/v1/auth/me"]["get"]["responses"][200]["content"]["application/json"];
@@ -71,6 +71,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 				const authentication = data as Authentication;
 				setUser(authentication.user);
 				setAccessToken(authentication.accessToken);
+				accessTokenRef.current = authentication.accessToken;
 			})
 			.finally(() => setReady(true));
 	}, []);

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

@@ -6,13 +6,13 @@ import {
 	Stack,
 	Text,
 } from "@mantine/core";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, 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 { apiClient } from "../../../shared/api";
-import type { paths } from "../../../shared/api/generated/schema";
+import { brokerageAccountsQueryKey } from "@/entities/brokerage-account";
+import { apiQueryClient } from "@/shared/api";
+import type { paths } from "@/shared/api/generated/schema";
 import { useAuth } from "../../auth";
 
 type Status =
@@ -36,26 +36,12 @@ export function TbankConnectionSection() {
 		reset,
 		formState: { errors },
 	} = useForm<{ token: string }>();
-	const headers = { Authorization: `Bearer ${accessToken}` };
 	const status = useQuery({
 		queryKey: ["tbank-connection"],
-		queryFn: async () => {
-			const { data, error } = await apiClient.GET("/api/v1/tbank-connection", {
-				headers,
-			});
-			if (error) throw error;
-			return data as Status;
-		},
+		enabled: Boolean(accessToken),
+		...apiQueryClient.queryOptions("get", "/api/v1/tbank-connection"),
 	});
-	const update = useMutation({
-		mutationFn: async ({ token }: { token: string }) => {
-			const { data, error } = await apiClient.PUT("/api/v1/tbank-connection", {
-				headers,
-				body: { token },
-			});
-			if (error) throw error;
-			return data as Status;
-		},
+	const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
 		onSuccess: (data) => {
 			queryClient.setQueryData(["tbank-connection"], data);
 			queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
@@ -63,23 +49,21 @@ export function TbankConnectionSection() {
 		},
 		onError: (error) => setRequestError(errorCode(error)),
 	});
-	const remove = useMutation({
-		mutationFn: async () => {
-			const { error } = await apiClient.DELETE("/api/v1/tbank-connection", {
-				headers,
-			});
-			if (error) throw error;
+	const remove = apiQueryClient.useMutation(
+		"delete",
+		"/api/v1/tbank-connection",
+		{
+			onSuccess: () => {
+				queryClient.setQueryData<Status>(["tbank-connection"], {
+					connected: false,
+					connectedAt: null,
+				});
+				queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
+				setDeleteOpened(false);
+			},
+			onError: () => setRequestError("REQUEST_ERROR"),
 		},
-		onSuccess: () => {
-			queryClient.setQueryData<Status>(["tbank-connection"], {
-				connected: false,
-				connectedAt: null,
-			});
-			queryClient.invalidateQueries({ queryKey: brokerageAccountsQueryKey });
-			setDeleteOpened(false);
-		},
-		onError: () => setRequestError("REQUEST_ERROR"),
-	});
+	);
 	const pending = update.isPending || remove.isPending;
 
 	if (status.isPending) return <Text>{t("states.loadingText")}</Text>;
@@ -110,7 +94,7 @@ export function TbankConnectionSection() {
 			<form
 				onSubmit={handleSubmit(({ token }) => {
 					setRequestError(null);
-					update.mutate({ token });
+					update.mutate({ body: { token } });
 				})}
 			>
 				<fieldset disabled={pending}>
@@ -159,7 +143,7 @@ export function TbankConnectionSection() {
 						color="red"
 						loading={remove.isPending}
 						disabled={pending}
-						onClick={() => remove.mutate()}
+						onClick={() => remove.mutate({})}
 					>
 						{t("tbank.deleteConfirm")}
 					</Button>