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