Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import { HNItem } from '@/types/hackernews';
import { Box, Card, CardContent, Typography, Link, Chip } from '@mui/material';
import { useIntl, FormattedMessage } from 'react-intl';
import { Link as RouterLink } from 'react-router-dom';
import { formatRelativeTime } from '@/helpers/timeHelper';
import { extractDomain } from '@/helpers/urlHelper';
interface PostListItemProps {
item: Partial<HNItem>;
rank: number;
}
function PostListItem({ item, rank }: PostListItemProps) {
const intl = useIntl();
return (
<Card sx={{ mb: 2 }} data-testid="post-list-item" role="article" aria-label={`Post: ${item.title}`}>
<CardContent>
<Box sx={{ display: 'flex', gap: 2 }}>
<Typography variant="h6" color="text.secondary" sx={{ minWidth: '30px' }}>
{rank}.
</Typography>
<Box sx={{ flex: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
{item.url ? (
<Link
href={item.url}
target="_blank"
rel="noopener noreferrer"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
<Typography variant="h6" sx={{ '&:hover': { textDecoration: 'underline' } }}>
{item.title}
</Typography>
</Link>
) : (
<Typography variant="h6">{item.title}</Typography>
)}
{extractDomain(item.url) && (
<Typography variant="caption" color="text.secondary">
({extractDomain(item.url)})
</Typography>
)}
</Box>
<Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
{item.score !== undefined && (
<Chip
label={`${item.score} ${intl.formatMessage({ id: 'posts.points' })}`}
size="small"
color="primary"
/>
)}
{item.by && (
<Typography variant="body2" color="text.secondary">
by {item.by}
</Typography>
)}
{item.time && (
<Typography variant="body2" color="text.secondary">
{formatRelativeTime(item.time, intl)}
</Typography>
)}
{item.descendants !== undefined &&
(item.descendants === 0 ? (
<Typography variant="body2" color="primary" data-testid="post-no-comments">
<FormattedMessage id="posts.noComments" />
</Typography>
) : (
item.id && (
<Link
component={RouterLink}
to={`/comments/${item.id}`}
sx={{ textDecoration: 'none' }}
data-testid="post-comments-link"
>
<Typography variant="body2" color="primary" sx={{ '&:hover': { textDecoration: 'underline' } }}>
{item.descendants} comments
</Typography>
</Link>
)
))}
</Box>
</Box>
</Box>
</CardContent>
</Card>
);
}
export default PostListItem;
|