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;