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