1import React, {useEffect, useState, useCallback} from 'react';
 2import {useStrapi, useAuth} from 'strapi-react-context';
 3import Layout from '../layouts/Centered';
 4import Card from '@material-ui/core/Card';
 5import CardActions from '@material-ui/core/CardActions';
 6import CardContent from '@material-ui/core/CardContent';
 7import Grid from '@material-ui/core/Grid';
 8import {makeStyles} from '@material-ui/core/styles';
 9import Typography from '@material-ui/core/Typography';
10import Button from '@material-ui/core/Button';
11import {useTranslation} from 'react-i18next';
12const Dashboard = () => {
13  const classes = useStyles();
14  const {t} = useTranslation();
15  const [myEvents, setMyEvents] = useState([]);
16  const strapi = useStrapi();
17  const {authState, token} = useAuth();
18  const fetchEvents = useCallback(
19    async query => {
20      const myEvents = await strapi.services.events.find(query);
21      setMyEvents(myEvents);
22    },
23    [strapi.services.events]
24  );
25  useEffect(() => {
26    if (!token) return;
27    const {
28      user: {events = []},
29    } = authState;
30    fetchEvents(
31      events
32        .reduce((acc, eventId) => {
33          return acc + `id_in=${eventId}&`;
34        }, '')
35        .substring(-1)
36    );
37  }, [authState, token, fetchEvents]);
38
39  if (!token || !myEvents) return <div>Not connected</div>;
40
41  return (
42    <Layout>
43      <Grid container className={classes.root} spacing={2}>
44        <Grid item xs={6}>
45          <Grid container justify="center" spacing={4}>
46            {myEvents.map(event => (
47              <Grid key={event.id} item>
48                <Card className={classes.card}>
49                  <CardContent>
50                    <Typography gutterBottom variant="h5" component="h2">
51                      {event.name}
52                    </Typography>
53                    <Typography variant="body1">
54                      {t('event.fields.starts_on')}
55                    </Typography>
56
57                    <Typography variant="body2" gutterBottom>
58                      {event.date || t('event.fields.empty')}
59                    </Typography>
60
61                    <Typography variant="body1">
62                      {t('event.fields.address')}
63                    </Typography>
64                    <Typography variant="body2" gutterBottom>
65                      {event.address || t('event.fields.empty')}
66                    </Typography>
67                  </CardContent>
68                  <CardActions>
69                    <Button href={`/e/${event.id}`}>See event</Button>
70                  </CardActions>
71                </Card>
72              </Grid>
73            ))}
74          </Grid>
75        </Grid>
76      </Grid>
77    </Layout>
78  );
79};
80
81const useStyles = makeStyles(theme => ({
82  root: {
83    flexGrow: 1,
84  },
85  card: {
86    minWidth: '300px',
87  },
88}));
89export default Dashboard;