refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,152 @@
+import {
+	Alert,
+	Anchor,
+	Avatar,
+	Badge,
+	Button,
+	Group,
+	Paper,
+	Skeleton,
+	Stack,
+	Text,
+	TextInput,
+	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";
+
+type StocksPageViewProps = { vm: StocksPageVm };
+const StocksPageView: FC<StocksPageViewProps> = (props) => {
+	const { vm } = props;
+	const { t } = useTranslation();
+	return (
+		<Stack gap="lg">
+			<div>
+				<Title order={1}>{t("stock.searchTitle")}</Title>
+				<Text c="dimmed" mt="xs">
+					{t("stock.searchSubtitle")}
+				</Text>
+			</div>
+			<TextInput
+				label={t("stock.searchLabel")}
+				placeholder={t("stock.searchPlaceholder")}
+				size="md"
+				maxLength={80}
+				value={vm.query}
+				onChange={(event) => vm.setQuery(event.currentTarget.value)}
+			/>
+			{vm.query.trim().length < 2 ? (
+				<Text c="dimmed">{t("stock.searchHint")}</Text>
+			) : null}
+			{vm.error ? (
+				<Alert role="alert" color="orange">
+					<Stack gap="xs">
+						<Text>
+							{t(
+								vm.code === "TBANK_NOT_CONNECTED" ||
+									vm.code === "INVALID_TBANK_TOKEN"
+									? "stock.connect"
+									: "stock.sectionError",
+							)}
+						</Text>
+						<Anchor component={Link} to="/settings">
+							{t("accounts.openSettings")}
+						</Anchor>
+						<Button variant="default" onClick={vm.retry}>
+							{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("stock.noSearchResults")}</Text>
+				)
+			) : null}
+		</Stack>
+	);
+};
+
+export { StocksPageView };