frontend/pages/dashboard.tsx (view raw)
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;