diff --git a/apps/frontend/src/widgets/broker-account-layout/index.ts b/apps/frontend/src/widgets/broker-account-layout/index.ts index 1c833dc..004ed7c 100644 --- a/apps/frontend/src/widgets/broker-account-layout/index.ts +++ b/apps/frontend/src/widgets/broker-account-layout/index.ts @@ -1,3 +1,3 @@ export { useBrokerAccountContext } from './lib/useBrokerAccountContext' -export type { BrokerAccountContext } from './ui/BrokerAccountLayout' +export type { BrokerAccountContextValue } from './ui/BrokerAccountLayout' export { BrokerAccountLayout } from './ui/BrokerAccountLayout' diff --git a/apps/frontend/src/widgets/broker-account-layout/lib/useBrokerAccountContext.ts b/apps/frontend/src/widgets/broker-account-layout/lib/useBrokerAccountContext.ts index 680a26c..2df2875 100644 --- a/apps/frontend/src/widgets/broker-account-layout/lib/useBrokerAccountContext.ts +++ b/apps/frontend/src/widgets/broker-account-layout/lib/useBrokerAccountContext.ts @@ -1,6 +1,10 @@ -import { useParams } from '@tanstack/react-router' +import { useContext } from 'react' +import { BrokerAccountContext } from '../ui/BrokerAccountLayout' export function useBrokerAccountContext() { - const { accountId = '' } = useParams({ from: '/broker/$accountId' }) - return { accountId } + const context = useContext(BrokerAccountContext) + if (!context) { + throw new Error('useBrokerAccountContext must be used within BrokerAccountLayout') + } + return context } diff --git a/apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx b/apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx index 88a7b65..d524645 100644 --- a/apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx +++ b/apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx @@ -1,8 +1,10 @@ import { Heading } from '@moex-vibe/design-system' import { Box } from '@mui/material' +import type { UseQueryResult } from '@tanstack/react-query' import { Link, useParams } from '@tanstack/react-router' -import type { ReactNode } from 'react' +import { createContext, type ReactNode } from 'react' import { useBrokerPortfolio } from '@/entities/broker-account' +import type { BrokerPortfolio } from '@/shared/api' const baseLinkStyle: React.CSSProperties = { padding: '10px 12px', @@ -17,69 +19,79 @@ const baseLinkStyle: React.CSSProperties = { } const links = [ - { to: '.', label: 'Обзор' }, + { to: '', label: 'Обзор' }, { to: '/shares', label: 'Акции' }, { to: '/bonds', label: 'Облигации' }, { to: '/operations', label: 'Операции' }, { to: '/events', label: 'События' }, ] +export interface BrokerAccountContextValue { + accountId: string + portfolio: UseQueryResult +} + +export const BrokerAccountContext = createContext(null) + export function BrokerAccountLayout({ children }: { children: ReactNode }) { const { accountId = '' } = useParams({ from: '/broker/$accountId' }) const portfolio = useBrokerPortfolio(accountId) const basePath = `/broker/${encodeURIComponent(accountId)}` return ( - - - {portfolio.data?.account.name || 'Брокерский счёт'} - + + + + {portfolio.data?.account.name || 'Брокерский счёт'} + - - {links.map((link) => ( - - {link.label} - - ))} - + + {links.map((link) => ( + + {link.label} + + ))} + - {children} + {children} + - + ) }