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,153 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useParams, useSearchParams } from "react-router";
+import {
+	brokerageOperationsQueryOptions,
+	type OperationCategory,
+	useBrokerageOperations,
+} from "@/entities/broker-operation";
+import {
+	type StockPeriod,
+	useStock,
+	useStockCandles,
+	useStockCompany,
+	useStockDividends,
+	useStockPosition,
+	useStockQuote,
+} from "@/entities/stock";
+import { section } from "@/features/instrument-details";
+import { apiErrorCode } from "@/shared/api";
+import { formatDate, instrumentLogoUrl } from "@/shared/lib";
+
+const periods: StockPeriod[] = ["month", "halfYear", "year", "all"];
+const filters = ["all", "trades", "dividends", "other"] as const;
+type StockEventFilter = (typeof filters)[number];
+const categories: Record<StockEventFilter, OperationCategory[]> = {
+	all: [],
+	trades: ["trade"],
+	dividends: ["income"],
+	other: ["tax", "fee", "transfer", "other"],
+};
+function useStockPageVm() {
+	const { stockId = "" } = useParams();
+	const stock = useStock(stockId);
+	const uid = stock.data?.instrumentUid ?? "";
+	const [params, setParams] = useSearchParams();
+	const period =
+		periods.find((value) => value === params.get("period")) ?? "month";
+	const filter =
+		filters.find((value) => value === params.get("events")) ?? "all";
+	const scope = `${uid}:${filter}`;
+	const [pagination, setPagination] = useState<{
+		scope: string;
+		cursors: string[];
+	}>({ scope, cursors: [] });
+	const cursors = pagination.scope === scope ? pagination.cursors : [];
+	const client = useQueryClient();
+	const quote = useStockQuote(uid);
+	const candles = useStockCandles(uid, period);
+	const position = useStockPosition(uid);
+	const company = useStockCompany(uid);
+	const dividends = useStockDividends(uid);
+	const firstPage = {
+		instrumentUid: uid,
+		categories: categories[filter],
+		limit: 20,
+	};
+	const operations = useBrokerageOperations(uid ? "all" : undefined, {
+		...firstPage,
+		cursor: cursors.at(-1),
+	});
+	const setParam = (key: string, value: string) => {
+		const next = new URLSearchParams(params);
+		next.set(key, value);
+		setParams(next, { replace: true });
+	};
+	const retryOperations = () => {
+		if (apiErrorCode(operations.error) === "INVALID_OPERATIONS_CURSOR") {
+			setPagination({ scope, cursors: [] });
+			void client.invalidateQueries({
+				queryKey: brokerageOperationsQueryOptions("all", firstPage).queryKey,
+				exact: true,
+			});
+		} else void operations.refetch();
+	};
+	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;
+	return {
+		canonicalTo:
+			stock.data?.slug && stock.data.slug !== stockId
+				? `/stocks/${encodeURIComponent(stock.data.slug)}${params.size ? `?${params.toString()}` : ""}`
+				: null,
+		stock: stock.data,
+		stockState: section(stock),
+		code: apiErrorCode(stock.error),
+		logoSrc: instrumentLogoUrl(stock.data?.logoName),
+		quote: quote.data,
+		quoteState: section(quote),
+		candles: candles.data,
+		chartData,
+		priceRows: chartData.toReversed(),
+		candlesState: section(candles),
+		period,
+		setPeriod: (value: string) => setParam("period", value),
+		averageLine:
+			averageLine !== null && Number.isFinite(averageLine) ? averageLine : null,
+		hasIncompleteCandle:
+			candles.data?.candles.some((candle) => !candle.isComplete) ?? false,
+		position: position.data,
+		positionState: section(position),
+		company: companyData,
+		companyState: section(company),
+		dividends: dividends.data,
+		dividendsState: section(dividends),
+		upcoming:
+			dividends.data?.dividends
+				.filter((event) => event.timing === "upcoming")
+				.sort((a, b) =>
+					(a.recordDate ?? a.paymentDate ?? "").localeCompare(
+						b.recordDate ?? b.paymentDate ?? "",
+					),
+				) ?? [],
+		pastDividends:
+			dividends.data?.dividends
+				.filter((event) => event.timing !== "upcoming")
+				.sort((a, b) =>
+					(b.recordDate ?? b.paymentDate ?? "").localeCompare(
+						a.recordDate ?? a.paymentDate ?? "",
+					),
+				) ?? [],
+		operations: operations.data,
+		operationsState: { ...section(operations), retry: retryOperations },
+		eventRows:
+			operations.data?.items.map((item) => ({
+				...item,
+				ticker: item.ticker ?? stock.data?.ticker ?? null,
+				logoName: item.logoName ?? stock.data?.logoName ?? null,
+			})) ?? [],
+		filter,
+		setFilter: (value: string) => setParam("events", value),
+		hasPrevious: cursors.length > 0,
+		onPrevious: () => setPagination({ scope, cursors: cursors.slice(0, -1) }),
+		onNext: () => {
+			if (operations.data?.nextCursor)
+				setPagination({
+					scope,
+					cursors: [...cursors, operations.data.nextCursor],
+				});
+		},
+	};
+}
+type StockPageVm = ReturnType<typeof useStockPageVm>;
+
+export { type StockPageVm, useStockPageVm };