refactor: normalize view models and share breadcrumbs and titles (WealthLedger/frontend#143) (#153)

src/pages/account/ui/AccountPage/AccountPage.tsx

@@ -1,48 +1,48 @@
 import type { FC } from "react";
 
-import { useAccountPageViewModel } from "./AccountPage.vm";
+import { useAccountPageVm } from "./AccountPage.vm";
 import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
 import { AccountPageError } from "./components/AccountPageError.view";
 import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
 import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
 
 const AccountPage: FC = () => {
-	const viewModel = useAccountPageViewModel();
-	if (viewModel.state === "loading") return <AccountPageLoading />;
-	if (viewModel.state === "error") return <AccountPageError {...viewModel} />;
-	if (viewModel.state === "empty")
+	const vm = useAccountPageVm();
+	if (vm.state === "loading") return <AccountPageLoading />;
+	if (vm.state === "error") return <AccountPageError {...vm} />;
+	if (vm.state === "empty")
 		return (
 			<AccountPageEmpty
-				account={viewModel.account}
-				accountId={viewModel.accountId}
-				incomeSummary={viewModel.incomeSummary}
-				readRetry={viewModel.readRetry}
-				recentEvents={viewModel.recentEvents}
-				recentOperations={viewModel.recentOperations}
-				source={viewModel.source}
+				account={vm.account}
+				accountId={vm.accountId}
+				incomeSummary={vm.incomeSummary}
+				readRetry={vm.readRetry}
+				recentEvents={vm.recentEvents}
+				recentOperations={vm.recentOperations}
+				source={vm.source}
 			/>
 		);
 
 	return (
 		<AccountPageLoaded
-			account={viewModel.account}
-			accountId={viewModel.accountId}
-			concentration={viewModel.concentration}
-			currency={viewModel.currency}
-			incomeSummary={viewModel.incomeSummary}
-			onCurrencyChange={viewModel.onCurrencyChange}
-			onSliceChange={viewModel.onSliceChange}
-			onTabChange={viewModel.onTabChange}
-			partial={viewModel.partial}
-			portfolio={viewModel.portfolio}
-			positionSections={viewModel.positionSections}
-			readRetry={viewModel.readRetry}
-			recentEvents={viewModel.recentEvents}
-			recentOperations={viewModel.recentOperations}
-			slice={viewModel.slice}
-			source={viewModel.source}
-			tab={viewModel.tab}
-			unrealizedReturns={viewModel.unrealizedReturns}
+			account={vm.account}
+			accountId={vm.accountId}
+			concentration={vm.concentration}
+			currency={vm.currency}
+			incomeSummary={vm.incomeSummary}
+			onCurrencyChange={vm.onCurrencyChange}
+			onSliceChange={vm.onSliceChange}
+			onTabChange={vm.onTabChange}
+			partial={vm.partial}
+			portfolio={vm.portfolio}
+			positionSections={vm.positionSections}
+			readRetry={vm.readRetry}
+			recentEvents={vm.recentEvents}
+			recentOperations={vm.recentOperations}
+			slice={vm.slice}
+			source={vm.source}
+			tab={vm.tab}
+			unrealizedReturns={vm.unrealizedReturns}
 		/>
 	);
 };

src/pages/account/ui/AccountPage/AccountPage.vm.test.tsx

@@ -12,7 +12,7 @@ import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 
 import { portfolio } from "../../model/positions.fixtures";
-import { useAccountPageViewModel } from "./AccountPage.vm";
+import { useAccountPageVm } from "./AccountPage.vm";
 
 function configureTestAuth() {
 	configureAuthClient({
@@ -102,12 +102,12 @@ function mockLoadedAccountPage() {
 	);
 }
 
-describe("useAccountPageViewModel", () => {
+describe("useAccountPageVm", () => {
 	it("prepares recent operations and events state for presentation views", async () => {
 		configureTestAuth();
 		mockLoadedAccountPage();
 
-		const { result } = renderHook(() => useAccountPageViewModel(), {
+		const { result } = renderHook(() => useAccountPageVm(), {
 			wrapper: createWrapper(),
 		});
 
@@ -154,7 +154,7 @@ describe("useAccountPageViewModel", () => {
 			),
 		);
 
-		const { result } = renderHook(() => useAccountPageViewModel(), {
+		const { result } = renderHook(() => useAccountPageVm(), {
 			wrapper: createWrapper(),
 		});
 
@@ -194,7 +194,7 @@ it("keeps overview sections independent when their source data is incomplete", a
 		),
 	);
 
-	const { result } = renderHook(() => useAccountPageViewModel(), {
+	const { result } = renderHook(() => useAccountPageVm(), {
 		wrapper: createWrapper(),
 	});
 
@@ -232,7 +232,7 @@ it("keeps overview sections loaded without exposing technical retry", async () =
 		),
 	);
 
-	const { result } = renderHook(() => useAccountPageViewModel(), {
+	const { result } = renderHook(() => useAccountPageVm(), {
 		wrapper: createWrapper(),
 	});
 

src/pages/account/ui/AccountPage/AccountPage.vm.ts

@@ -77,7 +77,7 @@ type AccountPageViewModel
 		| { code?: string; readRetry: AccountPageReadRetry; state: "error" }
 		| { state: "loading" };
 
-function useAccountPageViewModel(): AccountPageViewModel {
+function useAccountPageVm(): AccountPageViewModel {
 	const { accountId } = useParams();
 	const { t } = useTranslation();
 
@@ -199,4 +199,4 @@ function useAccountPageViewModel(): AccountPageViewModel {
 	};
 }
 
-export { useAccountPageViewModel };
+export { useAccountPageVm };