refactor: enforce frontend view model boundaries

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

@@ -12,7 +12,7 @@ import {
 	Text,
 	Title,
 } from "@mantine/core";
-import { AddIcon } from "@wealthledger/icons";
+import { AddIcon, CategoriesIcon } from "@wealthledger/icons";
 import { LoadingSkeleton, StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
@@ -27,61 +27,78 @@ import {
 import type { CardsPageVm } from "./CardsPage.vm";
 
 import classes from "./CardsPage.module.css";
+import { useCardsPageViewVm } from "./CardsPageView.vm";
 
 type CardsPageViewProps = { vm: CardsPageVm };
-const CardsPageView: FC<CardsPageViewProps> = (props) => {
-	const { vm } = props;
-	const { t } = useTranslation();
 
-	function renderCards() {
-		if (vm.items) {
-			if (vm.items.length > 0) {
-				return (
-					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						{vm.items.map(card => (
-							<Paper
-								className={classes.card}
-								component={Link}
-								key={card.id}
-								p={0}
-								to={card.to}
-							>
-								<BankCardFace card={card} />
-							</Paper>
-						))}
-					</SimpleGrid>
-				);
-			}
+const CardsPageViewCards: FC<CardsPageViewProps> = (props) => {
+	const { t } = useTranslation();
+	const { vm } = props;
+	const { onAddCard } = useCardsPageViewVm(props);
+
+	if (vm.items) {
+		if (vm.items.length > 0) {
 			return (
-				<StateView
-					action={(
-						<Button onClick={() => vm.setAdding(true)}>
-							{t("bank.addCard")}
-						</Button>
-					)}
-					text={t(vm.archive ? "bank.emptyHint" : "bank.noActive")}
-					title={t("bank.empty")}
-				/>
-			);
-		}
-		if (vm.cards.isLoading) {
-			return (
-				<LoadingSkeleton label={t("bank.loading")}>
-					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						<Skeleton h={250} />
-						<Skeleton h={250} />
-					</SimpleGrid>
-				</LoadingSkeleton>
+				<SimpleGrid cols={{ base: 1, sm: 2 }}>
+					{vm.items.map(card => (
+						<Paper
+							className={classes.card}
+							component={Link}
+							key={card.id}
+							p={0}
+							to={card.to}
+						>
+							<BankCardFace card={card} />
+						</Paper>
+					))}
+				</SimpleGrid>
 			);
 		}
+
+		const text = t(vm.archive ? "bank.emptyHint" : "bank.noActive");
+
+		return (
+			<StateView
+				action={<Button onClick={onAddCard}>{t("bank.addCard")}</Button>}
+				text={text}
+				title={t("bank.empty")}
+			/>
+		);
 	}
+
+	if (vm.cards.isLoading) {
+		return (
+			<LoadingSkeleton label={t("bank.loading")}>
+				<SimpleGrid cols={{ base: 1, sm: 2 }}>
+					<Skeleton h={250} />
+
+					<Skeleton h={250} />
+				</SimpleGrid>
+			</LoadingSkeleton>
+		);
+	}
+};
+
+const CardsPageView: FC<CardsPageViewProps> = (props) => {
+	const {
+		onAddCard,
+		onArchiveChange,
+		onCategories,
+		retryCards,
+		retryCategories,
+		retrySummary,
+		t,
+		vm,
+	} = useCardsPageViewVm(props);
+
 	return (
 		<Stack gap="lg">
 			<Group gap="sm">
 				<Title order={1}>{t("bank.title")}</Title>
+
 				<ActionIcon
 					aria-label={t("bank.addCard")}
-					onClick={() => vm.setAdding(true)}
+					onClick={onAddCard}
 					size="lg"
 					title={t("bank.addCard")}
 					variant="light"
@@ -89,63 +106,59 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 					<AddIcon size={20} strokeWidth={2} />
 				</ActionIcon>
 			</Group>
+
 			<Switch
 				checked={vm.archive}
 				label={t("bank.showArchive")}
-				onChange={event => vm.setArchive(event.currentTarget.checked)}
+				onChange={onArchiveChange}
 			/>
-			{renderCards()}
+
+			<CardsPageViewCards {...props} />
+
 			{vm.cards.isError && (
 				<Group role="alert">
 					<Text>{t(vm.items ? "bank.refreshError" : "bank.error")}</Text>
-					<Button onClick={() => void vm.cards.refetch()} variant="default">
+
+					<Button onClick={retryCards} variant="default">
 						{t("bank.retry")}
 					</Button>
 				</Group>
 			)}
+
 			{vm.cards.data && vm.cards.isFetching && (
 				<Text role="status">{t("bank.refreshing")}</Text>
 			)}
+
 			<Group align="flex-end" justify="space-between">
 				<BankPeriodPicker onChange={vm.setPeriod} period={vm.period} />
+
 				{Boolean(vm.categories.data?.length || vm.cards.data?.length) && (
 					<Button
 						color="gray"
-						leftSection={(
-							<svg
-								aria-hidden="true"
-								fill="none"
-								height="18"
-								stroke="currentColor"
-								strokeLinejoin="round"
-								strokeWidth="1.7"
-								viewBox="0 0 24 24"
-								width="18"
-							>
-								<path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
-							</svg>
-						)}
-						onClick={() => vm.setManagingCategories(true)}
+						leftSection={<CategoriesIcon size={18} strokeWidth="1.7" />}
+						onClick={onCategories}
 						variant="subtle"
 					>
 						{t("bank.categories")}
 					</Button>
 				)}
 			</Group>
+
 			<BankSummaryView
 				all
 				data={vm.summary.data}
 				error={vm.summary.isError}
 				fetching={vm.summary.isFetching}
 				loading={vm.summary.isLoading}
-				retry={() => void vm.summary.refetch()}
+				retry={retrySummary}
 			/>
+
 			{vm.categories.isError && (
 				<BankFeedback
 					cached={Boolean(vm.categories.data)}
 					error={vm.categories.error}
 					loadingError
-					retry={() => void vm.categories.refetch()}
+					retry={retryCategories}
 				/>
 			)}
 		</Stack>