refactor: remove redundant page view models

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

@@ -13,22 +13,22 @@ import { useScreenSync } from "@/features/tbank-connection";
 import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
 import { isValidPeriod } from "@/shared/lib";
 
+const operationCategorySet = new Set<string>(operationCategories);
+
 type AccountOperationsPageViewModel
 	= | {
 		canApply: boolean;
 		draftCategories: OperationCategory[];
-		draftFrom: null | string;
-		draftTo: null | string;
+		draftPeriod: [null | string, null | string];
 		hasNext: boolean;
 		hasPrevious: boolean;
 		historyLoading?: boolean;
 		items: BrokerageOperation[];
 		lastSuccessfulAt?: null | string;
 		onApply: () => void;
-		onDraftCategoriesChange: (value: OperationCategory[]) => void;
-		onDraftFromChange: (value: null | string) => void;
-		onDraftToChange: (value: null | string) => void;
+		onCategoriesChange: (value: string[]) => void;
 		onNext: () => void;
+		onPeriodChange: (value: [null | string, null | string]) => void;
 		onPrevious: () => void;
 		onReset: () => void;
 		partial?: boolean;
@@ -64,8 +64,12 @@ const useAccountOperationsPageVm = (
 		(searchParameters.get("categories") ?? "").split(",").includes(category),
 	);
 
-	const [draftFrom, setDraftFrom] = useState<null | string>(appliedFrom);
-	const [draftTo, setDraftTo] = useState<null | string>(appliedTo);
+	const [draftPeriod, setDraftPeriod] = useState<[
+		null | string,
+		null | string,
+	]>([appliedFrom, appliedTo]);
+
+	const [draftFrom, draftTo] = draftPeriod;
 
 	const [draftCategories, setDraftCategories]
 		= useState<OperationCategory[]>(appliedCategories);
@@ -100,15 +104,8 @@ const useAccountOperationsPageVm = (
 
 	if (previousSearch !== searchParameters) {
 		setPreviousSearch(searchParameters);
-		setDraftFrom(appliedFrom);
-		setDraftTo(appliedTo);
-		setDraftCategories(
-			operationCategories.filter(category =>
-				(searchParameters.get("categories") ?? "")
-					.split(",")
-					.includes(category),
-			),
-		);
+		setDraftPeriod([appliedFrom, appliedTo]);
+		setDraftCategories(appliedCategories);
 	}
 
 	const firstPageQuery = {
@@ -154,8 +151,7 @@ const useAccountOperationsPageVm = (
 	};
 
 	const onReset = () => {
-		setDraftFrom(null);
-		setDraftTo(null);
+		setDraftPeriod([null, null]);
 		setDraftCategories([]);
 		setSearchParameters({});
 		resetCursors();
@@ -182,8 +178,7 @@ const useAccountOperationsPageVm = (
 	return {
 		canApply: isDirty && isValidPeriod(draftFrom, draftTo),
 		draftCategories,
-		draftFrom,
-		draftTo,
+		draftPeriod,
 		hasNext: Boolean(nextCursor && operations.data.hasNext),
 		hasPrevious: cursors.length > 0,
 		historyLoading:
@@ -202,13 +197,16 @@ const useAccountOperationsPageVm = (
 			});
 			resetCursors();
 		},
-		onDraftCategoriesChange: setDraftCategories,
-		onDraftFromChange: setDraftFrom,
-		onDraftToChange: setDraftTo,
+		onCategoriesChange: values => setDraftCategories(
+			values.filter((value): value is OperationCategory =>
+				operationCategorySet.has(value),
+			),
+		),
 		onNext: () => {
 			if (nextCursor)
 				setPagination({ cursors: [...cursors, nextCursor], scopeKey });
 		},
+		onPeriodChange: setDraftPeriod,
 		onPrevious: () =>
 			setPagination({ cursors: cursors.slice(0, -1), scopeKey }),
 		onReset,

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 };