refactor: clarify frontend model ownership

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx

@@ -5,10 +5,8 @@ import { AccountOperationsPageError } from "./components/AccountOperationsPageEr
 import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageLoaded.view";
 import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
 
-type AccountOperationsPageProps = { accountId?: string };
-
-const AccountOperationsPage: FC<AccountOperationsPageProps> = (props) => {
-	const viewModel = useAccountOperationsPageVm(props.accountId);
+const AccountOperationsPage: FC = () => {
+	const viewModel = useAccountOperationsPageVm();
 
 	if (viewModel.state === "loading") {
 		return <AccountOperationsPageLoading />;

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts

@@ -7,7 +7,7 @@ import {
 	brokerageOperationsQueryOptions,
 	operationCategories,
 	type OperationCategory,
-	useBrokerageOperations,
+	useBrokerageOperationHistory,
 } from "@/entities/broker-operation";
 import { useScreenSync } from "@/features/tbank-connection";
 import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
@@ -41,11 +41,8 @@ type AccountOperationsPageViewModel
 	| { onReset: () => void; retry: () => void; state: "error" }
 	| { state: "loading" };
 
-const useAccountOperationsPageVm = (
-	scopeId?: string,
-): AccountOperationsPageViewModel => {
-	const { accountId: routeAccountId } = useParams();
-	const accountId = scopeId ?? routeAccountId;
+const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
+	const { accountId } = useParams();
 	const queryClient = useQueryClient();
 	const [searchParameters, setSearchParameters] = useSearchParams();
 	const urlFrom = searchParameters.get("from");
@@ -74,25 +71,6 @@ const useAccountOperationsPageVm = (
 	const [draftCategories, setDraftCategories]
 		= useState<OperationCategory[]>(appliedCategories);
 
-	const scopeKey = JSON.stringify([
-		accountId,
-		urlFrom,
-		urlTo,
-		appliedCategories,
-	]);
-
-	const [pagination, setPagination] = useState<{
-		cursors: string[];
-		scopeKey: string;
-	}>({ cursors: [], scopeKey });
-
-	const cursors = pagination.scopeKey === scopeKey ? pagination.cursors : [];
-	const cursor = cursors.at(-1);
-
-	if (pagination.scopeKey !== scopeKey) {
-		setPagination({ cursors: [], scopeKey });
-	}
-
 	useEffect(() => {
 		if (isValidUrlPeriod) return;
 		const normalized = new URLSearchParams(searchParameters);
@@ -100,13 +78,6 @@ const useAccountOperationsPageVm = (
 		normalized.delete("to");
 		setSearchParameters(normalized, { replace: true });
 	}, [isValidUrlPeriod, searchParameters, setSearchParameters]);
-	const [previousSearch, setPreviousSearch] = useState(searchParameters);
-
-	if (previousSearch !== searchParameters) {
-		setPreviousSearch(searchParameters);
-		setDraftPeriod([appliedFrom, appliedTo]);
-		setDraftCategories(appliedCategories);
-	}
 
 	const firstPageQuery = {
 		from: dateStart(appliedFrom),
@@ -115,10 +86,17 @@ const useAccountOperationsPageVm = (
 		limit: 100,
 	};
 
-	const operations = useBrokerageOperations(accountId, {
-		...firstPageQuery,
-		...(cursor && { cursor }),
-	});
+	const history = useBrokerageOperationHistory(accountId, firstPageQuery);
+	const { operations } = history;
+	const scope = JSON.stringify([accountId, searchParameters.toString()]);
+	const [previousScope, setPreviousScope] = useState(scope);
+
+	if (previousScope !== scope) {
+		setPreviousScope(scope);
+		setDraftPeriod([appliedFrom, appliedTo]);
+		setDraftCategories(appliedCategories);
+		history.reset();
+	}
 
 	const sync = useScreenSync(
 		{ accountId, screen: "operations", ...firstPageQuery },
@@ -131,30 +109,13 @@ const useAccountOperationsPageVm = (
 		limit: 100,
 	}).queryKey;
 
-	const resetCursors = () => setPagination({ cursors: [], scopeKey });
-
-	const retry = () => {
-		if (
-			isApiErrorCode(
-				apiErrorCode(operations.error),
-				ApiErrorCode.InvalidOperationsCursor,
-			)
-		) {
-			void queryClient.invalidateQueries({
-				exact: true,
-				queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery)
-					.queryKey,
-			});
-			resetCursors();
-		}
-		else void sync.retry();
-	};
+	const retry = () => history.retry(sync.retry);
 
 	const onReset = () => {
 		setDraftPeriod([null, null]);
 		setDraftCategories([]);
 		setSearchParameters({});
-		resetCursors();
+		history.reset();
 		void queryClient.invalidateQueries({ queryKey: resetQueryKey });
 	};
 
@@ -180,7 +141,7 @@ const useAccountOperationsPageVm = (
 		draftCategories,
 		draftPeriod,
 		hasNext: Boolean(nextCursor && operations.data.hasNext),
-		hasPrevious: cursors.length > 0,
+		hasPrevious: history.hasPrevious,
 		historyLoading:
 			operations.meta?.coverage?.historyState === "loading"
 			|| operations.meta?.coverage?.historyState === "partial",
@@ -195,20 +156,16 @@ const useAccountOperationsPageVm = (
 					categories: draftCategories.join(","),
 				}),
 			});
-			resetCursors();
+			history.reset();
 		},
 		onCategoriesChange: values => setDraftCategories(
 			values.filter((value): value is OperationCategory =>
 				operationCategorySet.has(value),
 			),
 		),
-		onNext: () => {
-			if (nextCursor)
-				setPagination({ cursors: [...cursors, nextCursor], scopeKey });
-		},
+		onNext: history.onNext,
 		onPeriodChange: setDraftPeriod,
-		onPrevious: () =>
-			setPagination({ cursors: cursors.slice(0, -1), scopeKey }),
+		onPrevious: history.onPrevious,
 		onReset,
 		partial: operations.meta?.availability !== "complete",
 		refreshError: operations.isError || sync.sourceError || sync.transportError,