refactor: clarify frontend module ownership

src/pages/account/model/previews.ts

@@ -0,0 +1,144 @@
+import type { BrokerageOperation } from "@/entities/broker-operation";
+import type {
+	BrokerageEvent,
+	BrokerageEventsPreviewState,
+} from "@/entities/brokerage-event";
+import type { IncomeSummary } from "@/entities/income";
+import type { InvestmentResourceMeta } from "@/shared/api";
+
+const RECENT_EVENTS_LIMIT = 5;
+
+type AccountPageIncomeSummary
+	= | {
+		lastSuccessfulAt?: null | string;
+		refreshError?: boolean;
+		stale?: boolean;
+		state: "loaded";
+		summary: IncomeSummary;
+		to: string;
+	}
+	| { retry: () => Promise<unknown> | undefined; state: "error"; to: string }
+	| {
+		state: "empty"
+			| "loading"
+			| "partial";
+		to: string;
+	};
+
+type AccountPageRecentEvents = BrokerageEventsPreviewState;
+
+type AccountPageRecentOperations
+	= | {
+		items: BrokerageOperation[];
+		lastSuccessfulAt?: null | string;
+		refreshError?: boolean;
+		stale?: boolean;
+		state: "loaded" | "partial";
+		to: string;
+	}
+	| {
+		state: "empty"
+			| "error"
+			| "loading";
+		to: string;
+	};
+
+type PreviewResource<T> = {
+	data?: T;
+	isError: boolean;
+	meta?: Pick<InvestmentResourceMeta,
+	"availability"
+	| "freshness"
+	| "lastSuccessfulAt"
+	| "sync"
+	>;
+};
+
+function toIncomeSummary(
+	accountId: string | undefined,
+	income: PreviewResource<IncomeSummary>,
+	retry: () => Promise<unknown>,
+): AccountPageIncomeSummary {
+	const to = `/accounts/${accountId}/income`;
+	if (!income.data && !income.isError && income.meta?.sync.state !== "failed")
+		return { state: "loading", to };
+	if (income.meta?.availability === "partial") return { state: "partial", to };
+	if (!income.data && (income.isError || income.meta?.sync.state === "failed"))
+		return { retry, state: "error", to };
+	if (!income.data?.totalsByCurrency.length) return { state: "empty", to };
+
+	return {
+		lastSuccessfulAt: income.meta?.lastSuccessfulAt,
+		refreshError: income.isError || income.meta?.sync.state === "failed",
+		stale: income.meta?.freshness === "stale",
+		state: "loaded",
+		summary: income.data,
+		to,
+	};
+}
+
+function toRecentEvents(
+	accountId: string | undefined,
+	events: PreviewResource<{ events: BrokerageEvent[] }>,
+): AccountPageRecentEvents {
+	const to = `/accounts/${accountId}/events`;
+	if (!events.data && !events.isError && events.meta?.sync.state !== "failed")
+		return { state: "loading", to };
+	if (events.meta?.availability === "partial")
+		return {
+			items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
+			state: "partial",
+			to,
+		};
+	if (!events.data && (events.isError || events.meta?.sync.state === "failed"))
+		return { state: "error", to };
+	const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [];
+	if (items.length === 0) return { state: "empty", to };
+
+	return {
+		items,
+		lastSuccessfulAt: events.meta?.lastSuccessfulAt,
+		refreshError: events.isError || events.meta?.sync.state === "failed",
+		stale: events.meta?.freshness === "stale",
+		state: "loaded",
+		to,
+	};
+}
+
+function toRecentOperations(
+	accountId: string | undefined,
+	operations: PreviewResource<{ items: BrokerageOperation[] }>,
+): AccountPageRecentOperations {
+	const to = `/accounts/${accountId}/operations`;
+	if (
+		!operations.data
+		&& !operations.isError
+		&& operations.meta?.sync.state !== "failed"
+	)
+		return { state: "loading", to };
+	if (operations.meta?.availability === "partial")
+		return { items: operations.data?.items ?? [], state: "partial", to };
+	if (
+		!operations.data
+		&& (operations.isError || operations.meta?.sync.state === "failed")
+	)
+		return { state: "error", to };
+	if (!operations.data?.items.length) return { state: "empty", to };
+
+	return {
+		items: operations.data.items,
+		lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
+		refreshError:
+			operations.isError || operations.meta?.sync.state === "failed",
+		stale: operations.meta?.freshness === "stale",
+		state: "loaded",
+		to,
+	};
+}
+
+export { toIncomeSummary, toRecentEvents, toRecentOperations };
+export type {
+	AccountPageIncomeSummary,
+	AccountPageRecentEvents,
+	AccountPageRecentOperations,
+};

