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;