91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import React, { useEffect } from 'react';
|
||
|
||
import Box from '@mui/material/Box';
|
||
import Card from '@mui/material/Card';
|
||
import CardContent from '@mui/material/CardContent';
|
||
import CardHeader from '@mui/material/CardHeader';
|
||
import Container from '@mui/material/Container';
|
||
import Grid from '@mui/material/Grid';
|
||
import Link from '@mui/material/Link';
|
||
import Stack from '@mui/material/Stack';
|
||
import Typography from '@mui/material/Typography';
|
||
import { observer } from 'mobx-react-lite';
|
||
|
||
import { useStore } from '../../../shared/hooks/useStore.ts';
|
||
import { formatDate, getDateValue } from '../../news/utils/formatDate.ts';
|
||
|
||
const RecentNewsComponent: React.FC = () => {
|
||
const { news } = useStore();
|
||
|
||
useEffect(() => {
|
||
const load = async () => {
|
||
try {
|
||
await news.fetch({ limit: 10 });
|
||
} catch {
|
||
/* errors surfaced via store state */
|
||
}
|
||
};
|
||
|
||
void load();
|
||
}, [news]);
|
||
|
||
const visibleNews = news.list
|
||
.slice()
|
||
.sort((a, b) => getDateValue(b.publishedAt) - getDateValue(a.publishedAt))
|
||
.slice(0, 3);
|
||
|
||
const hasNews = visibleNews.length > 0;
|
||
|
||
return (
|
||
<Container maxWidth="lg">
|
||
<Box sx={{ display: { xs: 'none', md: 'flex', width: '100%' }, mt: '2rem' }}>
|
||
<Stack direction="column" spacing={2} sx={{ width: '100%' }}>
|
||
<Typography component="h2" variant="h2" gutterBottom sx={{ color: 'text.primary', textAlign: 'center' }}>
|
||
Последние новости
|
||
</Typography>
|
||
{news.isLoading && (
|
||
<Typography sx={{ textAlign: 'center' }} color="text.secondary">
|
||
Загружаем последние новости...
|
||
</Typography>
|
||
)}
|
||
{news.error && (
|
||
<Typography sx={{ textAlign: 'center' }} color="error">
|
||
{news.error}
|
||
</Typography>
|
||
)}
|
||
{hasNews && (
|
||
<Grid container spacing={2}>
|
||
{visibleNews.map((item) => (
|
||
<Grid key={item.id} size={{ xs: 12, md: 6, lg: 4 }}>
|
||
<Card
|
||
key={item.id}
|
||
variant="outlined"
|
||
sx={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
justifyContent: 'space-between',
|
||
flexGrow: 1,
|
||
height: '100%',
|
||
}}
|
||
>
|
||
<CardHeader title={item.title} subheader={formatDate(item.publishedAt)} />
|
||
<CardContent>
|
||
<Typography gutterBottom>{item.summary}</Typography>
|
||
<Link href={item.href}>Читать полностью</Link>
|
||
</CardContent>
|
||
</Card>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
)}
|
||
<Link href="/news" sx={{ alignSelf: 'center' }}>
|
||
Лента новостей
|
||
</Link>
|
||
</Stack>
|
||
</Box>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
export const RecentNews = observer(RecentNewsComponent);
|