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 | 2x 12x 12x 2x 6x 10x 3x 7x 14x | /**
* EventList Component
*
* Story 2.5.3 - Task 8b (GREEN Phase)
* AC: 1 (Event Dashboard Display), 2 (Event List & Filters)
* Wireframe: docs/wireframes/story-1.16-event-management-dashboard.md v1.0
*
* Displays list of event cards in responsive grid layout
*/
import React from 'react';
import { Typography, Box, Skeleton } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTranslation } from 'react-i18next';
import { EventCard } from './EventCard';
import type { Event } from '@/types/event.types';
interface EventListProps {
events: Event[];
isLoading?: boolean;
onEventEdit?: (eventCode: string) => void;
onEventClick?: (eventCode: string) => void;
}
export const EventList: React.FC<EventListProps> = ({
events,
isLoading = false,
onEventEdit,
onEventClick,
}) => {
const { t } = useTranslation('events');
// Loading state with skeletons
if (isLoading) {
return (
<Grid container spacing={3} data-testid="event-list-container">
{[1, 2, 3].map((index) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
<Skeleton
variant="rectangular"
height={280}
data-testid={`skeleton-card-${index}`}
sx={{ borderRadius: 1 }}
/>
</Grid>
))}
</Grid>
);
}
// Empty state
if (events.length === 0) {
return (
<Box
textAlign="center"
py={8}
aria-label={t('accessibility.noEventsFound')}
data-testid="event-list-empty"
>
<Typography variant="h6" color="text.secondary" gutterBottom>
{t('dashboard.noEventsFound')}
</Typography>
<Typography variant="body2" color="text.secondary">
{t('dashboard.tryAdjustingFilters')}
</Typography>
</Box>
);
}
// Event grid
return (
<Box>
{/* Event cards grid */}
<Grid
container
spacing={3}
data-testid="event-list-container"
aria-label={t('accessibility.eventList')}
>
{events.map((event) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={event.eventCode}>
<Box data-testid={`event-card-${event.eventCode}`}>
<EventCard event={event} onEdit={onEventEdit} onCardClick={onEventClick} />
</Box>
</Grid>
))}
</Grid>
</Box>
);
};
|