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;