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