Files
frontend/src/app/routes/DocumentTitle/DocumentTitle.tsx
T
ksv741 ecc1bd74ef
Frontend verify / commits (pull_request) Successful in 32s
Frontend verify / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 6m51s
refactor: normalize view models and share breadcrumbs and titles (WealthLedger/frontend#143)
2026-11-04 18:01:20 +03:00

117 lines
2.9 KiB
TypeScript

import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { useCurrentRoute } from "@/app/model";
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 => {
useAppDocumentTitle(props.title);
};
type AccountDocumentTitleProps = {
accountId: string;
section?: string;
};
const AccountDocumentTitle: FC<AccountDocumentTitleProps> = (props) => {
const { t } = useTranslation();
const { data } = useBrokerageAccounts();
const accountName
= props.accountId === "all"
? t("accounts.all")
: (data?.find(account => account.id === props.accountId)?.name
?? t("account.title"));
let section = t("portfolio.title");
switch (props.section ?? "") {
case "income": {
section = t("income.title");
break;
}
case "operations": {
section = t("ledger.title");
break;
}
case "events": {
section = t("events.title");
break;
}
default: {
break;
}
}
return <DocumentTitle title={`${section} — ${accountName}`} />;
};
type InstrumentDocumentTitleProps = { identifier: string };
const BondDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
const { t } = useTranslation();
const { data } = useBond(props.identifier);
return <DocumentTitle title={data?.name ?? t("bond.instrument")} />;
};
const StockDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
const { t } = useTranslation();
const { data } = useStock(props.identifier);
return <DocumentTitle title={data?.name ?? t("stock.share")} />;
};
const CardDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
const { t } = useTranslation();
const { data } = useBankCard(props.identifier);
return <DocumentTitle title={data?.name ?? t("bank.card")} />;
};
const ProtectedDocumentTitle: FC = () => {
const { t } = useTranslation();
const {
account,
bond,
bonds,
card,
cards,
settings,
stock,
stocks,
} = useCurrentRoute();
if (card) return <CardDocumentTitle identifier={card.params.cardId ?? ""} />;
if (account)
return (
<AccountDocumentTitle
accountId={account.params.accountId ?? ""}
section={account.params.section}
/>
);
if (bond) return <BondDocumentTitle identifier={bond.params.bondId ?? ""} />;
if (stock)
return <StockDocumentTitle identifier={stock.params.stockId ?? ""} />;
if (cards) return <DocumentTitle title={t("navigation.cards")} />;
if (bonds) return <DocumentTitle title={t("navigation.bonds")} />;
if (stocks) return <DocumentTitle title={t("navigation.stocks")} />;
return settings
? <DocumentTitle title={t("navigation.settings")} />
: <DocumentTitle title={t("navigation.accounts")} />;
};
export { ProtectedDocumentTitle };