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