refactor: clarify frontend module ownership

2026-09-29 07:07:36 +03:00
parent 7c28a423dd
commit f9f0f6921e
91 changed files with 1292 additions and 1050 deletions
@@ -0,0 +1,120 @@
+import type { FC } from "react";
+
+import {
+	Alert,
+	Button,
+	Group,
+	Stack,
+	Text,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import {
+	InstrumentMetric,
+	InstrumentMetrics,
+	InstrumentSection as StockSection,
+} from "@/features/instrument-details";
+
+import type { StockPageVm } from "../StockPage.vm";
+
+const compactMetricFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 2,
+	notation: "compact",
+});
+
+const metricFormatter = new Intl.NumberFormat("ru-RU", {
+	maximumFractionDigits: 2,
+	notation: "standard",
+});
+
+type StockCompanyProps = Pick<StockPageVm, "company" | "companyState"> & {
+	stock: NonNullable<StockPageVm["stock"]>;
+};
+
+const StockCompany: FC<StockCompanyProps> = (props) => {
+	const { stock } = props;
+	const { t } = useTranslation();
+	let companyMetricsContent;
+
+	if (props.company) {
+		if (props.company.metrics.length > 0) {
+			companyMetricsContent = (
+				<InstrumentMetrics>
+					{props.company.metrics.map((metric) => {
+						const label = [t(`stock.metrics.${metric.key}`), metric.period].filter(Boolean).join(" · ");
+						const formatter = metric.unit === "money" ? compactMetricFormatter : metricFormatter;
+						const value = `${formatter.format(metric.value)} ${metricUnit(metric, t("stock.currencyUnknown"))}`;
+
+						return (
+							<InstrumentMetric key={metric.key} label={label} value={value} />
+						);
+					})}
+				</InstrumentMetrics>
+			);
+		}
+		else {
+			companyMetricsContent = <Text c="dimmed">{t("stock.noFundamentals")}</Text>;
+		}
+	}
+
+	return (
+		<StockSection
+			embedded
+			state={props.companyState}
+			title={t("stock.company")}
+		>
+			<Group gap="xl" mb="md">
+				{!!stock.sector && (
+					<Text size="sm">
+						{t("stock.sector")}:{" "}
+						{t(`stock.sectors.${stock.sector}`, {
+							defaultValue: stock.sector,
+						})}
+					</Text>
+				)}
+
+				{stock.lot !== null && <Text size="sm">{t("stock.lot", { value: stock.lot })}</Text>}
+			</Group>
+
+			{!!props.company && (
+				<Stack gap="lg">
+					{props.company.unavailable.length > 0 && (
+						<Alert aria-live="polite" color="orange" role="status">
+							<Group justify="space-between">
+								<Text size="sm">{t("stock.partialCompany")}</Text>
+
+								<Button
+									onClick={props.companyState.retry}
+									size="xs"
+									variant="default"
+								>
+									{t("accounts.retry")}
+								</Button>
+							</Group>
+						</Alert>
+					)}
+
+					{companyMetricsContent}
+
+					<Text c="dimmed" size="xs">
+						{t("stock.periodNote")}
+					</Text>
+				</Stack>
+			)}
+		</StockSection>
+	);
+};
+
+function metricUnit(
+	metric: NonNullable<StockPageVm["company"]>["metrics"][number],
+	unknownCurrency: string,
+) {
+	if (metric.unit === "money")
+		return metric.currency === "RUB"
+			? "₽"
+			: (metric.currency ?? unknownCurrency);
+
+	return metric.unit === "percent" ? "%" : "×";
+}
+
+export { StockCompany };