refactor: enforce frontend view model boundaries

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

@@ -1,7 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "react-router";
-import { z } from "zod";
 
 import {
 	type BrokerageOperation,
@@ -12,6 +11,7 @@ import {
 } from "@/entities/broker-operation";
 import { useScreenSync } from "@/features/tbank-connection";
 import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
+import { isValidPeriod } from "@/shared/lib";
 
 type AccountOperationsPageViewModel
 	= | {
@@ -51,30 +51,44 @@ const useAccountOperationsPageVm = (
 	const urlFrom = searchParameters.get("from");
 	const urlTo = searchParameters.get("to");
 	const isValidUrlPeriod = isValidPeriod(urlFrom, urlTo);
-	const appliedFrom = isValidUrlPeriod ? urlFrom : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
-	const appliedTo = isValidUrlPeriod ? urlTo : /* eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model. */ null;
+
+	const appliedFrom = isValidUrlPeriod
+		? urlFrom
+		: null; // eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model.
+
+	const appliedTo = isValidUrlPeriod
+		? urlTo
+		: null; // eslint-disable-line unicorn/no-null -- Preserve the nullable domain value consumed by this view model.
+
 	const appliedCategories = operationCategories.filter(category =>
 		(searchParameters.get("categories") ?? "").split(",").includes(category),
 	);
+
 	const [draftFrom, setDraftFrom] = useState<null | string>(appliedFrom);
 	const [draftTo, setDraftTo] = useState<null | string>(appliedTo);
+
 	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);
@@ -83,38 +97,52 @@ const useAccountOperationsPageVm = (
 		setSearchParameters(normalized, { replace: true });
 	}, [isValidUrlPeriod, searchParameters, setSearchParameters]);
 	const [previousSearch, setPreviousSearch] = useState(searchParameters);
+
 	if (previousSearch !== searchParameters) {
 		setPreviousSearch(searchParameters);
 		setDraftFrom(appliedFrom);
 		setDraftTo(appliedTo);
 		setDraftCategories(
 			operationCategories.filter(category =>
-				(searchParameters.get("categories") ?? "").split(",").includes(category),
+				(searchParameters.get("categories") ?? "")
+					.split(",")
+					.includes(category),
 			),
 		);
 	}
+
 	const firstPageQuery = {
 		from: dateStart(appliedFrom),
 		to: dateEnd(appliedTo),
-		...((appliedCategories.length > 0) && { categories: appliedCategories }),
+		...(appliedCategories.length > 0 && { categories: appliedCategories }),
 		limit: 100,
 	};
+
 	const operations = useBrokerageOperations(accountId, {
 		...firstPageQuery,
 		...(cursor && { cursor }),
 	});
+
 	const sync = useScreenSync(
 		{ accountId, screen: "operations", ...firstPageQuery },
 		[operations],
 	);
+
 	if (operations.isLoading) return { state: "loading" };
+
 	const resetQueryKey = brokerageOperationsQueryOptions(accountId, {
 		limit: 100,
 	}).queryKey;
 
 	const resetCursors = () => setPagination({ cursors: [], scopeKey });
+
 	const retry = () => {
-		if (isApiErrorCode(apiErrorCode(operations.error), ApiErrorCode.InvalidOperationsCursor)) {
+		if (
+			isApiErrorCode(
+				apiErrorCode(operations.error),
+				ApiErrorCode.InvalidOperationsCursor,
+			)
+		) {
 			void queryClient.invalidateQueries({
 				exact: true,
 				queryKey: brokerageOperationsQueryOptions(accountId, firstPageQuery)
@@ -124,6 +152,7 @@ const useAccountOperationsPageVm = (
 		}
 		else void sync.retry();
 	};
+
 	const onReset = () => {
 		setDraftFrom(null);
 		setDraftTo(null);
@@ -136,7 +165,10 @@ const useAccountOperationsPageVm = (
 	if (
 		(operations.isError || operations.meta?.sync.state === "failed")
 		&& (!operations.data
-			|| isApiErrorCode(apiErrorCode(operations.error), ApiErrorCode.InvalidOperationsCursor))
+			|| isApiErrorCode(
+				apiErrorCode(operations.error),
+				ApiErrorCode.InvalidOperationsCursor,
+			))
 	)
 		return { onReset, retry, state: "error" };
 	if (!operations.data) return { state: "loading" };
@@ -164,7 +196,9 @@ const useAccountOperationsPageVm = (
 			setSearchParameters({
 				...(draftFrom && { from: draftFrom }),
 				...(draftTo && { to: draftTo }),
-				...((draftCategories.length > 0) && { categories: draftCategories.join(",") }),
+				...(draftCategories.length > 0 && {
+					categories: draftCategories.join(","),
+				}),
 			});
 			resetCursors();
 		},
@@ -187,7 +221,6 @@ const useAccountOperationsPageVm = (
 	};
 };
 
-const calendarDate = z.iso.date();
 function dateEnd(value: null | string) {
 	return value ? `${value}T23:59:59.999Z` : undefined;
 }
@@ -200,13 +233,4 @@ function isSameCategories(a: OperationCategory[], b: OperationCategory[]) {
 	return a.length === b.length && a.every(value => b.includes(value));
 }
 
-function isValidPeriod(from: null | string, to: null | string) {
-	return (
-		[from, to].every(
-			date => date === null || calendarDate.safeParse(date).success,
-		)
-		&& (!from || !to || from <= to)
-	);
-}
-
 export { type AccountOperationsPageViewModel, useAccountOperationsPageVm };