refactor: enforce frontend view model boundaries

src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx

@@ -12,12 +12,16 @@ import classes from "../AccountIncomePage.module.css";
 type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]> & {
 	title: string;
 };
+
 type ComparisonValuesProps = {
-	kind: "compared" | "difference" | "selected";
+	kind: "compared"
+		| "difference"
+		| "selected";
 	label: string;
 	percentages?: ComparisonProps["values"][number]["percentages"];
 	values: ComparisonProps["values"][number]["selected"];
 };
+
 type IncomeComparisonsProps = {
 	comparison: IncomeDisplayModel["comparison"];
 	notice: string;
@@ -28,6 +32,7 @@ const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
 	return (
 		<Stack>
 			<Title order={2}>{props.title}</Title>
+
 			{props.comparison
 				? (
 						<Comparison {...props.comparison} title={props.title} />
@@ -45,6 +50,7 @@ const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
 
 const Comparison: FC<ComparisonProps> = (props) => {
 	const { t } = useTranslation();
+
 	return (
 		<section aria-label={props.title} className={classes.comparison}>
 			<Stack gap="md">
@@ -61,11 +67,13 @@ const Comparison: FC<ComparisonProps> = (props) => {
 								label={props.selectedPeriod}
 								values={value.selected}
 							/>
+
 							<ComparisonValues
 								kind="compared"
 								label={props.comparedPeriod}
 								values={value.compared}
 							/>
+
 							<ComparisonValues
 								kind="difference"
 								label={t("income.difference")}
@@ -75,11 +83,12 @@ const Comparison: FC<ComparisonProps> = (props) => {
 						</div>
 					</Stack>
 				))}
-				{props.values.length === 0 && ((
+
+				{props.values.length === 0 && (
 					<Text c="gray.7" size="sm">
 						{t("income.comparisonEmpty")}
 					</Text>
-				))}
+				)}
 			</Stack>
 		</section>
 	);
@@ -87,46 +96,59 @@ const Comparison: FC<ComparisonProps> = (props) => {
 
 const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
 	const { t } = useTranslation();
+
+	const data_tone
+		= props.kind === "difference"
+			? differenceTone(props.values.total.value)
+			: undefined;
+
 	return (
 		<section
 			aria-label={props.label}
 			className={classes.comparisonPanel}
 			data-kind={props.kind}
-			data-tone={
-				(props.kind === "difference") ? (differenceTone(props.values.total.value)) : undefined
-			}
+			data-tone={data_tone}
 		>
 			<Text className={classes.comparisonLabel} fw={600} size="sm">
 				{props.label}
 			</Text>
+
 			<dl className={classes.comparisonValues}>
 				{(["total", "coupon", "dividend"] as const).map((key) => {
-					const money = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.values[key];
-					const percentage = /* eslint-disable-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name. */ props.percentages?.[key];
+					const money
+						// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
+						= props.values[key];
+
+					const percentage
+						// eslint-disable-next-line security/detect-object-injection -- This lookup uses a fixed typed key set, not an arbitrary external property name.
+						= props.percentages?.[key];
+
 					const tone
 						= props.kind === "difference"
 							? differenceTone(money.value)
 							: undefined;
+
+					const appearanceClass
+						= key === "total"
+							? classes.comparisonTotal
+							: classes.comparisonDetail;
+
 					return (
-						<div
-							className={
-								key === "total"
-									? classes.comparisonTotal
-									: classes.comparisonDetail
-							}
-							key={key}
-						>
+						<div className={appearanceClass} key={key}>
 							<dt>{t(`income.${key}`)}</dt>
+
 							<dd data-tone={tone}>
 								<span>
 									{tone === "positive" ? "+" : ""}
+
 									{formatMoney(money)}
 								</span>
-								{!!(percentage) && ((
+
+								{!!percentage && (
 									<span className={classes.comparisonPercent}>
 										{percentage}
 									</span>
-								))}
+								)}
 							</dd>
 						</div>
 					);
@@ -136,8 +158,11 @@ const ComparisonValues: FC<ComparisonValuesProps> = (props) => {
 	);
 };
 
-function differenceTone(value: string): "negative" | "neutral" | "positive" {
+function differenceTone(value: string): "negative"
+	| "neutral"
+	| "positive" {
 	if (!/[1-9]/.test(value)) return "neutral";
+
 	return value.startsWith("-") ? "negative" : "positive";
 }