frontend/pages/dashboard.tsx (view raw)
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 = profile?.events?.data || [];
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('/'),
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('/')}
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;