refactor: enforce frontend view model boundaries

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx

@@ -22,6 +22,7 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
 			action={(
 				<Group>
 					<Button onClick={retry}>{t("ledger.retry")}</Button>
+
 					<Button onClick={props.onReset} variant="default">
 						{t("ledger.reset")}
 					</Button>

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { FC } from "react";
 
 import {
 	Alert,
@@ -14,120 +14,114 @@ import { DatePickerInput } from "@mantine/dates";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-import {
-	LedgerEntryRow,
-	operationCategories,
-	type OperationCategory,
-} from "@/entities/broker-operation";
+import { LedgerEntryRow } from "@/entities/broker-operation";
 import { formatSnapshotTime } from "@/shared/lib";
 
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
+import { useAccountOperationsPageLoadedVm } from "./AccountOperationsPageLoaded.vm";
+
 type AccountOperationsPageLoadedProps = Extract<
 	AccountOperationsPageViewModel,
 	{ state: "loaded" }
 >;
 
-const operationCategorySet = new Set<string>(operationCategories);
+const AccountOperationsPageLoadedOperations: FC<
+	AccountOperationsPageLoadedProps
+> = (props) => { // eslint-disable-line sonarjs/function-return-type -- React renders elements and lists.
+	const { t } = useTranslation();
 
-function fromMultiSelectValue(value: string[]) {
-	return value.filter((item): item is OperationCategory =>
-		operationCategorySet.has(item),
+	const { items } = props;
+
+	if (items.length > 0) {
+		return items.map(operation => (
+			<LedgerEntryRow
+				key={JSON.stringify([
+					operation.account?.id,
+					operation.id,
+					operation.logoName,
+				])}
+				operation={operation}
+			/>
+		));
+	}
+
+	if (props.partial) {
+		return;
+	}
+
+	return (
+		<StateView text={t("ledger.emptyText")} title={t("ledger.emptyTitle")} />
 	);
-}
+};
 
 const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	props,
 ) => {
 	const {
 		canApply,
+		categoryData,
 		draftCategories,
 		draftFrom,
 		draftTo,
 		hasNext,
 		hasPrevious,
-		items,
 		onApply,
-		onDraftCategoriesChange,
-		onDraftFromChange,
-		onDraftToChange,
+		onCategoriesChange,
 		onNext,
+		onPeriodChange,
 		onPrevious,
 		onReset,
-	} = props;
-	const { t } = useTranslation();
+		t,
+	} = useAccountOperationsPageLoadedVm(props);
 
-	const categoryData = operationCategories.map(category => ({
-		label: t(`ledger.category.${category}`),
-		value: category,
-	}));
-
-	// eslint-disable-next-line sonarjs/function-return-type -- ReactNode deliberately includes lists, elements and empty output.
-	function renderOperations(): ReactNode {
-		if (items.length > 0) {
-			return items.map(operation => (
-				<LedgerEntryRow
-					key={JSON.stringify([
-						operation.account?.id,
-						operation.id,
-						operation.logoName,
-					])}
-					operation={operation}
-				/>
-			));
-		}
-		if (props.partial) {
-			return;
-		}
-		return (
-			<StateView
-				text={t("ledger.emptyText")}
-				title={t("ledger.emptyTitle")}
-			/>
-		);
-	}
 	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("ledger.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.historyLoading) && (<Alert>{t("investment.history")}</Alert>)}
-			{!!(props.refreshing) && ((
+			)}
+
+			{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}
+
+			{!!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>
-			))}
+			)}
+
 			<Group align="end">
 				<DatePickerInput
 					allowSingleDateInRange
 					clearable
 					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 					label={t("ledger.period")}
-					onChange={([from, to]) => {
-						onDraftFromChange(from);
-						onDraftToChange(to);
-					}}
+					onChange={onPeriodChange}
 					popoverProps={{
 						middlewares: { shift: { crossAxis: true } },
 						returnFocus: true,
@@ -137,35 +131,40 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 					valueFormat="DD.MM.YYYY"
 				/>
 			</Group>
+
 			<MultiSelect
 				clearable
 				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 				data={categoryData}
 				label={t("ledger.categories")}
-				onChange={value =>
-					onDraftCategoriesChange(fromMultiSelectValue(value))}
+				onChange={onCategoriesChange}
 				placeholder={t("ledger.categoriesPlaceholder")}
 				value={draftCategories}
 			/>
+
 			<Group>
 				<Button disabled={!canApply} onClick={onApply}>
 					{t("ledger.apply")}
 				</Button>
+
 				<Button onClick={onReset} variant="default">
 					{t("ledger.reset")}
 				</Button>
 			</Group>
-			{renderOperations()}
-			{!!(hasNext || hasPrevious) && ((
+
+			<AccountOperationsPageLoadedOperations {...props} />
+
+			{!!(hasNext || hasPrevious) && (
 				<Group justify="space-between">
 					<Button disabled={!hasPrevious} onClick={onPrevious}>
 						{t("ledger.previous")}
 					</Button>
+
 					<Button disabled={!hasNext} onClick={onNext}>
 						{t("ledger.next")}
 					</Button>
 				</Group>
-			))}
+			)}
 		</Stack>
 	);
 };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.vm.ts

@@ -0,0 +1,78 @@
+import { useTranslation } from "react-i18next";
+
+import {
+	operationCategories,
+	type OperationCategory,
+} from "@/entities/broker-operation";
+
+import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
+
+type AccountOperationsPageLoadedProps = Extract<
+	AccountOperationsPageViewModel,
+	{ state: "loaded" }
+>;
+
+const operationCategorySet = new Set<string>(operationCategories);
+
+function fromMultiSelectValue(value: string[]) {
+	return value.filter((item): item is OperationCategory =>
+		operationCategorySet.has(item),
+	);
+}
+
+function useAccountOperationsPageLoadedVm(
+	props: AccountOperationsPageLoadedProps,
+) {
+	const {
+		canApply,
+		draftCategories,
+		draftFrom,
+		draftTo,
+		hasNext,
+		hasPrevious,
+		onApply,
+		onDraftCategoriesChange,
+		onDraftFromChange,
+		onDraftToChange,
+		onNext,
+		onPrevious,
+		onReset,
+	} = props;
+
+	const { t } = useTranslation();
+
+	const categoryData = operationCategories.map(category => ({
+		label: t(`ledger.category.${category}`),
+		value: category,
+	}));
+
+	const onPeriodChange: (value: [null | string, null | string]) => void = ([
+		from,
+		to,
+	]) => {
+		onDraftFromChange(from);
+		onDraftToChange(to);
+	};
+
+	const onCategoriesChange: (value: string[]) => void = value =>
+		onDraftCategoriesChange(fromMultiSelectValue(value));
+
+	return {
+		canApply,
+		categoryData,
+		draftCategories,
+		draftFrom,
+		draftTo,
+		hasNext,
+		hasPrevious,
+		onApply,
+		onCategoriesChange,
+		onNext,
+		onPeriodChange,
+		onPrevious,
+		onReset,
+		t,
+	};
+}
+
+export { useAccountOperationsPageLoadedVm };

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoading.view.tsx

@@ -12,15 +12,21 @@ const AccountOperationsPageLoading: FC = () => {
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
 			<Skeleton height={32} width="40%" />
+
 			<Group grow>
 				<Skeleton height={48} radius="sm" />
+
 				<Skeleton height={48} radius="sm" />
 			</Group>
+
 			<Skeleton height={48} radius="sm" />
+
 			<Group>
 				<Skeleton height={36} radius="sm" width={110} />
+
 				<Skeleton height={36} radius="sm" width={110} />
 			</Group>
+
 			<Stack gap="xs">
 				{skeletonRowIds.map(id => (
 					<Skeleton height={64} key={id} radius="md" />