app/src/containers/Dashboard/Dashboard.js (view raw)
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={3} key={event.id}>
20 <EventCard event={event} />
21 </Grid>
22 ));
23
24 return (
25 <Grid container className={classes.root} spacing={4}>
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 margin: '0 auto',
55 },
56}));
57export default Dashboard;