refactor: enforce frontend view model boundaries

src/entities/bank-card/ui/BankSummary/BankSummary.view.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, FC } from "react";
 
 import { Button, Group, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { OperationIcon } from "@wealthledger/icons";
 import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
@@ -8,7 +9,7 @@ import { formatMoney } from "@/shared/lib";
 
 import type { BankSummary } from "../../api/queries";
 
-import { BankOperationIcon } from "../BankOperationIcon/BankOperationIcon";
+import { bankOperationAppearance } from "../../model/operation-appearance";
 import classes from "./BankSummary.module.css";
 
 const CATEGORY_COLUMNS = 2;
@@ -21,77 +22,93 @@ type BankSummaryViewProps = {
 	loading: boolean;
 	retry: () => void;
 };
+
+const BankSummaryViewCategories: FC<BankSummaryViewProps> = (props) => {
+	const { t } = useTranslation();
+
+	if (props.data) {
+		if (props.data.categories.length > 0) {
+			return (
+				<dl
+					className={classes.categories}
+					style={
+						{
+							"--category-rows": Math.ceil(
+								props.data.categories.length / CATEGORY_COLUMNS,
+							),
+						} as CSSProperties
+					}
+				>
+					{props.data.categories.map(category => (
+						<div className={classes.category} key={category.categoryId}>
+							<dt className={classes.label}>
+								<OperationIcon
+									{...bankOperationAppearance("expense", category.categoryName)}
+								/>
+
+								<span>{category.categoryName}</span>
+							</dt>
+
+							<dd className={classes.amount}>
+								{formatMoney(category.net, { withZeroCents: true })}
+							</dd>
+						</div>
+					))}
+				</dl>
+			);
+		}
+
+		return (
+			<Text c="dimmed" size="sm">
+				{t("bank.noExpenses")}
+			</Text>
+		);
+	}
+
+	if (props.loading) {
+		return (
+			<LoadingSkeleton label={t("bank.loading")}>
+				<Stack gap="sm">
+					<Skeleton h={32} w="35%" />
+
+					<Skeleton h={40} />
+
+					<Skeleton h={40} />
+				</Stack>
+			</LoadingSkeleton>
+		);
+	}
+};
+
 const BankSummaryView: FC<BankSummaryViewProps> = (props) => {
 	const { t } = useTranslation();
 
-	function renderCategories() {
-		if (props.data) {
-			if (props.data.categories.length > 0) {
-				return (
-					<dl
-						className={classes.categories}
-						style={
-							{
-								"--category-rows": Math.ceil(props.data.categories.length / CATEGORY_COLUMNS),
-							} as CSSProperties
-						}
-					>
-						{props.data.categories.map(category => (
-							<div className={classes.category} key={category.categoryId}>
-								<dt className={classes.label}>
-									<BankOperationIcon
-										categoryName={category.categoryName}
-										kind="expense"
-									/>
-									<span>{category.categoryName}</span>
-								</dt>
-								<dd className={classes.amount}>
-									{formatMoney(category.net, { withZeroCents: true })}
-								</dd>
-							</div>
-						))}
-					</dl>
-				);
-			}
-			return (
-				<Text c="dimmed" size="sm">
-					{t("bank.noExpenses")}
-				</Text>
-			);
-		}
-		if (props.loading) {
-			return (
-				<LoadingSkeleton label={t("bank.loading")}>
-					<Stack gap="sm">
-						<Skeleton h={32} w="35%" />
-						<Skeleton h={40} />
-						<Skeleton h={40} />
-					</Stack>
-				</LoadingSkeleton>
-			);
-		}
-	}
 	return (
 		<Stack aria-busy={props.loading || props.fetching} gap="md">
 			<div className={classes.header}>
 				<Title order={2}>
 					{t(props.all ? "bank.allSummary" : "bank.summary")}
 				</Title>
+
 				{props.data && (
 					<Text className={classes.total}>
 						{formatMoney(props.data.net, { withZeroCents: true })}
 					</Text>
 				)}
 			</div>
-			{renderCategories()}
+
+			<BankSummaryViewCategories {...props} />
+
 			{props.error && (
 				<Group role="alert">
 					<Text>{t(props.data ? "bank.refreshError" : "bank.error")}</Text>
+
 					<Button onClick={props.retry} variant="default">
 						{t("bank.retry")}
 					</Button>
 				</Group>
 			)}
+
 			{props.data && props.fetching && (
 				<Text role="status">{t("bank.refreshing")}</Text>
 			)}