WealthLedger/frontend
5
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify frontend and clarify module ownership #45

Merged
ksv741 merged 16 commits from codex/frontend-calendar-form-cleanup into develop 2026-10-01 21:07:51 +03:00
Conversation 0 Commits 16 Files Changed 226
+50 -65
7 changed files with 50 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 64fe902192 - Show all commits
src/features/instrument-details/model/types.ts
+2 -6
View File
@@ -7,17 +7,13 @@ type Candles = NonNullable<
paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]
>;
type ChartRow = Candles["candles"][number] & { date: string; price: number };
type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
type InstrumentChartVm = {
averageLine: null | number;
candles?: Candles;
candlesState: SectionState;
chartData: ChartRow[];
hasIncompleteCandle: boolean;
period: string;
position?: Position;
priceRows: ChartRow[];
setPeriod: (value: string) => void;
};
@@ -41,4 +37,4 @@ type Position = NonNullable<
paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]
>;
export type { InstrumentChartVm, InstrumentEventsVm, InstrumentPositionVm };
export type { InstrumentChartProps, InstrumentEventsVm, InstrumentPositionVm };
src/features/instrument-details/ui/InstrumentChart/InstrumentChart.view.tsx
+10 -11
View File
@@ -10,20 +10,19 @@ import {
Text,
} from "@mantine/core";
import { formatMoney } from "@/shared/lib";
import { formatChartValue, formatMoney } from "@/shared/lib";
import type { InstrumentChartVm } from "../../model/types";
import type { InstrumentChartProps } from "../../model/types";
import classes from "../InstrumentDetails.module.css";
import { InstrumentSection } from "../InstrumentSection.view";
import { useInstrumentChartVm } from "./InstrumentChart.vm";
type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
const InstrumentChart: FC<InstrumentChartProps> = (props) => {
const {
chartData,
chartLabel,
formatChartValue,
hasIncompleteCandle,
periodOptions,
priceRows,
referenceLines,
@@ -34,14 +33,14 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
let chartContent;
if (vm.candles) {
if (vm.chartData.length > 0) {
if (chartData.length > 0) {
chartContent = (
<>
<AreaChart
areaProps={{ isAnimationActive: false }}
aria-label={chartLabel}
curveType="linear"
data={vm.chartData}
data={chartData}
dataKey="date"
gridAxis="y"
h={310}
@@ -52,7 +51,7 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
tickLine="none"
tooltipAnimationDuration={0}
valueFormatter={formatChartValue}
withDots={vm.chartData.length === 1}
withDots={chartData.length === 1}
withGradient
yAxisProps={{ domain: ["auto", "auto"], width: 64 }}
/>
@@ -65,13 +64,13 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
)}
</Text>
{!!vm.hasIncompleteCandle && (
{!!hasIncompleteCandle && (
<Text c="dimmed" size="xs">
{t("stock.incomplete")}
</Text>
)}
{vm.averageLine !== null && (
{referenceLines.length > 0 && (
<Text mt="xs" size="sm">
{t("stock.averageLine")}:{" "}
{formatMoney(vm.position?.averagePurchasePrice)}
@@ -88,7 +87,7 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
<Text fw={600}>{t("stock.priceTable")}</Text>
<Text c="dimmed" size="xs">
{t("stock.priceTableHint", { count: vm.chartData.length })}
{t("stock.priceTableHint", { count: chartData.length })}
</Text>
</Accordion.Control>
src/features/instrument-details/ui/InstrumentChart/InstrumentChart.vm.ts
+20 -8
View File
@@ -1,16 +1,27 @@
import { useTranslation } from "react-i18next";
import { formatChartValue, formatDecimal, formatMoney } from "@/shared/lib";
import { formatDate, formatDecimal, formatMoney } from "@/shared/lib";
import type { InstrumentChartVm } from "../../model/types";
type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
import type { InstrumentChartProps } from "../../model/types";
function useInstrumentChartVm(props: InstrumentChartProps) {
const { vm } = props;
const { t } = useTranslation();
const priceRows = vm.priceRows.map((candle) => {
const chartData = vm.candles?.candles.map(candle => ({
...candle,
date: formatDate(candle.time),
price: Number(candle.close),
})) ?? [];
const average = vm.position?.averagePurchasePrice;
const averageLine = average && props.priceUnit !== "percent"
&& average.currency === vm.candles?.currency
? Number(average.value)
: null;
const priceRows = chartData.toReversed().map((candle) => {
const currency = vm.candles?.currency;
const value = candle.close;
@@ -39,20 +50,21 @@ function useInstrumentChartVm(props: InstrumentChartProps) {
);
const referenceLines
= vm.averageLine === null
= averageLine === null || !Number.isFinite(averageLine)
? []
: [
{
color: "orange.7",
ifOverflow: "extendDomain" as const,
label: t("stock.averageLine"),
y: vm.averageLine,
y: averageLine,
},
];
return {
chartData,
chartLabel,
formatChartValue,
hasIncompleteCandle: chartData.some(candle => !candle.isComplete),
periodOptions,
priceRows,
referenceLines,
src/pages/bond/ui/BondPage/BondPage.test.tsx
+1
View File
@@ -321,6 +321,7 @@ describe("bond page", () => {
fireEvent.click(screen.getByRole("button", { name: /Цены в таблице/ }));
await waitFor(() => expect(screen.getByText("99,25 %")).toBeVisible());
expect(screen.queryByText("99,25 ₽")).not.toBeInTheDocument();
expect(screen.queryByText(/Текущая средняя покупка/)).not.toBeInTheDocument();
fireEvent.click(
screen.getByRole("button", { name: "Прошедшие и недатированные купоны" }),
);
src/pages/bond/ui/BondPage/BondPage.vm.ts
+1 -14
View File
@@ -17,7 +17,7 @@ import {
} from "@/features/instrument-details";
import { useScreenSync } from "@/features/tbank-connection";
import { apiErrorCode } from "@/shared/api";
import { formatDate, instrumentLogoUrl } from "@/shared/lib";
import { instrumentLogoUrl } from "@/shared/lib";
const periods: BondPeriod[] = ["month", "halfYear", "year", "all"];
const filters = ["all", "trades", "coupons", "other"] as const;
@@ -80,18 +80,9 @@ function useBondPageVm() {
setParameters(next, { replace: true });
};
const chartData
= candles.data?.candles.map(candle => ({
...candle,
date: formatDate(candle.time),
price: Number(candle.close),
})) ?? [];
const search = parameters.size > 0 ? `?${parameters.toString()}` : "";
return {
averageLine:
null,
bond: bond.data,
bondState: section(bond, uid ? sync.retry : () => bond.refetch()),
candles: candles.data,
@@ -100,7 +91,6 @@ function useBondPageVm() {
bond.data?.slug && bond.data.slug !== bondId
? `/bonds/${encodeURIComponent(bond.data.slug)}${search}`
: null,
chartData,
code: apiErrorCode(bond.error),
coupons: coupons.data,
couponsState: section(coupons, sync.retry),
@@ -119,8 +109,6 @@ function useBondPageVm() {
?? null,
})) ?? [],
filter,
hasIncompleteCandle:
candles.data?.candles.some(candle => !candle.isComplete) ?? false,
hasPrevious: history.hasPrevious,
logoSrc: instrumentLogoUrl(bond.data?.logoName),
metrics: metrics.data,
@@ -143,7 +131,6 @@ function useBondPageVm() {
period,
position: position.data,
positionState: section(position, sync.retry),
priceRows: chartData.toReversed(),
quote: quote.data,
quoteState: section(quote, sync.retry),
refresh: sync.refresh,
src/pages/stock/ui/StockPage/StockPage.test.tsx
+15 -3
View File
@@ -1,6 +1,6 @@
import { MantineProvider } from "@mantine/core";
import { QueryClientProvider } from "@tanstack/react-query";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
import { http, HttpResponse } from "msw";
import { MemoryRouter, Route, Routes, useLocation } from "react-router";
import { describe, expect, it, vi } from "vitest";
@@ -78,6 +78,7 @@ const quote = {
function setup(
options: {
ambiguousTicker?: boolean;
candles?: NonNullable<StockPageVm["candles"]>["candles"];
cursorError?: string;
failCompany?: boolean;
failStock?: boolean;
@@ -124,7 +125,7 @@ function setup(
resource(
{
candles: [],
candles: options.candles ?? [],
currency: "RUB",
historyFrom: null,
observedAt: quote.observedAt,
@@ -352,7 +353,10 @@ describe("stock page", () => {
).toBe(false);
});
it("opens by UID, displays server calculations and distinguishes company and personal dividends", async () => {
setup();
setup({ candles: [
{ close: "300.125", isComplete: true, time: "2026-09-09T00:00:00Z" },
{ close: "301.123456789", isComplete: false, time: "2026-09-10T00:00:00Z" },
] });
expect(
await screen.findByRole("heading", { name: "Тестовая акция" }),
).toBeVisible();
@@ -376,6 +380,14 @@ describe("stock page", () => {
screen.getByRole("button", { name: "История дивидендов компании" }),
);
await waitFor(() => expect(screen.getByText("13.10.2025")).toBeVisible());
expect(screen.getByText("Текущая средняя покупка: 200 ₽")).toBeVisible();
fireEvent.click(screen.getByRole("button", { name: /Цены в таблице/ }));
const rows = within(await screen.findByRole("table")).getAllByRole("row");
expect(rows[1]).toHaveTextContent("10.09.2026");
expect(rows[1]).toHaveTextContent("301,123456789 ₽");
expect(rows[1]).toHaveTextContent("Формируется");
expect(rows[2]).toHaveTextContent("09.09.2026");
await waitFor(() => expect(screen.getByText("300,125 ₽")).toBeVisible());
});
it("keeps sold-position history and market content when company data fails", async () => {
setup({ failCompany: true, noPosition: true });
src/pages/stock/ui/StockPage/StockPage.vm.ts
+1 -23
View File
@@ -17,7 +17,7 @@ import {
} from "@/features/instrument-details";
import { useScreenSync } from "@/features/tbank-connection";
import { apiErrorCode } from "@/shared/api";
import { formatDate, instrumentLogoUrl } from "@/shared/lib";
import { instrumentLogoUrl } from "@/shared/lib";
const periods: StockPeriod[] = ["month", "halfYear", "year", "all"];
const filters = ["all", "trades", "dividends", "other"] as const;
@@ -80,35 +80,16 @@ function useStockPageVm() {
setParameters(next, { replace: true });
};
const chartData
= candles.data?.candles.map(candle => ({
...candle,
date: formatDate(candle.time),
price: Number(candle.close),
})) ?? [];
const average = position.data?.averagePurchasePrice;
const averageLine
= average && average.currency === candles.data?.currency
? Number(average.value)
: null;
const companyData = company.data;
const search = parameters.size > 0 ? `?${parameters.toString()}` : "";
return {
averageLine:
averageLine !== null && Number.isFinite(averageLine)
? averageLine
: null,
candles: candles.data,
candlesState: section(candles, sync.retry),
canonicalTo:
stock.data?.slug && stock.data.slug !== stockId
? `/stocks/${encodeURIComponent(stock.data.slug)}${search}`
: null,
chartData,
code: apiErrorCode(stock.error),
company: companyData,
companyState: section(company, sync.retry),
@@ -129,8 +110,6 @@ function useStockPageVm() {
?? null,
})) ?? [],
filter,
hasIncompleteCandle:
candles.data?.candles.some(candle => !candle.isComplete) ?? false,
hasPrevious: history.hasPrevious,
logoSrc: instrumentLogoUrl(stock.data?.logoName),
onNext: history.onNext,
@@ -151,7 +130,6 @@ function useStockPageVm() {
period,
position: position.data,
positionState: section(position, sync.retry),
priceRows: chartData.toReversed(),
quote: quote.data,
quoteState: section(quote, sync.retry),
refresh: sync.refresh,