1import {useMemo} 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  const pastEvents = useMemo(
23    () =>
24      events
25        .filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
26        .sort(sortDesc),
27    [events]
28  );
29
30  const futureEvents = useMemo(
31    () =>
32      events
33        .filter(({date}) => date && moment(date).isSameOrAfter(moment(), 'day'))
34        .sort(sortDesc),
35    [events]
36  );
37
38  const noDateEvents = useMemo(() => events.filter(({date}) => !date), [
39    events,
40  ]);
41
42  if (!isAuth || !isReady)
43    return (
44      <LayoutDefault menuTitle={t('dashboard.title')}>
45        <Loading />
46      </LayoutDefault>
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  return (
63    <LayoutDefault
64      className={classes.root}
65      menuActions={menuActions}
66      menuTitle={t('dashboard.title')}
67    >
68      {!events || events.length === 0 ? (
69        <DashboardEmpty />
70      ) : (
71        <DashboardEvents
72          pastEvents={pastEvents}
73          futureEvents={futureEvents}
74          noDateEvents={noDateEvents}
75        />
76      )}
77      <Fab onClick={() => router.push('/')} aria-label="add-event">
78        {t('dashboard.actions.add_event')}
79      </Fab>
80    </LayoutDefault>
81  );
82};
83
84const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
85
86const useStyles = makeStyles(theme => ({
87  root: {
88    marginTop: theme.mixins.toolbar.minHeight,
89  },
90}));
91
92export default Dashboard;