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.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 || !isReady)
 61    return (
 62      <LayoutDefault menuTitle={t('dashboard.title')} {...props}>
 63        <Loading />
 64      </LayoutDefault>
 65    );
 66
 67  return (
 68    <LayoutDefault
 69      menuActions={menuActions}
 70      menuTitle={t('dashboard.title')}
 71      {...props}
 72    >
 73      {events.length === 0 ? (
 74        <DashboardEmpty />
 75      ) : (
 76        <DashboardEvents
 77          pastEvents={pastEvents}
 78          futureEvents={futureEvents}
 79          noDateEvents={noDateEvents}
 80        />
 81      )}
 82      <Fab onClick={() => router.push('/')} aria-label="add-event">
 83        {t('dashboard.actions.add_event')}
 84      </Fab>
 85    </LayoutDefault>
 86  );
 87};
 88
 89const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
 90
 91export const getServerSideProps = async (context: any) => {
 92  const session = await getSession(context);
 93
 94  if (!session)
 95    return {
 96      redirect: {
 97        destination: '/',
 98        permanent: false,
 99      },
100    };
101  else return pageUtils.getServerSideProps()(context);
102};
103
104export default Dashboard;