refactor: share instrument search presentation

src/pages/bonds/ui/BondsPage/BondsPage.vm.ts

@@ -1,25 +1,16 @@
-import type { ChangeEvent } from "react";
-
-import { useDebouncedValue } from "@mantine/hooks";
-import { useSearchParams } from "react-router";
-
 import { MIN_BOND_SEARCH_LENGTH, useBondSearch } from "@/entities/bond";
+import { useInstrumentSearch } from "@/features/instrument-search";
 import { useScreenSync } from "@/features/tbank-connection";
 import { apiErrorCode } from "@/shared/api";
 import { instrumentLogoUrl } from "@/shared/lib";
 
-const SEARCH_DEBOUNCE_MS = 300;
-
 type BondsPageVm = ReturnType<typeof useBondsPageVm>;
 
 function useBondsPageVm() {
-	const [parameters, setParameters] = useSearchParams();
-	const query = parameters.get("q") ?? "";
-	const [debounced] = useDebouncedValue(query.trim(), SEARCH_DEBOUNCE_MS);
+	const search = useInstrumentSearch(MIN_BOND_SEARCH_LENGTH);
+	const { canSearch, debounced, isWaiting, query } = search;
 	const result = useBondSearch(debounced);
 	const sync = useScreenSync({ query: debounced, screen: "bonds" }, [result]);
-	const canSearch = query.trim().length >= MIN_BOND_SEARCH_LENGTH;
-	const isWaiting = query.trim() !== debounced;
 
 	return {
 		canSearch,
@@ -37,10 +28,7 @@ function useBondsPageVm() {
 				|| (!result.data
 					&& !result.isError
 					&& result.meta?.sync.state !== "failed")),
-		onQueryChange: (event: ChangeEvent<HTMLInputElement>) => {
-			const q = event.currentTarget.value;
-			setParameters(q ? { q } : {}, { replace: true });
-		},
+		onQueryChange: search.onQueryChange,
 		partial: result.meta?.availability === "partial",
 		query,
 		ready: