refactor: refactor foundation

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>