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