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 + noDateEvents.length > 0 && (
22        <>
23          <Section>
24            {t('dashboard.sections.future', {
25              count: futureEvents.length + noDateEvents.length,
26            })}
27          </Section>
28          {cardsForEvents(futureEvents)}
29          {cardsForEvents(noDateEvents)}
30        </>
31      )}
32
33      {pastEvents.length > 0 && (
34        <>
35          <Section>
36            {t('dashboard.sections.past', {count: pastEvents.length})}
37          </Section>
38          {cardsForEvents(pastEvents)}
39        </>
40      )}
41    </Grid>
42  );
43};
44
45const useStyles = makeStyles(theme => ({
46  root: {
47    flexGrow: 1,
48    maxWidth: '90rem',
49    width: '100%',
50    margin: '0 auto',
51  },
52}));
53
54export default DashboardEvents;