src/pages/account/ui/AccountPage/AccountPage.test.tsx

@@ -22,7 +22,7 @@ import { server } from "@/test/server";
 import type {
 	AccountPageRecentEvents,
 	AccountPageRecentOperations,
-} from "./AccountPage.vm";
+} from "../../model/previews";
 
 import { toAccountPagePositionSections } from "../../model/positions";
 import { AccountPage } from "./AccountPage";

src/pages/account/ui/AccountPage/AccountPage.vm.ts

@@ -1,6 +1,5 @@
 import { useParams } from "react-router";
 
-import type { BrokerageOperation } from "@/entities/broker-operation";
 import type { Portfolio } from "@/entities/portfolio";
 
 import { useBrokerageOperations } from "@/entities/broker-operation";
@@ -9,17 +8,25 @@ import {
 	useBrokerageAccounts,
 } from "@/entities/brokerage-account";
 import {
-	type BrokerageEventsPreviewState,
 	useBrokerageEvents,
 } from "@/entities/brokerage-event";
-import { type IncomeSummary, useIncomeSummary } from "@/entities/income";
+import { useIncomeSummary } from "@/entities/income";
 import { usePortfolio } from "@/entities/portfolio";
 import { useScreenSync } from "@/features/tbank-connection";
 import { apiErrorCode } from "@/shared/api";
 
