refactor: simplify frontend state and mutation boundaries

src/pages/stocks/ui/StocksPage/StocksPage.view.tsx

@@ -24,7 +24,6 @@ import { formatMoney, formatSnapshotTime } from "@/shared/lib";
 import type { StocksPageVm } from "./StocksPage.vm";
 
 import classes from "./StocksPage.module.css";
-import { useStocksPageViewVm } from "./StocksPageView.vm";
 
 type StocksPageViewProps = { vm: StocksPageVm };
 
@@ -139,7 +138,8 @@ const StocksPageViewResults: FC<StocksPageViewProps> = (props) => {
 };
 
 const StocksPageView: FC<StocksPageViewProps> = (props) => {
-	const { onChange, t, vm } = useStocksPageViewVm(props);
+	const { vm } = props;
+	const { t } = useTranslation();
 
 	return (
 		<Stack gap="lg">
@@ -164,7 +164,7 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
 			<TextInput
 				label={t("stock.searchLabel")}
 				maxLength={80}
-				onChange={onChange}
+				onChange={vm.onQueryChange}
 				placeholder={t("stock.searchPlaceholder")}
 				size="md"
 				value={vm.query}

src/pages/stocks/ui/StocksPage/StocksPage.vm.ts

@@ -1,3 +1,5 @@
+import type { ChangeEvent } from "react";
+
 import { useDebouncedValue } from "@mantine/hooks";
 import { useSearchParams } from "react-router";
 
@@ -35,6 +37,10 @@ function useStocksPageVm() {
 				|| (!result.data
 					&& !result.isError
 					&& result.meta?.sync.state !== "failed")),
+		onQueryChange: (event: ChangeEvent<HTMLInputElement>) => {
+			const q = event.currentTarget.value;
+			setParameters(q ? { q } : {}, { replace: true });
+		},
 		partial: result.meta?.availability === "partial",
 		query,
 		ready:
@@ -45,7 +51,6 @@ function useStocksPageVm() {
 		retry: () => {
 			void sync.retry();
 		},
-		setQuery: (q: string) => setParameters(q ? { q } : {}, { replace: true }),
 	};
 }
 

src/pages/stocks/ui/StocksPage/StocksPageView.vm.ts

@@ -1,20 +0,0 @@
-import type { ComponentProps } from "react";
-
-import { TextInput } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-
-import type { StocksPageVm } from "./StocksPage.vm";
-
-type StocksPageViewProps = { vm: StocksPageVm };
-
-function useStocksPageViewVm(props: StocksPageViewProps) {
-	const { vm } = props;
-	const { t } = useTranslation();
-
-	const onChange: ComponentProps<typeof TextInput>["onChange"] = event =>
-		vm.setQuery(event.currentTarget.value);
-
-	return { onChange, t, vm };
-}
-
-export { useStocksPageViewVm };