frontend/pages/dashboard.tsx (view raw)
1import {useMemo, useEffect} from 'react';
2import {useRouter} from 'next/router';
3import {makeStyles} from '@material-ui/core/styles';
4import moment from 'moment';
5import {useTranslation} from 'react-i18next';
6import useAuthStore from '../stores/useAuthStore';
7import useProfile from '../hooks/useProfile';
8import LayoutDefault from '../layouts/Default';
9import DashboardEvents from '../containers/DashboardEvents';
10import DashboardEmpty from '../containers/DashboardEmpty';
11import Loading from '../containers/Loading';
12import Fab from '../containers/Fab';
13
14const Dashboard = () => {
15 const {t} = useTranslation();
16 const router = useRouter();
17 const isAuth = useAuthStore(s => !!s.token);
18 const {profile, notReady} = useProfile();
19 const {events} = profile || {};
20 const classes = useStyles();
21
22 useEffect(() => {
23 if (!isAuth) router.push('/');
24 }, [isAuth]);
25
26 const pastEvents = useMemo(
27 () =>
28 events
29 ?.filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
30 .sort(sortDesc),
31 [events]
32 );
33
34 const futureEvents = useMemo(
35 () =>
36 events
37 ?.filter(
38 ({date}) => date && moment(date).isSameOrAfter(moment(), 'day')
39 )
40 .sort(sortDesc),
41 [events]
42 );
43
44 const noDateEvents = useMemo(
45 () => events?.filter(({date}) => !date),
46 [events]
47 );
48
49 const menuActions = [
50 {
51 label: t('menu.new_event'),
52 onClick: () => router.push('/'),
53 id: 'AddEventTabs',
54 },
55 {
56 label: t('menu.profile'),
57 onClick: () => router.push('/profile'),
58 id: 'ProfileTabs',
59 },
60 ];
61
62 if (!events || !isAuth || notReady)
63 return (
64 <LayoutDefault menuTitle={t('dashboard.title')}>
65 <Loading />
66 </LayoutDefault>
67 );
68
69 return (
70 <LayoutDefault
71 className={classes.root}
72 menuActions={menuActions}
73 menuTitle={t('dashboard.title')}
74 >
75 {events.length === 0 ? (
76 <DashboardEmpty />
77 ) : (
78 <DashboardEvents
79 pastEvents={pastEvents}
80 futureEvents={futureEvents}
81 noDateEvents={noDateEvents}
82 />
83 )}
84 <Fab onClick={() => router.push('/')} aria-label="add-event">
85 {t('dashboard.actions.add_event')}
86 </Fab>
87 </LayoutDefault>
88 );
89};
90
91const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
92
93const useStyles = makeStyles(theme => ({
94 root: {
95 minHeight: '100vh',
96 paddingTop: theme.mixins.toolbar.minHeight,
97 },
98}));
99
100export default Dashboard;