refactor: remove redundant page view models

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

@@ -14,13 +14,11 @@ import { DatePickerInput } from "@mantine/dates";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-import { LedgerEntryRow } from "@/entities/broker-operation";
+import { LedgerEntryRow, operationCategories } 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" }
@@ -56,22 +54,12 @@ const AccountOperationsPageLoadedOperations: FC<
 const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	props,
 ) => {
-	const {
-		canApply,
-		categoryData,
-		draftCategories,
-		draftFrom,
-		draftTo,
-		hasNext,
-		hasPrevious,
-		onApply,
-		onCategoriesChange,
-		onNext,
-		onPeriodChange,
-		onPrevious,
-		onReset,
-		t,
-	} = useAccountOperationsPageLoadedVm(props);
+	const { t } = useTranslation();
+
+	const categoryData = operationCategories.map(category => ({
+		label: t(`ledger.category.${category}`),
+		value: category,
+	}));
 
 	return (
 		<Stack gap="lg">
@@ -115,13 +103,13 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 					clearable
 					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 					label={t("ledger.period")}
-					onChange={onPeriodChange}
+					onChange={props.onPeriodChange}
 					popoverProps={{
 						middlewares: { shift: { crossAxis: true } },
 						returnFocus: true,
 					}}
 					type="range"
-					value={[draftFrom, draftTo]}
+					value={props.draftPeriod}
 					valueFormat="DD.MM.YYYY"
 				/>
 			</Group>
@@ -131,30 +119,30 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 				clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
 				data={categoryData}
 				label={t("ledger.categories")}
-				onChange={onCategoriesChange}
+				onChange={props.onCategoriesChange}
 				placeholder={t("ledger.categoriesPlaceholder")}
-				value={draftCategories}
+				value={props.draftCategories}
 			/>
 
 			<Group>
-				<Button disabled={!canApply} onClick={onApply}>
+				<Button disabled={!props.canApply} onClick={props.onApply}>
 					{t("ledger.apply")}
 				</Button>
 
-				<Button onClick={onReset} variant="default">
+				<Button onClick={props.onReset} variant="default">
 					{t("ledger.reset")}
 				</Button>
 			</Group>
 
 			<AccountOperationsPageLoadedOperations {...props} />
 
-			{!!(hasNext || hasPrevious) && (
+			{!!(props.hasNext || props.hasPrevious) && (
 				<Group justify="space-between">
-					<Button disabled={!hasPrevious} onClick={onPrevious}>
+					<Button disabled={!props.hasPrevious} onClick={props.onPrevious}>
 						{t("ledger.previous")}
 					</Button>
 
-					<Button disabled={!hasNext} onClick={onNext}>
+					<Button disabled={!props.hasNext} onClick={props.onNext}>
 						{t("ledger.next")}
 					</Button>
 				</Group>

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

@@ -1,78 +0,0 @@
-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 };