refactor: enforce frontend view model boundaries

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

@@ -25,45 +25,46 @@ import { IncomeSummary } from "./IncomeSummary.view";
 
 type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;
 
-const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
-	const {
-		analytics,
-		display,
-		form,
-		onReset,
-		onSubmit,
-		refreshError,
-		refreshing,
-		retry,
-	} = props;
+const AccountIncomePageLoadedSummary: FC<LoadedProps> = (props) => {
 	const { t } = useTranslation();
-	function renderSummary() {
-		if (props.partial) {
-			return <Alert role="status">{t("investment.partial")}</Alert>;
-		}
-		if (analytics.totalsByCurrency.length > 0) {
-			return <IncomeSummary totals={analytics.totalsByCurrency} />;
-		}
-		return (
-			<StateView
-				text={t("income.emptyText")}
-				title={t("income.emptyTitle")}
-			/>
-		);
+
+	const { analytics } = props;
+
+	if (props.partial) {
+		return <Alert role="status">{t("investment.partial")}</Alert>;
 	}
+
+	return analytics.totalsByCurrency.length > 0
+		? (
+				<IncomeSummary totals={analytics.totalsByCurrency} />
+			)
+		: (
+				<StateView text={t("income.emptyText")} title={t("income.emptyTitle")} />
+			);
+};
+
+const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
+	const { display, form, onReset, onSubmit, refreshError, refreshing, retry }
+		= props;
+
+	const { t } = useTranslation();
+
 	return (
 		<Stack className={classes.page} gap="lg">
-			{!!(props.lastSuccessfulAt) && ((
+			{!!props.lastSuccessfulAt && (
 				<Text c="dimmed" size="xs">
 					{t("investment.sourceTime", {
 						date: formatSnapshotTime(props.lastSuccessfulAt),
 					})}
 				</Text>
-			))}
+			)}
+
 			<Title order={1}>{t("income.title")}</Title>
+
 			<Button disabled={refreshing} onClick={retry} w="fit-content">
 				{t("investment.refresh")}
 			</Button>
+
 			<FormProvider {...form}>
 				<IncomePeriodForm
 					key={props.formRevision}
@@ -71,13 +72,16 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 					onSubmit={form.handleSubmit(onSubmit)}
 				/>
 			</FormProvider>
-			{!!(refreshing) && ((
+
+			{!!refreshing && (
 				<Group aria-label={t("income.refreshing")} gap="xs" role="status">
 					<Loader size="sm" />
+
 					<Text>{t("income.refreshing")}</Text>
 				</Group>
-			))}
-			{!!(refreshError) && ((
+			)}
+
+			{!!refreshError && (
 				<Alert aria-live="polite" color="orange" role="status">
 					<Stack gap="sm">
 						<Text>
@@ -87,24 +91,30 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 									: "income.refreshError",
 							)}
 						</Text>
+
 						<Button onClick={retry} variant="default">
 							{t("income.retry")}
 						</Button>
 					</Stack>
 				</Alert>
-			))}
-			{renderSummary()}
+			)}
+
+			<AccountIncomePageLoadedSummary {...props} />
+
 			<Alert color="blue">{t("income.taxBoundary")}</Alert>
+
 			<IncomeComparisons
 				comparison={display.previousComparison}
 				notice={t(`income.${display.previousNotice}`)}
 				title={t("income.previousPeriod")}
 			/>
+
 			<IncomeComparisons
 				comparison={display.comparison}
 				notice={t(`income.${display.yearNotice}`)}
 				title={t("income.yearAgo")}
 			/>
+
 			<IncomePayments entries={display.entries} />
 		</Stack>
 	);