123 lines
3.0 KiB
TypeScript
123 lines
3.0 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { Link, useMatch } from "react-router";
|
|
import { useBrokerageAccounts } from "@/entities/brokerage-account";
|
|
import { useAuth } from "@/features/auth";
|
|
|
|
type Crumb = { label: string; to?: string };
|
|
|
|
function BreadcrumbTrail({ items }: { items: Crumb[] }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<nav
|
|
aria-label={t("breadcrumbs.label")}
|
|
className="breadcrumbs"
|
|
data-depth={items.length}
|
|
>
|
|
{items.map((item, index) => (
|
|
<span className="breadcrumbs-entry" key={item.to ?? item.label}>
|
|
{index ? (
|
|
<span
|
|
aria-hidden="true"
|
|
className={`breadcrumbs-separator-${index}`}
|
|
>
|
|
→
|
|
</span>
|
|
) : null}
|
|
<span className={`breadcrumbs-item-${index}`}>
|
|
{item.to ? (
|
|
<Link to={item.to}>{item.label}</Link>
|
|
) : (
|
|
<span aria-current="page">{item.label}</span>
|
|
)}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
function AccountBreadcrumbs({
|
|
accountId,
|
|
events,
|
|
operations,
|
|
}: {
|
|
accountId: string;
|
|
events: boolean;
|
|
operations: boolean;
|
|
}) {
|
|
const { accessToken } = useAuth();
|
|
const { data: accounts } = useBrokerageAccounts(accessToken);
|
|
const { t } = useTranslation();
|
|
const accountName =
|
|
accounts?.find((account) => account.id === accountId)?.name ??
|
|
t("breadcrumbs.accountFallback");
|
|
const accountPath = `/accounts/${accountId}`;
|
|
return (
|
|
<BreadcrumbTrail
|
|
items={
|
|
events
|
|
? [
|
|
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
|
{ label: accountName, to: accountPath },
|
|
{ label: t("breadcrumbs.events") },
|
|
]
|
|
: operations
|
|
? [
|
|
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
|
{ label: accountName, to: accountPath },
|
|
{ label: t("breadcrumbs.operations") },
|
|
]
|
|
: [
|
|
{ label: t("breadcrumbs.accounts"), to: "/accounts" },
|
|
{ label: accountName },
|
|
]
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function AppBreadcrumbs() {
|
|
const { t } = useTranslation();
|
|
const accountOperations = useMatch({
|
|
path: "/accounts/:accountId/operations",
|
|
end: true,
|
|
});
|
|
const accountEvents = useMatch({
|
|
path: "/accounts/:accountId/events",
|
|
end: true,
|
|
});
|
|
const account = useMatch({ path: "/accounts/:accountId", end: true });
|
|
const accounts = useMatch({ path: "/accounts", end: true });
|
|
const settings = useMatch({ path: "/settings", end: true });
|
|
|
|
if (accountOperations)
|
|
return (
|
|
<AccountBreadcrumbs
|
|
accountId={accountOperations.params.accountId ?? ""}
|
|
events={false}
|
|
operations
|
|
/>
|
|
);
|
|
if (accountEvents)
|
|
return (
|
|
<AccountBreadcrumbs
|
|
accountId={accountEvents.params.accountId ?? ""}
|
|
events
|
|
operations={false}
|
|
/>
|
|
);
|
|
if (account)
|
|
return (
|
|
<AccountBreadcrumbs
|
|
accountId={account.params.accountId ?? ""}
|
|
events={false}
|
|
operations={false}
|
|
/>
|
|
);
|
|
if (accounts)
|
|
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
|
|
if (settings)
|
|
return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
|
|
return null;
|
|
}
|