refactor: simplify frontend state and mutation boundaries

src/entities/bank-card/api/banking.test.tsx

@@ -6,7 +6,13 @@ import { apiClient, configureAuthClient } from "@/shared/api";
 import { createQueryWrapper } from "@/test/query";
 import { server } from "@/test/server";
 
-import { useBankMutations } from "./mutations";
+import {
+	useCreateBankOperation,
+	useDeleteBankOperation,
+	useUpdateBankCard,
+	useUpdateBankOperation,
+	useUpdateExpenseCategory,
+} from "./mutations";
 import {
 	type BankCard,
 	type CreateBankOperation,
@@ -111,7 +117,7 @@ function useReadModels() {
 	const original = useBankOperation("original");
 
 	return {
-		mutations: useBankMutations(),
+		createOperation: useCreateBankOperation(),
 		reads: [
 			cards,
 			a,
@@ -217,11 +223,11 @@ describe("banking API", () => {
 			}),
 		);
 
-		const { result } = renderHook(useBankMutations, {
+		const { result } = renderHook(useCreateBankOperation, {
 			wrapper: createQueryWrapper().wrapper,
 		});
 
-		await act(() => result.current.createOperation.mutateAsync(transfer));
+		await act(() => result.current.mutateAsync(transfer));
 		expect(bodies).toEqual([transfer, transfer]);
 		expect(headers).toEqual(["Bearer expired", "Bearer renewed"]);
 		expect(refresh).toHaveBeenCalledTimes(1);
@@ -239,17 +245,17 @@ describe("banking API", () => {
 			}),
 		);
 
-		const { result } = renderHook(useBankMutations, {
+		const { result } = renderHook(useCreateBankOperation, {
 			wrapper: createQueryWrapper().wrapper,
 		});
 
 		await act(async () => {
 			await expect(
-				result.current.createOperation.mutateAsync(transfer),
+				result.current.mutateAsync(transfer),
 			).rejects.toThrow();
 		});
 		expect(bodies).toEqual([transfer]);
-		await act(() => result.current.createOperation.mutateAsync(transfer));
+		await act(() => result.current.mutateAsync(transfer));
 		expect(bodies).toEqual([transfer, transfer]);
 	});
 
@@ -266,20 +272,20 @@ describe("banking API", () => {
 		);
 
 		const { result } = renderHook(
-			() => ({ mutations: useBankMutations(), query: useBankCard("a") }),
+			() => ({ createOperation: useCreateBankOperation(), query: useBankCard("a") }),
 			{ wrapper: createQueryWrapper().wrapper },
 		);
 
 		await waitFor(() => expect(result.current.query.isSuccess).toBe(true));
 		let saving: Promise<unknown>;
 		act(() => {
-			saving = result.current.mutations.createOperation
+			saving = result.current.createOperation
 				.mutateAsync(transfer)
 				// eslint-disable-next-line unicorn/prefer-await -- Attach the handler immediately and retain the pending promise for queue/race ordering.
 				.catch(() => {});
 		});
 		await waitFor(() =>
-			expect(result.current.mutations.createOperation.isPending).toBe(true),
+			expect(result.current.createOperation.isPending).toBe(true),
 		);
 		expect(result.current.query.data?.balance.value).toBe("100");
 		await act(async () => {
@@ -313,7 +319,7 @@ describe("banking API", () => {
 			expect(result.current.reads.every(read => read.isSuccess)).toBe(true),
 		);
 		await act(() =>
-			result.current.mutations.createOperation.mutateAsync(transfer),
+			result.current.createOperation.mutateAsync(transfer),
 		);
 		expect(counts.size).toBe(9);
 		for (const count of counts.values()) expect(count).toBe(2);
@@ -336,14 +342,14 @@ describe("banking API", () => {
 		);
 
 		const { result } = renderHook(
-			() => ({ card: useBankCard("a"), mutations: useBankMutations() }),
+			() => ({ card: useBankCard("a"), updateCard: useUpdateBankCard() }),
 			{ wrapper: createQueryWrapper().wrapper },
 		);
 
 		await waitFor(() => expect(result.current.card.data?.version).toBe(1));
 		await act(async () => {
 			await expect(
-				result.current.mutations.updateCard.mutateAsync({
+				result.current.updateCard.mutateAsync({
 					body: { name: "changed", version: 1 },
 					id: "a",
 				}),
@@ -389,7 +395,9 @@ describe("banking API", () => {
 		const { result } = renderHook(
 			() => ({
 				categories: useBankCategories(),
-				mutations: useBankMutations(),
+				deleteOperation: useDeleteBankOperation(),
+				updateCategory: useUpdateExpenseCategory(),
+				updateOperation: useUpdateBankOperation(),
 			}),
 			{ wrapper: createQueryWrapper().wrapper },
 		);
@@ -398,7 +406,7 @@ describe("banking API", () => {
 			expect(result.current.categories.data?.[0].name).toBe("Food"),
 		);
 		await act(() =>
-			result.current.mutations.updateCategory.mutateAsync({
+			result.current.updateCategory.mutateAsync({
 				body: { name: "Groceries", version: 1 },
 				id: "food",
 			}),
@@ -407,13 +415,13 @@ describe("banking API", () => {
 			expect(result.current.categories.data?.[0].name).toBe("Groceries"),
 		);
 		await act(() =>
-			result.current.mutations.updateOperation.mutateAsync({
+			result.current.updateOperation.mutateAsync({
 				body: { description: "corrected", version: 1 },
 				id: "original",
 			}),
 		);
 		await act(() =>
-			result.current.mutations.deleteOperation.mutateAsync({
+			result.current.deleteOperation.mutateAsync({
 				id: "original",
 				version: 2,
 			}),