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';
12import {getSession} from 'next-auth/react';
13
14const Dashboard = () => {
15  const {t} = useTranslation();
16  const router = useRouter();
17  const {profile, isReady} = useProfile();
18  const events = profile?.events?.data || [];
19
20  const pastEvents = useMemo(
21    () =>
22      events
23        ?.filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
24        .sort(sortDesc),
25    [events]
26  );
27
28  const futureEvents = useMemo(
29    () =>
30      events
31        ?.filter(
32          ({date}) => date && moment(date).isSameOrAfter(moment(), 'day')
33        )
34        .sort(sortDesc),
35    [events]
36  );
37
38  const noDateEvents = useMemo(
39    () => events?.filter(({date}) => !date),
40    [events]
41  );
42
43  const menuActions = [
44    {
45      label: t('menu.new_event'),
46      onClick: () => router.push('/'),
47      id: 'AddEventTabs',
48    },
49    {
50      label: t('menu.profile'),
51      onClick: () => router.push('/profile'),
52      id: 'ProfileTabs',
53    },
54  ];
55
56  if (!events || !isReady)
57    return (
58      <LayoutDefault menuTitle={t('dashboard.title')}>
59        <Loading />
60      </LayoutDefault>
61    );
62
63  return (
64    <LayoutDefault menuActions={menuActions} menuTitle={t('dashboard.title')}>
65      {events.length === 0 ? (
66        <DashboardEmpty />
67      ) : (
68        <DashboardEvents
69          pastEvents={pastEvents}
70          futureEvents={futureEvents}
71          noDateEvents={noDateEvents}
72        />
73      )}
74      <Fab onClick={() => router.push('/')} aria-label="add-event">
75        {t('dashboard.actions.add_event')}
76      </Fab>
77    </LayoutDefault>
78  );
79};
80
81const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
82
83export const getServerSideProps = async (context: any) => {
84  const session = await getSession(context);
85
86  if (!session)
87    return {
88      redirect: {
89        destination: '/',
90        permanent: false,
91      },
92    };
93  else return pageUtils.getServerSideProps()(context);
94};
95
96export default Dashboard;