66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import { useParams } from 'react-router-dom';
|
||
import { useStock, useStockCandles, useStockDividends } from '../entities/stock';
|
||
import { StockDetails } from '../components/StockDetails';
|
||
import { PriceChart } from '../components/PriceChart';
|
||
|
||
export function StockPage() {
|
||
const { secid } = useParams<{ secid: string }>();
|
||
const { data: stock, isLoading, error } = useStock(secid!);
|
||
const till = new Date().toISOString().split('T')[0];
|
||
const from = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
|
||
const { data: candles } = useStockCandles(secid!, '24h', from, till);
|
||
const { data: dividends } = useStockDividends(secid!);
|
||
|
||
if (isLoading) return <div>Загрузка...</div>;
|
||
if (error || !stock) return <div>Инструмент не найден</div>;
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<StockDetails stock={stock} />
|
||
|
||
<div
|
||
style={{
|
||
background: 'var(--color-surface)',
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--shadow)',
|
||
padding: 24,
|
||
}}
|
||
>
|
||
<h3 style={{ marginBottom: 16 }}>График цены</h3>
|
||
<PriceChart data={candles ?? []} />
|
||
</div>
|
||
|
||
{dividends && dividends.length > 0 && (
|
||
<div
|
||
style={{
|
||
background: 'var(--color-surface)',
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--shadow)',
|
||
padding: 24,
|
||
}}
|
||
>
|
||
<h3 style={{ marginBottom: 16 }}>Дивиденды</h3>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||
<thead>
|
||
<tr style={{ borderBottom: '2px solid #eee' }}>
|
||
<th style={{ textAlign: 'left', padding: 8 }}>Дата закрытия реестра</th>
|
||
<th style={{ textAlign: 'right', padding: 8 }}>Сумма</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{dividends.map((d, i) => (
|
||
<tr key={i} style={{ borderBottom: '1px solid #eee' }}>
|
||
<td style={{ padding: 8 }}>{d.registryCloseDate}</td>
|
||
<td style={{ textAlign: 'right', padding: 8 }}>
|
||
{d.value.toFixed(2)} {d.currency}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|