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