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
 14interface PageProps {
 15  announcement?: string;
 16}
 17
 18const Dashboard = (props: PageProps) => {
 19  const {t} = useTranslation();
 20  const router = useRouter();
 21  const {profile, isReady} = useProfile();
 22  const events = profile?.events?.data || [];
 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.profile'),
 50      onClick: () => router.push('/profile'),
 51      id: 'ProfileTabs',
 52    },
 53    {divider: true},
 54    {
 55      label: t('menu.new_event'),
 56      onClick: () => router.push('/'),
 57      id: 'AddEventTabs',
 58    },
 59  ];
 60
 61  if (!events || !isReady)
 62    return (
 63      <LayoutDefault menuTitle={t('dashboard.title')} {...props}>
 64        <Loading />
 65      </LayoutDefault>
 66    );
 67
 68  return (
 69    <LayoutDefault
 70      menuActions={menuActions}
 71      menuTitle={t('dashboard.title')}
 72      {...props}
 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
 92export const getServerSideProps = async (context: any) => {
 93  const session = await getSession(context);
 94
 95  if (!session)
 96    return {
 97      redirect: {
 98        destination: '/',
 99        permanent: false,
100      },
101    };
102  else return pageUtils.getServerSideProps()(context);
103};
104
105export default Dashboard;