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

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 };