50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { NavLink, Outlet, useOutletContext, useParams } from 'react-router-dom';
|
||
import { useBrokerPortfolio } from '../../hooks/useBrokerPortfolio';
|
||
|
||
export type BrokerAccountContext = {
|
||
accountId: string;
|
||
portfolio: ReturnType<typeof useBrokerPortfolio>;
|
||
};
|
||
|
||
export function useBrokerAccountContext() {
|
||
return useOutletContext<BrokerAccountContext>();
|
||
}
|
||
|
||
export function BrokerAccountLayout() {
|
||
const { accountId = '' } = useParams();
|
||
const portfolio = useBrokerPortfolio(accountId);
|
||
const basePath = `/broker/${encodeURIComponent(accountId)}`;
|
||
const context: BrokerAccountContext = { accountId, portfolio };
|
||
const linkClassName = ({ isActive }: { isActive: boolean }) =>
|
||
`broker-account__link${isActive ? ' is-active' : ''}`;
|
||
|
||
return (
|
||
<div className="broker-account">
|
||
<header className="broker-account__header">
|
||
<h1>{portfolio.data?.account.name || 'Брокерский счёт'}</h1>
|
||
</header>
|
||
|
||
<div className="broker-account__workspace">
|
||
<nav className="broker-account__navigation" aria-label="Разделы брокерского счёта">
|
||
<NavLink className={linkClassName} end to={basePath}>
|
||
Обзор
|
||
</NavLink>
|
||
<NavLink className={linkClassName} to={`${basePath}/shares`}>
|
||
Акции
|
||
</NavLink>
|
||
<NavLink className={linkClassName} to={`${basePath}/bonds`}>
|
||
Облигации
|
||
</NavLink>
|
||
<NavLink className={linkClassName} to={`${basePath}/operations`}>
|
||
Операции
|
||
</NavLink>
|
||
</nav>
|
||
|
||
<div className="broker-account__content">
|
||
<Outlet context={context} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|