frontend/containers/DashboardEvents/index.js (view raw)
1import {makeStyles} from '@material-ui/core/styles';
2import Grid from '@material-ui/core/Grid';
3import {useTranslation} from 'react-i18next';
4import EventCard from './EventCard';
5import Section from './Section';
6
7const DashboardEvents = ({
8 futureEvents = [],
9 noDateEvents = [],
10 pastEvents = [],
11}) => {
12 const {t} = useTranslation();
13 const classes = useStyles();
14
15 return (
16 <Grid container className={classes.root} spacing={4}>
17 {futureEvents.length > 0 && (
18 <>
19 <Section>
20 {t('dashboard.sections.future', {
21 count: futureEvents.length,
22 })}
23 </Section>
24 {cardsForEvents(futureEvents)}
25 </>
26 )}
27 {noDateEvents.length > 0 && (
28 <>
29 <Section>
30 {t('dashboard.sections.noDate', {
31 count: noDateEvents.length,
32 })}
33 </Section>
34 {cardsForEvents(noDateEvents)}
35 </>
36 )}
37
38 {pastEvents.length > 0 && (
39 <>
40 <Section>
41 {t('dashboard.sections.past', {count: pastEvents.length})}
42 </Section>
43 {cardsForEvents(pastEvents)}
44 </>
45 )}
46 </Grid>
47 );
48};
49
50const cardsForEvents = events =>
51 events.map(event => (
52 <Grid item xs={12} md={3} lg={4} key={event.id}>
53 <EventCard event={event} />
54 </Grid>
55 ));
56
57const useStyles = makeStyles(theme => ({
58 root: {
59 flexGrow: 1,
60 width: '100%',
61 maxWidth: '90rem',
62 margin: '0 auto',
63 paddingBottom: theme.spacing(10),
64 },
65}));
66
67export default DashboardEvents;