refactor: enforce frontend view model boundaries

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -42,18 +42,30 @@ type AccountPageLoadedProps = {
 
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
+
+	const defaultValue = [
+		...props.positionSections.map(section => section.kind),
+		"cash",
+		"recentOperations",
+		"recentEvents",
+		"incomeSummary",
+	];
+
 	return (
 		<Stack gap="lg">
 			<AccountHeading account={props.account} accountId={props.accountId} />
+
 			<PortfolioRefreshState
 				refreshError={props.refreshError ?? false}
 				refreshing={props.refreshing ?? false}
 				retry={props.retry}
 				sourceError={props.sourceError}
 			/>
-			{!!(props.portfolio.isStale) && ((
+
+			{!!props.portfolio.isStale && (
 				<Alert color="blue">{t("portfolio.staleWarning")}</Alert>
-			))}
+			)}
+
 			<Text c="dimmed" size="sm">
 				{t(
 					props.accountId === "all"
@@ -64,6 +76,7 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 					},
 				)}
 			</Text>
+
 			{props.partial
 				? (
 						<Alert role="status">{t("investment.partial")}</Alert>
@@ -71,12 +84,14 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				: (
 						<CurrencyCards amounts={props.portfolio.totalsByCurrency} />
 					)}
-			{!(props.partial) && ((
+
+			{!props.partial && (
 				<PortfolioStructure
 					key={props.accountId}
 					structure={props.portfolio.structure}
 				/>
-			))}
+			)}
+
 			<Accordion
 				classNames={{
 					chevron: classes.accordionChevron,
@@ -84,13 +99,7 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 					label: classes.accordionLabel,
 					panel: classes.accordionPanel,
 				}}
-				defaultValue={[
-					...props.positionSections.map(section => section.kind),
-					"cash",
-					"recentOperations",
-					"recentEvents",
-					"incomeSummary",
-				]}
+				defaultValue={defaultValue}
 				multiple
 			>
 				{props.positionSections.map(section => (
@@ -98,35 +107,44 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 						<Accordion.Control>
 							{t(positionSectionTitleKey(section.kind))}
 						</Accordion.Control>
+
 						<Accordion.Panel>
 							<PositionSection section={section} />
 						</Accordion.Panel>
 					</Accordion.Item>
 				))}
+
 				<Accordion.Item value="cash">
 					<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>
+
 					<Accordion.Panel>
 						<CurrencyCards amounts={props.portfolio.cashBalances} />
 					</Accordion.Panel>
 				</Accordion.Item>
+
 				<Accordion.Item value="recentOperations">
 					<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>
+
 					<Accordion.Panel>
 						<RecentOperations operations={props.recentOperations} />
 					</Accordion.Panel>
 				</Accordion.Item>
+
 				<Accordion.Item value="recentEvents">
 					<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>
+
 					<Accordion.Panel>
 						<BrokerageEventsPreview events={props.recentEvents} />
 					</Accordion.Panel>
 				</Accordion.Item>
+
 				<Accordion.Item value="incomeSummary">
 					<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
+
 					<Accordion.Panel>
-						{!!(props.incomeSummary) && ((
+						{!!props.incomeSummary && (
 							<IncomeSummary {...props.incomeSummary} />
-						))}
+						)}
 					</Accordion.Panel>
 				</Accordion.Item>
 			</Accordion>
@@ -136,6 +154,7 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 
 function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
 	if (kind === "stocks") return "portfolio.stocks";
+
 	return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
 }