-import { type AccountPagePositionSection, toAccountPagePositionSections } from "../../model/positions";
-
-const RECENT_EVENTS_LIMIT = 5;
+import {
+	type AccountPagePositionSection,
+	toAccountPagePositionSections,
+} from "../../model/positions";
+import {
+	type AccountPageIncomeSummary,
+	type AccountPageRecentEvents,
+	type AccountPageRecentOperations,
+	toIncomeSummary,
+	toRecentEvents,
+	toRecentOperations,
+} from "../../model/previews";
 
 type AccountPageContent = {
 	account?: BrokerageAccount;
@@ -38,131 +45,18 @@ type AccountPageEmptyViewModel = AccountPageContent & {
 	state: "empty";
 };
 
-type AccountPageIncomeSummary
-	= | {
-		lastSuccessfulAt?: null | string;
-		refreshError?: boolean;
-		stale?: boolean;
-		state: "loaded";
-		summary: IncomeSummary;
-		to: string;
-	}
-	| { retry: () => Promise<unknown> | undefined; state: "error"; to: string }
-	| { state: "empty"
-		| "loading"
-		| "partial"; to: string; };
-
 type AccountPageLoadedViewModel = AccountPageContent & {
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
 	state: "loaded";
 };
 
-type AccountPageRecentEvents = BrokerageEventsPreviewState;
-
-type AccountPageRecentOperations
-	= | {
-		items: BrokerageOperation[];
-		lastSuccessfulAt?: null | string;
-		refreshError?: boolean;
-		stale?: boolean;
-		state: "loaded" | "partial";
-		to: string;
-	}
-	| {
-		state: "empty"
-			| "error"
-			| "loading";
-		to: string;
-	};
-
 type AccountPageViewModel
 	= | AccountPageEmptyViewModel
 		| AccountPageLoadedViewModel
 		| { code?: string; retry: () => Promise<unknown> | undefined; state: "error" }
 		| { state: "loading" };
 
-function toIncomeSummary(
-	accountId: string | undefined,
-	income: ReturnType<typeof useIncomeSummary>,
-): AccountPageIncomeSummary {
-	const to = `/accounts/${accountId}/income`;
-	if (!income.data && !income.isError && income.meta?.sync.state !== "failed")
-		return { state: "loading", to };
-	if (income.meta?.availability === "partial") return { state: "partial", to };
-	if (!income.data && (income.isError || income.meta?.sync.state === "failed"))
-		return { retry: () => income.refetch(), state: "error", to };
-	if (!income.data?.totalsByCurrency.length) return { state: "empty", to };
-
-	return {
-		lastSuccessfulAt: income.meta?.lastSuccessfulAt,
-		refreshError: income.isError || income.meta?.sync.state === "failed",
-		stale: income.meta?.freshness === "stale",
-		state: "loaded",
-		summary: income.data,
-		to,
-	};
-}
-
-function toRecentEvents(
-	accountId: string | undefined,
-	events: ReturnType<typeof useBrokerageEvents>,
-): AccountPageRecentEvents {
-	const to = `/accounts/${accountId}/events`;
-	if (!events.data && !events.isError && events.meta?.sync.state !== "failed")
-		return { state: "loading", to };
-	if (events.meta?.availability === "partial")
-		return {
-			items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
-			state: "partial",
-			to,
-		};
-	if (!events.data && (events.isError || events.meta?.sync.state === "failed"))
-		return { state: "error", to };
-	const items = events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [];
-	if (items.length === 0) return { state: "empty", to };
-
-	return {
-		items,
-		lastSuccessfulAt: events.meta?.lastSuccessfulAt,
-		refreshError: events.isError || events.meta?.sync.state === "failed",
-		stale: events.meta?.freshness === "stale",
-		state: "loaded",
-		to,
-	};
-}
-
-function toRecentOperations(
-	accountId: string | undefined,
-	operations: ReturnType<typeof useBrokerageOperations>,
-): AccountPageRecentOperations {
-	const to = `/accounts/${accountId}/operations`;
-	if (
-		!operations.data
-		&& !operations.isError
-		&& operations.meta?.sync.state !== "failed"
-	)
-		return { state: "loading", to };
-	if (operations.meta?.availability === "partial")
-		return { items: operations.data?.items ?? [], state: "partial", to };
-	if (
-		!operations.data
-		&& (operations.isError || operations.meta?.sync.state === "failed")
-	)
-		return { state: "error", to };
-	if (!operations.data?.items.length) return { state: "empty", to };
-
-	return {
-		items: operations.data.items,
-		lastSuccessfulAt: operations.meta?.lastSuccessfulAt,
-		refreshError:
-			operations.isError || operations.meta?.sync.state === "failed",
-		stale: operations.meta?.freshness === "stale",
-		state: "loaded",
-		to,
-	};
-}
-
 function useAccountPageViewModel(): AccountPageViewModel {
 	const { accountId } = useParams();
 	const portfolio = usePortfolio(accountId);
@@ -197,7 +91,10 @@ function useAccountPageViewModel(): AccountPageViewModel {
 	const account = accounts.data?.find(item => item.id === accountId);
 	const recentOperations = toRecentOperations(accountId, operations);
 	const recentEvents = toRecentEvents(accountId, events);
-	const incomeSummary = toIncomeSummary(accountId, income);
+
+	const incomeSummary = toIncomeSummary(
+		accountId, income, () => income.refetch(),
+	);
 
 	const refresh = {
 		partial: portfolio.meta?.availability === "partial",
@@ -235,9 +132,4 @@ function useAccountPageViewModel(): AccountPageViewModel {
 	};
 }
 
-export {
-	type AccountPageIncomeSummary,
-	type AccountPageRecentEvents,
-	type AccountPageRecentOperations,
-	useAccountPageViewModel,
-};
+export { useAccountPageViewModel };

src/pages/account/ui/AccountPage/components/AccountPageEmpty.view.tsx

@@ -7,16 +7,16 @@ import { useTranslation } from "react-i18next";
 import type { BrokerageAccount } from "@/entities/brokerage-account";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
+import { InvestmentRefreshState } from "@/features/tbank-connection";
 
 import type {
 	AccountPageIncomeSummary,
 	AccountPageRecentEvents,
 	AccountPageRecentOperations,
-} from "../AccountPage.vm";
+} from "../../../model/previews";
 
 import { AccountHeading } from "./AccountHeading.view";
 import { IncomeSummary } from "./IncomeSummary.view";
-import { PortfolioRefreshState } from "./PortfolioRefreshState/PortfolioRefreshState.view";
 import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
 import { RecentOperations } from "./RecentOperations.view";
 
@@ -45,7 +45,8 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
 		<Stack>
 			<AccountHeading account={props.account} accountId={props.accountId} />
 
-			<PortfolioRefreshState
+			<InvestmentRefreshState
+				labelScope="portfolio"
 				refreshError={props.refreshError ?? false}
 				refreshing={props.refreshing ?? false}
 				retry={props.retry}

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -7,16 +7,20 @@ import type { BrokerageAccount } from "@/entities/brokerage-account";
 import type { Portfolio } from "@/entities/portfolio";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
+import { InvestmentRefreshState } from "@/features/tbank-connection";
 import { formatSnapshotTime } from "@/shared/lib";
 
 import type { AccountPagePositionSection } from "../../../model/positions";
-import type { AccountPageIncomeSummary, AccountPageRecentEvents, AccountPageRecentOperations } from "../AccountPage.vm";
+import type {
+	AccountPageIncomeSummary,
+	AccountPageRecentEvents,
+	AccountPageRecentOperations,
+} from "../../../model/previews";
 
 import classes from "../AccountPage.module.css";
 import { AccountHeading } from "./AccountHeading.view";
 import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
 import { IncomeSummary } from "./IncomeSummary.view";
-import { PortfolioRefreshState } from "./PortfolioRefreshState/PortfolioRefreshState.view";
 import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
 import { PositionSection } from "./PositionSection.view";
 import { RecentOperations } from "./RecentOperations.view";
@@ -51,7 +55,8 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 		<Stack gap="lg">
 			<AccountHeading account={props.account} accountId={props.accountId} />
 
-			<PortfolioRefreshState
+			<InvestmentRefreshState
+				labelScope="portfolio"
 				refreshError={props.refreshError ?? false}
 				refreshing={props.refreshing ?? false}
 				retry={props.retry}

src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.stories.tsx

@@ -1,58 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Stack } from "@mantine/core";
-import { fn } from "storybook/test";
-
-import { CurrencyCards } from "../CurrencyCards/CurrencyCards.view";
-import { PortfolioRefreshState } from "./PortfolioRefreshState.view";
-
-const meta = {
-	args: { refreshError: false, refreshing: false, retry: fn() },
-	argTypes: {
-		refreshError: { control: "boolean" },
-		refreshing: { control: "boolean" },
-		retry: { control: false },
-	},
-	component: PortfolioRefreshState,
-	parameters: {
-		docs: {
-			description: {
-				component:
-					"Обновление уже показанных данных портфеля. Реальные CurrencyCards остаются видимыми вместе с PortfolioRefreshState при refetch и его ошибке. Суммы синтетические; это presentation Client Cached Snapshot, без QueryClient и запроса API. Retry регистрирует локальное действие в Actions и не доказывает восстановление API.",
-			},
-		},
-	},
-	render: arguments_ => (
-		<Stack>
-			<CurrencyCards
-				amounts={[
-					{ currency: "RUB", value: "125000.50" },
-					{ currency: "USD", value: "320" },
-				]}
-			/>
-
-			<PortfolioRefreshState {...arguments_} />
-		</Stack>
-	),
-	tags: ["autodocs"],
-	title: "Product/PortfolioRefreshState",
-} satisfies Meta<typeof PortfolioRefreshState>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Idle: Story = { name: "Сохранённые данные" };
-export const Refreshing: Story = {
-	args: { refreshing: true },
-	name: "Фоновое обновление",
-};
-export const RefreshError: Story = {
-	args: { refreshError: true },
-	name: "Ошибка обновления с retry",
-};
-
-export const SourceFailure: Story = {
-	args: { refreshError: true, sourceError: true },
-	name: "Ошибка синхронизации сохраняет суммы",
-};

src/pages/account/ui/AccountPage/components/PortfolioRefreshState/PortfolioRefreshState.view.tsx

@@ -1,55 +0,0 @@
-import type { FC } from "react";
-
-import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-
-type PortfolioRefreshStateProps = {
-	refreshError: boolean;
-	refreshing: boolean;
-	retry?: () => void;
-	sourceError?: boolean;
-};
-
-const PortfolioRefreshState: FC<PortfolioRefreshStateProps> = (props) => {
-	const { refreshError, refreshing, retry } = props;
-	const { t } = useTranslation();
-
-	return (
-		<>
-			<Button
-				disabled={refreshing}
-				onClick={retry}
-				variant="light"
-				w="fit-content"
-			>
-				{t(refreshError ? "accounts.retry" : "investment.refresh")}
-			</Button>
-
-			{!!refreshing && (
-				<Group aria-label={t("portfolio.refreshing")} gap="xs" role="status">
-					<Loader size="sm" />
-
-					<Text c="dimmed" size="sm">
-						{t("portfolio.refreshing")}
-					</Text>
-				</Group>
-			)}
-
-			{!!refreshError && (
-				<Alert aria-live="polite" color="orange" role="status">
-					<Stack gap="sm">
-						<Text>
-							{t(
-								props.sourceError
-									? "investment.syncFailed"
-									: "portfolio.refreshError",
-							)}
-						</Text>
-					</Stack>
-				</Alert>
-			)}
-		</>
-	);
-};
-
-export { PortfolioRefreshState };

src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx

@@ -8,7 +8,7 @@ import { Link } from "react-router";
 import { LedgerEntryRow } from "@/entities/broker-operation";
 import { formatSnapshotTime } from "@/shared/lib";
 
-import type { AccountPageRecentOperations } from "../AccountPage.vm";
+import type { AccountPageRecentOperations } from "../../../model/previews";
 
 type RecentOperationsProps = {
 	operations: AccountPageRecentOperations;