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