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