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