1import {useMemo, useEffect} 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 Dashboard = () => {
15  const isAuth = useAuthStore(s => !!s.token);
16  const {profile, isReady} = useProfile();
17  const router = useRouter();
18  const {t} = useTranslation();
19  const classes = useStyles();
20  const {events = []} = profile || {};
21
22  useEffect(() => {
23    if (!isAuth) router.push('/');
24  }, [isAuth]);
25
26  const pastEvents = useMemo(
27    () =>
28      events
29        .filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
30        .sort(sortDesc),
31    [events]
32  );
33
34  const futureEvents = useMemo(
35    () =>
36      events
37        .filter(({date}) => date && moment(date).isSameOrAfter(moment(), 'day'))
38        .sort(sortDesc),
39    [events]
40  );
41
42  const noDateEvents = useMemo(() => events.filter(({date}) => !date), [
43    events,
44  ]);
45
46  if (!isAuth || !isReady)
47    return (
48      <LayoutDefault menuTitle={t('dashboard.title')}>
49        <Loading />
50      </LayoutDefault>
51    );
52
53  const menuActions = [
54    {
55      label: t('menu.new_event'),
56      onClick: () => router.push('/'),
57      id: 'AddEventTabs',
58    },
59    {
60      label: t('menu.profile'),
61      onClick: () => router.push('/profile'),
62      id: 'ProfileTabs',
63    },
64  ];
65
66  return (
67    <LayoutDefault
68      className={classes.root}
69      menuActions={menuActions}
70      menuTitle={t('dashboard.title')}
71    >
72      {!events || events.length === 0 ? (
73        <DashboardEmpty />
74      ) : (
75        <DashboardEvents
76          pastEvents={pastEvents}
77          futureEvents={futureEvents}
78          noDateEvents={noDateEvents}
79        />
80      )}
81      <Fab onClick={() => router.push('/')} aria-label="add-event">
82        {t('dashboard.actions.add_event')}
83      </Fab>
84    </LayoutDefault>
85  );
86};
87
88const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
89
90const useStyles = makeStyles(theme => ({
91  root: {
92    marginTop: theme.mixins.toolbar.minHeight,
93    height: '100vh',
94  },
95}));
96
97export default Dashboard;