1import {useMemo} from 'react';
 2import LayoutDefault from '../layouts/Default';
 3import moment from 'moment';
 4import {useRouter} from 'next/router';
 5import Loading from '../containers/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 useProfile from '../hooks/useProfile';
12import useAuthStore from '../stores/useAuthStore';
13
14const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
15
16const Dashboard = () => {
17  const isAuth = useAuthStore(s => !!s.token);
18  const {profile, isReady} = useProfile();
19  const router = useRouter();
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(
41    () => events.filter(({date}) => !date),
42    [events]
43  );
44
45  if (!isAuth || !isReady)
46    return (
47      <LayoutDefault menuTitle={t('dashboard.title')}>
48        <Loading />
49      </LayoutDefault>
50    );
51
52  const menuActions = [
53    {
54      label: t('menu.new_event'),
55      onClick: () => router.push('/'),
56      id: 'AddEventTabs',
57    },
58    {
59      label: t('menu.profile'),
60      onClick: () => router.push('/profile'),
61      id: 'ProfileTabs',
62    },
63  ];
64
65  return (
66    <LayoutDefault
67      className={classes.root}
68      menuActions={menuActions}
69      menuTitle={t('dashboard.title')}
70    >
71      {!events || events.length === 0 ? (
72        <DashboardEmpty />
73      ) : (
74        <DashboardEvents
75          pastEvents={pastEvents}
76          futureEvents={futureEvents}
77          noDateEvents={noDateEvents}
78        />
79      )}
80      <Fab onClick={() => router.push('/')} aria-label="add-event">
81        {t('dashboard.actions.add_event')}
82      </Fab>
83    </LayoutDefault>
84  );
85};
86const useStyles = makeStyles(theme => ({
87  root: {
88    marginTop: theme.mixins.toolbar.minHeight,
89  },
90}));
91export default Dashboard;