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.

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

@@ -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>
 	);
 };