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;