1import React, {useMemo} from 'react';
 2import {useAuth} from 'strapi-react-context';
 3import LayoutDefault from '../layouts/Default';
 4import moment from 'moment';
 5import Loading from './Loading';
 6import DashboardEvents from '../containers/DashboardEvents';
 7import DashboardEmpty from '../containers/DashboardEmpty';
 8import Fab from '../containers/Fab';
 9import {useTranslation} from 'react-i18next';
10import {makeStyles} from '@material-ui/core/styles';
11import {useHistory} from 'react-router-dom';
12import useProfile from '../hooks/useProfile';
13
14const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
15
16const Dashboard = () => {
17  const {authState} = useAuth();
18  const {profile, isReady} = useProfile();
19  const history = useHistory();
20  const {t} = useTranslation();
21  const classes = useStyles();
22  const {events = []} = profile || {};
23
24  const pastEvents = useMemo(
25    () =>
26      events
27        .filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
28        .sort(sortDesc),
29    [events]
30  );
31
32  const futureEvents = useMemo(
33    () =>
34      events
35        .filter(({date}) => date && moment(date).isSameOrAfter(moment(), 'day'))
36        .sort(sortDesc),
37    [events]
38  );
39
40  const noDateEvents = useMemo(() => events.filter(({date}) => !date), [
41    events,
42  ]);
43
44  if (!authState || !isReady)
45    return (
46      <LayoutDefault menuTitle={t('dashboard.title')}>
47        <Loading />
48      </LayoutDefault>
49    );
50
51  const menuActions = [
52    {
53      label: t('menu.new_event'),
54      onClick: () => history.push('/new'),
55      id: 'AddEventTabs',
56    },
57    {
58      label: t('menu.profile'),
59      onClick: () => history.push('/profile'),
60      id: 'ProfileTabs',
61    },
62  ];
63
64  return (
65    <LayoutDefault
66      className={classes.root}
67      menuActions={menuActions}
68      menuTitle={t('dashboard.title')}
69    >
70      {!events || events.length === 0 ? (
71        <DashboardEmpty />
72      ) : (
73        <DashboardEvents
74          pastEvents={pastEvents}
75          futureEvents={futureEvents}
76          noDateEvents={noDateEvents}
77        />
78      )}
79      <Fab onClick={() => history.push('/new')} aria-label="add-event" />
80    </LayoutDefault>
81  );
82};
83const useStyles = makeStyles(theme => ({
84  root: {
85    marginTop: theme.mixins.toolbar.minHeight,
86  },
87}));
88export default Dashboard;