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

src/app/routes/DocumentTitle/DocumentTitle.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 
-import { useDocumentTitle } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
 
 import { useCurrentRoute } from "@/app/model";
@@ -8,12 +7,12 @@ import { useBankCard } from "@/entities/bank-card";
 import { useBond } from "@/entities/bond";
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
 import { useStock } from "@/entities/stock";
+import { useAppDocumentTitle } from "@/shared/ui";
 
 type DocumentTitleProps = { title: string };
 
 const DocumentTitle: FC<DocumentTitleProps> = (props): undefined => {
-	const { t } = useTranslation();
-	useDocumentTitle(`${props.title} — ${t("appName")}`);
+	useAppDocumentTitle(props.title);
 };
 
 type AccountDocumentTitleProps = {

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

@@ -1,12 +1,12 @@
 import type { FC, PropsWithChildren } from "react";
 
 import { Button, Stack, Text, Title } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
 import { Component } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router";
 
 import { useAuth } from "@/features/auth";
+import { useAppDocumentTitle } from "@/shared/ui";
 
 type BoundaryProps = PropsWithChildren<{
 	authenticated: boolean;
@@ -37,7 +37,7 @@ class Boundary extends Component<BoundaryProps, State> {
 const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
 	const { authenticated } = props;
 	const { t } = useTranslation();
-	useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`);
+	useAppDocumentTitle(t("routeError.title"));
 	const to = authenticated ? "/accounts" : "/login";
 
 	return (

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.tsx

@@ -7,10 +7,8 @@ import { useCurrentRoute } from "@/app/model";
 
 import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
 import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
-import { BondBreadcrumbs } from "./BondBreadcrumbs";
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
-import { CardBreadcrumbs } from "./CardBreadcrumbs";
-import { StockBreadcrumbs } from "./StockBreadcrumbs";
+import { EntityBreadcrumbs } from "./EntityBreadcrumbs";
 
 const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
@@ -26,9 +24,16 @@ const AppBreadcrumbs: FC = () => {
 		stock,
 	} = useCurrentRoute();
 
-	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
-	if (stock)
-		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
+	if (bond) {
+		return <EntityBreadcrumbs identifier={bond.params.bondId ?? ""} kind="bond" />;
+	}
+
+	if (stock) {
+		return (
+			<EntityBreadcrumbs identifier={stock.params.stockId ?? ""} kind="stock" />
+		);
+	}
+
 	if (account && (section || !account.params.section))
 		return (
 			<Stack gap={0} mb="md">
@@ -43,8 +48,13 @@ const AppBreadcrumbs: FC = () => {
 				/>
 			</Stack>
 		);
-	if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
+
+	if (card) {
+		return <EntityBreadcrumbs identifier={card.params.cardId ?? ""} kind="card" />;
+	}
+
 	if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
+
 	if (accounts)
 		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
 

src/app/ui/AppBreadcrumbs/BondBreadcrumbs.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useTranslation } from "react-i18next";
-
-import { useBond } from "@/entities/bond";
-
-import { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-type BondBreadcrumbsProps = { identifier: string };
-
-const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
-	const { data } = useBond(props.identifier);
-	const { t } = useTranslation();
-
-	return (
-		<BreadcrumbTrail
-			items={[
-				{ label: t("bond.searchTitle"), to: "/bonds" },
-				{ label: data?.name ?? t("bond.instrument") },
-			]}
-		/>
-	);
-};
-
-export { BondBreadcrumbs };

src/app/ui/AppBreadcrumbs/BreadcrumbTrail.tsx

@@ -39,4 +39,4 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
 	);
 };
 
-export { BreadcrumbTrail };
+export { BreadcrumbTrail, type Crumb };

src/app/ui/AppBreadcrumbs/CardBreadcrumbs.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useTranslation } from "react-i18next";
-
-import { useBankCard } from "@/entities/bank-card";
-
-import { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-type CardBreadcrumbsProps = { identifier: string };
-
-const CardBreadcrumbs: FC<CardBreadcrumbsProps> = (props) => {
-	const { data } = useBankCard(props.identifier);
-	const { t } = useTranslation();
-
-	return (
-		<BreadcrumbTrail
-			items={[
-				{ label: t("bank.title"), to: "/cards" },
-				{ label: data?.name ?? t("bank.card") },
-			]}
-		/>
-	);
-};
-
-export { CardBreadcrumbs };

src/app/ui/AppBreadcrumbs/EntityBreadcrumbs.tsx

@@ -0,0 +1,48 @@
+import type { FC } from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { useBankCard } from "@/entities/bank-card";
+import { useBond } from "@/entities/bond";
+import { useStock } from "@/entities/stock";
+
+import type { Crumb } from "./BreadcrumbTrail";
+
+import { BreadcrumbTrail } from "./BreadcrumbTrail";
+
+type EntityBreadcrumbsProps = {
+	identifier: string;
+	kind:
+		| "bond"
+		| "card"
+		| "stock";
+};
+
+const EntityBreadcrumbs: FC<EntityBreadcrumbsProps> = (props) => {
+	const { identifier, kind } = props;
+	const { t } = useTranslation();
+
+	const bond = useBond(kind === "bond" ? identifier : "");
+	const card = useBankCard(kind === "card" ? identifier : "");
+	const stock = useStock(kind === "stock" ? identifier : "");
+
+	let parent: Crumb;
+	let name: string;
+
+	if (kind === "bond") {
+		parent = { label: t("bond.searchTitle"), to: "/bonds" };
+		name = bond.data?.name ?? t("bond.instrument");
+	}
+	else if (kind === "stock") {
+		parent = { label: t("stock.searchTitle"), to: "/stocks" };
+		name = stock.data?.name ?? t("stock.share");
+	}
+	else {
+		parent = { label: t("bank.title"), to: "/cards" };
+		name = card.data?.name ?? t("bank.card");
+	}
+
+	return <BreadcrumbTrail items={[parent, { label: name }]} />;
+};
+
+export { EntityBreadcrumbs };

src/app/ui/AppBreadcrumbs/StockBreadcrumbs.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useTranslation } from "react-i18next";
-
-import { useStock } from "@/entities/stock";
-
-import { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-type StockBreadcrumbsProps = { identifier: string };
-
-const StockBreadcrumbs: FC<StockBreadcrumbsProps> = (props) => {
-	const { data } = useStock(props.identifier);
-	const { t } = useTranslation();
-
-	return (
-		<BreadcrumbTrail
-			items={[
-				{ label: t("stock.searchTitle"), to: "/stocks" },
-				{ label: data?.name ?? t("stock.share") },
-			]}
-		/>
-	);
-};
-
-export { StockBreadcrumbs };