1import {useMemo} from 'react';
  2import moment from 'moment';
  3import Cookies from 'cookies';
  4import {useRouter} from 'next/router';
  5import {getSession} from 'next-auth/react';
  6import {useTranslation} from 'react-i18next';
  7import LayoutDefault from '../layouts/Default';
  8import DashboardEvents from '../containers/DashboardEvents';
  9import DashboardEmpty from '../containers/DashboardEmpty';
 10import Loading from '../containers/Loading';
 11import Fab from '../containers/Fab';
 12import pageUtils from '../lib/pageUtils';
 13import useProfile from '../hooks/useProfile';
 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 = useMemo(() => profile?.events?.data || [], [profile]);
 24
 25  const pastEvents = useMemo(
 26    () =>
 27      events
 28        ?.filter(
 29          ({attributes: {date}}) =>
 30            date && moment(date).isBefore(moment(), 'day')
 31        )
 32        .sort(sortDesc),
 33    [events]
 34  );
 35
 36  const futureEvents = useMemo(
 37    () =>
 38      events
 39        ?.filter(
 40          ({attributes: {date}}) =>
 41            date && moment(date).isSameOrAfter(moment(), 'day')
 42        )
 43        .sort(sortDesc),
 44    [events]
 45  );
 46
 47  const noDateEvents = useMemo(
 48    () => events?.filter(({attributes: {date}}) => !date),
 49    [events]
 50  );
 51
 52  const menuActions = [
 53    {
 54      label: t('menu.profile'),
 55      onClick: () => router.push('/profile'),
 56      id: 'ProfileTabs',
 57    },
 58    {divider: true},
 59    {
 60      label: t('menu.new_event'),
 61      onClick: () => router.push('/new'),
 62      id: 'AddEventTabs',
 63    },
 64  ];
 65
 66  if (!events || !isReady)
 67    return (
 68      <LayoutDefault menuTitle={t('dashboard.title')} {...props}>
 69        <Loading />
 70      </LayoutDefault>
 71    );
 72
 73  return (
 74    <LayoutDefault
 75      menuActions={menuActions}
 76      menuTitle={t('dashboard.title')}
 77      {...props}
 78    >
 79      {events.length === 0 ? (
 80        <DashboardEmpty />
 81      ) : (
 82        <DashboardEvents
 83          pastEvents={pastEvents}
 84          futureEvents={futureEvents}
 85          noDateEvents={noDateEvents}
 86        />
 87      )}
 88      <Fab
 89        onClick={() => router.push('/new')}
 90        aria-label={t('dashboard.actions.add_event')}
 91        noDrawer
 92      >
 93        {t('dashboard.actions.add_event')}
 94      </Fab>
 95    </LayoutDefault>
 96  );
 97};
 98
 99const sortDesc = ({attributes: {date: dateA}}, {attributes: {date: dateB}}) =>
100  dateB.localeCompare(dateA);
101
102export const getServerSideProps = async (context: any) => {
103  const session = await getSession(context);
104
105  if (!session)
106    return {
107      redirect: {
108        destination: '/',
109        permanent: false,
110      },
111    };
112
113  const {provider, userCreatedAt} = session?.token || {};
114  const isFirstLogin = userCreatedAt
115    ? moment().subtract({seconds: 3}).isBefore(userCreatedAt)
116    : false;
117
118  if (provider === 'google' && isFirstLogin)
119    return {
120      redirect: {
121        destination: '/auth/confirm/google',
122        permanent: false,
123      },
124    };
125
126  const cookies = new Cookies(context.req, context.res);
127  const redirectPath = cookies.get('redirectPath');
128  if (redirectPath) {
129    cookies.set('redirectPath'); // Delete cookie
130    return {
131      redirect: {
132        destination: redirectPath,
133        permanent: false,
134      },
135    };
136  }
137
138  return pageUtils.getServerSideProps()(context);
139};
140
141export default Dashboard;