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