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