refactor: enforce frontend view model boundaries

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageEmpty.view.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 const AccountEventsPageEmpty: FC = () => {
 	const { t } = useTranslation();
+
 	return (
 		<StateView text={t("events.emptyText")} title={t("events.emptyTitle")} />
 	);

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx

@@ -8,11 +8,13 @@ type AccountEventsPageErrorProps = { onReset: () => void; retry: () => void };
 
 const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
 	const { t } = useTranslation();
+
 	return (
 		<StateView
 			action={(
 				<Group>
 					<Button onClick={props.retry}>{t("events.retry")}</Button>
+
 					<Button onClick={props.onReset} variant="default">
 						{t("ledger.reset")}
 					</Button>

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx

@@ -10,7 +10,6 @@ import {
 	Title,
 } from "@mantine/core";
 import { DatePickerInput } from "@mantine/dates";
-import { useTranslation } from "react-i18next";
 
 import { BrokerageEventCard } from "@/entities/brokerage-event";
 import { formatSnapshotTime } from "@/shared/lib";
@@ -18,82 +17,94 @@ import { formatSnapshotTime } from "@/shared/lib";
 import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
 
 import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view";
+import { useAccountEventsPageLoadedVm } from "./AccountEventsPageLoaded.vm";
 
 type AccountEventsPageLoadedProps = Extract<
 	AccountEventsPageViewModel,
 	{ state: "loaded" }
 >;
 
-const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
-	const { t } = useTranslation();
-	function renderEvents() {
-		if (props.events.length > 0) {
-			return (
-				<Stack gap="sm">
-					{props.events.map(event => (
-						<BrokerageEventCard
-							event={event}
-							key={JSON.stringify([
-								event.account?.id,
-								event.type,
-								event.date,
-								event.instrumentUid,
-								event.figi,
-								event.ticker,
-								event.logoName,
-							])}
-						/>
-					))}
-				</Stack>
-			);
-		}
-		if (props.partial) {
-			return;
-		}
-		return <AccountEventsPageEmpty />;
+const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
+	props,
+) => {
+	if (props.events.length > 0) {
+		return (
+			<Stack gap="sm">
+				{props.events.map(event => (
+					<BrokerageEventCard
+						event={event}
+						key={JSON.stringify([
+							event.account?.id,
+							event.type,
+							event.date,
+							event.instrumentUid,
+							event.figi,
+							event.ticker,
+							event.logoName,
+						])}
+					/>
+				))}
+			</Stack>
+		);
 	}
+
+	if (props.partial) {
+		return;
+	}
+
+	return <AccountEventsPageEmpty />;
+};
+
+const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
+	const { onPeriodChange, t } = useAccountEventsPageLoadedVm(props);
+
 	return (
 		<Stack gap="lg">
-			{!!(props.lastSuccessfulAt) && ((
+			{!!props.lastSuccessfulAt && (
 				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.lastSuccessfulAt),
 					})}
 				</Text>
-			))}
+			)}
+
 			<Title order={1}>{t("events.title")}</Title>
+
 			<Button disabled={props.refreshing} onClick={props.retry} w="fit-content">
 				{t("investment.refresh")}
 			</Button>
-			{!!(props.partial) && ((
+
+			{!!props.partial && (
 				<Alert role="status">{t("investment.partial")}</Alert>
-			))}
-			{!!(props.refreshing) && ((
+			)}
+
+			{!!props.refreshing && (
 				<Progress animated aria-label={t("accounts.refreshing")} value={100} />
-			))}
-			{!!(props.refreshError) && ((
+			)}
+
+			{!!props.refreshError && (
 				<Alert aria-live="polite" color="yellow" role="status">
 					{t(
 						props.sourceError
 							? "investment.syncFailed"
 							: "accounts.refreshError",
 					)}
+
 					<Button onClick={props.retry} variant="subtle">
 						{t("accounts.retry")}
 					</Button>
 				</Alert>
-			))}
+			)}
+
 			<Text c="dimmed">{t("events.hint")}</Text>
+
 			<Group align="end">
 				<DatePickerInput
 					allowSingleDateInRange
 					clearable
 					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 					label={t("ledger.period")}
-					onChange={([from, to]) => {
-						props.onDraftFromChange(from);
-						props.onDraftToChange(to);
-					}}
+					onChange={onPeriodChange}
 					popoverProps={{
 						middlewares: { shift: { crossAxis: true } },
 						returnFocus: true,
@@ -103,15 +114,18 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
 					valueFormat="DD.MM.YYYY"
 				/>
 			</Group>
+
 			<Group>
 				<Button disabled={!props.canApply} onClick={props.onApply}>
 					{t("ledger.apply")}
 				</Button>
+
 				<Button onClick={props.onReset} variant="default">
 					{t("ledger.reset")}
 				</Button>
 			</Group>
-			{renderEvents()}
+
+			<AccountEventsPageLoadedEvents {...props} />
 		</Stack>
 	);
 };

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.vm.ts

@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+
+import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
+
+type AccountEventsPageLoadedProps = Extract<
+	AccountEventsPageViewModel,
+	{ state: "loaded" }
+>;
+
+function useAccountEventsPageLoadedVm(props: AccountEventsPageLoadedProps) {
+	const { t } = useTranslation();
+
+	const onPeriodChange: (value: [null | string, null | string]) => void = ([
+		from,
+		to,
+	]) => {
+		props.onDraftFromChange(from);
+		props.onDraftToChange(to);
+	};
+
+	return { onPeriodChange, t };
+}
+
+export { useAccountEventsPageLoadedVm };

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoading.view.tsx

@@ -8,18 +8,25 @@ const skeletonRowIds = ["first", "second", "third", "fourth"];
 
 const AccountEventsPageLoading: FC = () => {
 	const { t } = useTranslation();
+
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="40%" />
+
 			<Skeleton height={18} width="70%" />
+
 			<Group>
 				<Skeleton height={60} width={220} />
+
 				<Skeleton height={60} width={220} />
 			</Group>
+
 			<Group>
 				<Skeleton height={36} width={116} />
+
 				<Skeleton height={36} width={108} />
 			</Group>
+
 			{skeletonRowIds.map(id => (
 				<Skeleton height={82} key={id} radius="md" />
 			))}