chore: finish frontend ESLint migration #18

Enable every plugin recommended preset and replace Biome with ESLint formatting. Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.
2026-09-28 16:36:40 +03:00
parent 57630102e4
commit 72d7835227
253 changed files with 10059 additions and 8864 deletions
@@ -1,13 +1,15 @@
 import { MantineProvider } from "@mantine/core";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { HttpResponse, http } from "msw";
+import { http, HttpResponse } from "msw";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it, vi } from "vitest";
+
 import { configureAuthClient } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { resource } from "@/test/resource";
 import { server } from "@/test/server";
+
 import { StocksPage } from "./StocksPage";

 describe("stock search", () => {
@@ -19,18 +21,18 @@ describe("stock search", () => {
 				return HttpResponse.json(
 					resource([
 						{
-							name: "Сбербанк",
-							ticker: "SBER",
-							instrumentUid: "unique-stock",
-							slug: "SBER",
-							logoName: "sber.png",
-							classCode: "TQBR",
-							isin: "RU0009029540",
-							realExchange: "REAL_EXCHANGE_MOEX",
-							shareType: "SHARE_TYPE_COMMON",
 							apiTradeAvailable: true,
+							classCode: "TQBR",
+							instrumentUid: "unique-stock",
+							isin: "RU0009029540",
+							logoName: "sber.png",
+							name: "Сбербанк",
 							price: { currency: "RUB", value: "306.12" },
 							priceAt: "2026-09-10T10:00:00Z",
+							realExchange: "REAL_EXCHANGE_MOEX",
+							shareType: "SHARE_TYPE_COMMON",
+							slug: "SBER",
+							ticker: "SBER",
 						},
 					]),
 				);
@@ -38,8 +40,8 @@ describe("stock search", () => {
 		);
 		configureAuthClient({
 			accessToken: () => "synthetic",
-			refresh: async () => false,
 			clear: vi.fn(),
+			refresh: () => Promise.resolve(false),
 		});
 		render(
 			<QueryClientProvider client={createTestQueryClient()}>
@@ -1,4 +1,5 @@
 import type { FC } from "react";
+
 import { StocksPageView } from "./StocksPage.view";
 import { useStocksPageVm } from "./StocksPage.vm";

@@ -1,3 +1,5 @@
+import type { FC } from "react";
+
 import {
 	Alert,
 	Anchor,
@@ -13,17 +15,113 @@ import {
 	Title,
 } from "@mantine/core";
 import { LoadingSkeleton } from "@wealthledger/ui";
-import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
+
 import { formatMoney, formatSnapshotTime } from "@/shared/lib";
-import classes from "./StocksPage.module.css";
+
 import type { StocksPageVm } from "./StocksPage.vm";

+import classes from "./StocksPage.module.css";
+
 type StocksPageViewProps = { vm: StocksPageVm };
 const StocksPageView: FC<StocksPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
+	function renderResults() {
+		if (vm.loading) {
+			return (
+				<LoadingSkeleton label={t("stock.searching")}>
+					<Stack>
+						<Skeleton h={78} />
+						<Skeleton h={78} />
+						<Skeleton h={78} />
+					</Stack>
+				</LoadingSkeleton>
+			);
+		}
+		if (!vm.ready) return;
+		if (vm.items.length > 0) {
+			return (
+				<Stack gap="sm">
+					<Text c="dimmed" size="xs">
+						{t("stock.searchVariants")}
+					</Text>
+					{vm.items.map(stock => (
+						<Paper
+							className={classes.card}
+							component={Link}
+							key={stock.instrumentUid}
+							to={stock.to}
+							withBorder
+						>
+							<Avatar alt="" radius="md" size={48} src={stock.logoSrc}>
+								{stock.name[0]}
+							</Avatar>
+							<div className={classes.identity}>
+								<Text fw={600} size="lg">
+									{stock.name}
+								</Text>
+								<Text c="dimmed" size="sm">
+									{stock.ticker}
+									{" "}
+									·
+									{" "}
+									{t(`stock.shareTypes.${stock.shareType}`, {
+										defaultValue: t("stock.share"),
+									})}
+								</Text>
+								<Group gap="xs" mt="sm">
+									<Badge color="gray" variant="light">
+										{t(`stock.exchanges.${stock.realExchange}`, {
+											defaultValue: t("stock.exchangeUnknown"),
+										})}
+									</Badge>
+									{!!(stock.classCode) && ((
+										<Text c="dimmed" size="xs">
+											{t("stock.classCode", { code: stock.classCode })}
+										</Text>
+									))}
+								</Group>
+								{!!(stock.isin) && ((
+									<Text c="dimmed" mt={4} size="xs">
+										{t("stock.isin", { value: stock.isin })}
+									</Text>
+								))}
+								{(stock.apiTradeAvailable === false) && ((
+									<Text c="dimmed" mt={4} size="xs">
+										{t("stock.apiUnavailable")}
+									</Text>
+								))}
+							</div>
+							<div className={classes.quote}>
+								<Text fw={650} size="xl">
+									{stock.price ? formatMoney(stock.price) : "—"}
+								</Text>
+								<Text c="dimmed" size="xs">
+									{stock.price && stock.priceAt
+										? t("stock.priceAt", {
+												date: formatSnapshotTime(stock.priceAt),
+											})
+										: t("stock.priceUnavailable")}
+								</Text>
+								{(stock.apiTradeAvailable === true) && ((
+									<Text c="green.8" mt="sm" size="xs">
+										{t("stock.apiAvailable")}
+									</Text>
+								))}
+							</div>
+						</Paper>
+					))}
+				</Stack>
+			);
+		}
+		return (
+			<Text c="dimmed">
+				{t(vm.partial ? "investment.partial" : "stock.noSearchResults")}
+			</Text>
+		);
+	}
 	return (
 		<Stack gap="lg">
 			<div>
@@ -33,33 +131,33 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
 				</Text>
 			</div>
 			<Button
+				disabled={vm.refreshing || !vm.canSearch}
 				onClick={vm.retry}
-				disabled={vm.refreshing || vm.query.trim().length < 2}
 				w="fit-content"
 			>
 				{t("investment.refresh")}
 			</Button>
-			{vm.partial ? (
+			{!!(vm.partial) && ((
 				<Alert role="status">{t("investment.partial")}</Alert>
-			) : null}
+			))}
 			<TextInput
 				label={t("stock.searchLabel")}
+				maxLength={80}
+				onChange={event => vm.setQuery(event.currentTarget.value)}
 				placeholder={t("stock.searchPlaceholder")}
 				size="md"
-				maxLength={80}
 				value={vm.query}
-				onChange={(event) => vm.setQuery(event.currentTarget.value)}
 			/>
-			{vm.query.trim().length < 2 ? (
+			{!(vm.canSearch) && ((
 				<Text c="dimmed">{t("stock.searchHint")}</Text>
-			) : null}
-			{vm.error ? (
-				<Alert role="status" aria-live="polite" color="orange">
+			))}
+			{!!(vm.error) && ((
+				<Alert aria-live="polite" color="orange" role="status">
 					<Stack gap="xs">
 						<Text>
 							{t(
-								vm.code === "TBANK_NOT_CONNECTED" ||
-									vm.code === "INVALID_TBANK_TOKEN"
+								vm.code === "TBANK_NOT_CONNECTED"
+								|| vm.code === "INVALID_TBANK_TOKEN"
 									? "stock.connect"
 									: "stock.sectionError",
 							)}
@@ -67,96 +165,13 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
 						<Anchor component={Link} to="/settings">
 							{t("accounts.openSettings")}
 						</Anchor>
-						<Button variant="default" onClick={vm.retry}>
+						<Button onClick={vm.retry} variant="default">
 							{t("accounts.retry")}
 						</Button>
 					</Stack>
 				</Alert>
-			) : null}
-			{vm.loading ? (
-				<LoadingSkeleton label={t("stock.searching")}>
-					<Stack>
-						<Skeleton h={78} />
-						<Skeleton h={78} />
-						<Skeleton h={78} />
-					</Stack>
-				</LoadingSkeleton>
-			) : vm.ready ? (
-				vm.items.length ? (
-					<Stack gap="sm">
-						<Text size="xs" c="dimmed">
-							{t("stock.searchVariants")}
-						</Text>
-						{vm.items.map((stock) => (
-							<Paper
-								component={Link}
-								to={stock.to}
-								className={classes.card}
-								withBorder
-								key={stock.instrumentUid}
-							>
-								<Avatar src={stock.logoSrc} alt="" radius="md" size={48}>
-									{stock.name[0]}
-								</Avatar>
-								<div className={classes.identity}>
-									<Text fw={600} size="lg">
-										{stock.name}
-									</Text>
-									<Text size="sm" c="dimmed">
-										{stock.ticker} ·{" "}
-										{t(`stock.shareTypes.${stock.shareType}`, {
-											defaultValue: t("stock.share"),
-										})}
-									</Text>
-									<Group gap="xs" mt="sm">
-										<Badge variant="light" color="gray">
-											{t(`stock.exchanges.${stock.realExchange}`, {
-												defaultValue: t("stock.exchangeUnknown"),
-											})}
-										</Badge>
-										{stock.classCode ? (
-											<Text size="xs" c="dimmed">
-												{t("stock.classCode", { code: stock.classCode })}
-											</Text>
-										) : null}
-									</Group>
-									{stock.isin ? (
-										<Text size="xs" c="dimmed" mt={4}>
-											{t("stock.isin", { value: stock.isin })}
-										</Text>
-									) : null}
-									{stock.apiTradeAvailable === false ? (
-										<Text size="xs" c="dimmed" mt={4}>
-											{t("stock.apiUnavailable")}
-										</Text>
-									) : null}
-								</div>
-								<div className={classes.quote}>
-									<Text fw={650} size="xl">
-										{stock.price ? formatMoney(stock.price) : "—"}
-									</Text>
-									<Text size="xs" c="dimmed">
-										{stock.price && stock.priceAt
-											? t("stock.priceAt", {
-													date: formatSnapshotTime(stock.priceAt),
-												})
-											: t("stock.priceUnavailable")}
-									</Text>
-									{stock.apiTradeAvailable === true ? (
-										<Text size="xs" c="green.8" mt="sm">
-											{t("stock.apiAvailable")}
-										</Text>
-									) : null}
-								</div>
-							</Paper>
-						))}
-					</Stack>
-				) : (
-					<Text c="dimmed">
-						{t(vm.partial ? "investment.partial" : "stock.noSearchResults")}
-					</Text>
-				)
-			) : null}
+			))}
+			{renderResults()}
 		</Stack>
 	);
 };
@@ -1,44 +1,47 @@
 import { useDebouncedValue } from "@mantine/hooks";
 import { useSearchParams } from "react-router";
-import { useStockSearch } from "@/entities/stock";
+
+import { MIN_STOCK_SEARCH_LENGTH, useStockSearch } from "@/entities/stock";
 import { useScreenSync } from "@/features/tbank-connection";
 import { apiErrorCode } from "@/shared/api";
 import { instrumentLogoUrl } from "@/shared/lib";

 const SEARCH_DEBOUNCE_MS = 300;

+type StocksPageVm = ReturnType<typeof useStocksPageVm>;
 function useStocksPageVm() {
-	const [params, setParams] = useSearchParams();
-	const query = params.get("q") ?? "";
+	const [parameters, setParameters] = useSearchParams();
+	const query = parameters.get("q") ?? "";
 	const [debounced] = useDebouncedValue(query.trim(), SEARCH_DEBOUNCE_MS);
 	const result = useStockSearch(debounced);
-	const sync = useScreenSync({ screen: "stocks", query: debounced }, [result]);
-	const waiting = query.trim() !== debounced;
+	const sync = useScreenSync({ query: debounced, screen: "stocks" }, [result]);
+	const canSearch = query.trim().length >= MIN_STOCK_SEARCH_LENGTH;
+	const isWaiting = query.trim() !== debounced;
 	return {
-		query,
-		setQuery: (q: string) => setParams(q ? { q } : {}, { replace: true }),
-		loading:
-			query.trim().length >= 2 &&
-			(waiting ||
-				(!result.data &&
-					!result.isError &&
-					result.meta?.sync.state !== "failed")),
-		error: result.isError || sync.sourceError || sync.transportError,
-		refreshing: sync.refreshing,
-		partial: result.meta?.availability === "partial",
+		canSearch,
 		code: apiErrorCode(result.error),
+		error: result.isError || sync.sourceError || sync.transportError,
+		items:
+			result.data?.map(stock => ({
+				...stock,
+				logoSrc: instrumentLogoUrl(stock.logoName),
+				to: `/stocks/${encodeURIComponent(stock.slug ?? stock.instrumentUid)}`,
+			})) ?? [],
+		loading:
+			canSearch
+			&& (isWaiting
+				|| (!result.data
+					&& !result.isError
+					&& result.meta?.sync.state !== "failed")),
+		partial: result.meta?.availability === "partial",
+		query,
+		ready: debounced.length >= MIN_STOCK_SEARCH_LENGTH && !isWaiting && Boolean(result.data),
+		refreshing: sync.refreshing,
 		retry: () => {
 			void sync.retry();
 		},
-		ready: debounced.length >= 2 && !waiting && Boolean(result.data),
-		items:
-			result.data?.map((stock) => ({
-				...stock,
-				to: `/stocks/${encodeURIComponent(stock.slug ?? stock.instrumentUid)}`,
-				logoSrc: instrumentLogoUrl(stock.logoName),
-			})) ?? [],
+		setQuery: (q: string) => setParameters(q ? { q } : {}, { replace: true }),
 	};
 }
-type StocksPageVm = ReturnType<typeof useStocksPageVm>;

 export { type StocksPageVm, useStocksPageVm };