refactor: remove redundant page view models

src/pages/cards/ui/CardsPage/CardsPage.view.tsx

@@ -27,14 +27,12 @@ import {
 import type { CardsPageVm } from "./CardsPage.vm";
 
 import classes from "./CardsPage.module.css";
-import { useCardsPageViewVm } from "./CardsPageView.vm";
 
 type CardsPageViewProps = { vm: CardsPageVm };
 
 const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
 	const { t } = useTranslation();
 	const { vm } = props;
-	const { onAddCard } = useCardsPageViewVm(props);
 
 	if (vm.items) {
 		if (vm.items.length > 0) {
@@ -59,7 +57,7 @@ const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
 
 		return (
 			<StateView
-				action={<Button onClick={onAddCard}>{t("bank.addCard")}</Button>}
+				action={<Button onClick={vm.onAddCard}>{t("bank.addCard")}</Button>}
 				text={text}
 				title={t("bank.empty")}
 			/>
@@ -80,16 +78,8 @@ const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
 };
 
 const CardsPageView: FC<CardsPageViewProps> = (props) => {
-	const {
-		onAddCard,
-		onArchiveChange,
-		onCategories,
-		retryCards,
-		retryCategories,
-		retrySummary,
-		t,
-		vm,
-	} = useCardsPageViewVm(props);
+	const { vm } = props;
+	const { t } = useTranslation();
 
 	return (
 		<Stack gap="lg">
@@ -98,7 +88,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 
 				<ActionIcon
 					aria-label={t("bank.addCard")}
-					onClick={onAddCard}
+					onClick={vm.onAddCard}
 					size="lg"
 					title={t("bank.addCard")}
 					variant="light"
@@ -110,7 +100,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 			<Switch
 				checked={vm.archive}
 				label={t("bank.showArchive")}
-				onChange={onArchiveChange}
+				onChange={vm.onArchiveChange}
 			/>
 
 			<CardsPageViewCards {...props} />
@@ -119,7 +109,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 				<Group role="alert">
 					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
 
-					<Button onClick={retryCards} variant="default">
+					<Button onClick={vm.retryCards} variant="default">
 						{t("bank.retry")}
 					</Button>
 				</Group>
@@ -134,7 +124,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 					<Button
 						color="gray"
 						leftSection={<CategoriesIcon size={18} strokeWidth="1.7" />}
-						onClick={onCategories}
+						onClick={vm.onCategories}
 						variant="subtle"
 					>
 						{t("bank.categories")}
@@ -148,7 +138,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 				error={vm.summary.isError}
 				fetching={vm.summary.isFetching}
 				loading={vm.summary.isLoading}
-				retry={retrySummary}
+				retry={vm.retrySummary}
 			/>
 
 			{vm.categories.isError && (
@@ -156,7 +146,7 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 					cached={Boolean(vm.categories.data)}
 					error={vm.categories.error}
 					loadingError
-					retry={retryCategories}
+					retry={vm.retryCategories}
 				/>
 			)}
 		</Stack>

src/pages/cards/ui/CardsPage/CardsPage.vm.ts

@@ -1,3 +1,5 @@
+import type { ChangeEvent } from "react";
+
 import { useState } from "react";
 import { useSearchParams } from "react-router";
 
@@ -32,10 +34,14 @@ function useCardsPageVm() {
 			to: `/cards/${card.id}?${new URLSearchParams(period)}`,
 		})),
 		managingCategories,
+		onAddCard: () => setAdding(true),
+		onArchiveChange: (event: ChangeEvent<HTMLInputElement>) =>
+			setArchive(event.currentTarget.checked),
+		onCategories: () => setManagingCategories(true),
 		period,
-		setAdding,
-		setArchive,
-		setManagingCategories,
+		retryCards: () => void cards.refetch(),
+		retryCategories: () => void categories.refetch(),
+		retrySummary: () => void summary.refetch(),
 		setPeriod: (value: [null | string, null | string]) => {
 			if (value[0] && value[1]) setParameters({ from: value[0], to: value[1] });
 		},

src/pages/cards/ui/CardsPage/CardsPageView.vm.ts

@@ -1,35 +0,0 @@
-import type { ComponentProps } from "react";
-
-import { Switch } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-
-import type { CardsPageVm } from "./CardsPage.vm";
-
-type CardsPageViewProps = { vm: CardsPageVm };
-
-function useCardsPageViewVm(props: CardsPageViewProps) {
-	const { vm } = props;
-	const { t } = useTranslation();
-	const onAddCard = () => vm.setAdding(true);
-
-	const onArchiveChange: ComponentProps<typeof Switch>["onChange"] = event =>
-		vm.setArchive(event.currentTarget.checked);
-
-	const retryCards = () => void vm.cards.refetch();
-	const onCategories = () => vm.setManagingCategories(true);
-	const retrySummary = () => void vm.summary.refetch();
-	const retryCategories = () => void vm.categories.refetch();
-
-	return {
-		onAddCard,
-		onArchiveChange,
-		onCategories,
-		retryCards,
-		retryCategories,
-		retrySummary,
-		t,
-		vm,
-	};
-}
-
-export { useCardsPageViewVm };