1import React, {useEffect, useState, useCallback, useMemo} from 'react';
  2import {useStrapi, useAuth} from 'strapi-react-context';
  3import LayoutCentered from '../layouts/Centered';
  4import LayoutDefault from '../layouts/Default';
  5import moment from 'moment';
  6import Loading from './Loading';
  7import DashboardWithCard, {
  8  EmptyDashboard,
  9  DashboardFab,
 10} from '../containers/Dashboard';
 11import {useTranslation} from 'react-i18next';
 12import GenericMenu from '../containers/GenericMenu';
 13import {makeStyles} from '@material-ui/core/styles';
 14import {useHistory} from 'react-router-dom';
 15
 16const Menu = () => {
 17  const history = useHistory();
 18  const {t} = useTranslation();
 19  const goProfile = history.push.bind(undefined, '/profile');
 20  const goNewEvent = history.push.bind(undefined, '/new');
 21  const goAbout = () => (window.location.href = t('meta.about_href'));
 22
 23  return (
 24    <GenericMenu
 25      title={t('dashboard.title')}
 26      actions={[
 27        {
 28          label: t('menu.new_event'),
 29          onClick: goNewEvent,
 30          id: 'AddEventTabs',
 31        },
 32        {
 33          label: t('menu.profile'),
 34          onClick: goProfile,
 35          id: 'ProfileTabs',
 36        },
 37        {
 38          label: t('menu.about'),
 39          onClick: goAbout,
 40          id: 'AboutTabs',
 41        },
 42      ]}
 43    />
 44  );
 45};
 46const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
 47
 48const Dashboard = () => {
 49  const [myEvents, setMyEvents] = useState([]);
 50  const [isLoading, setIsLoading] = useState(true);
 51  const strapi = useStrapi();
 52  const {authState, token} = useAuth();
 53  const history = useHistory();
 54  const classes = useStyles();
 55  const goNewEvent = history.push.bind(undefined, '/new');
 56  const pastEvents = useMemo(
 57    () =>
 58      myEvents
 59        .filter(({date}) => {
 60          return date && moment(date).isBefore(moment(), 'day');
 61        })
 62        .sort(sortDesc),
 63    [myEvents]
 64  );
 65  const noDateEvents = useMemo(
 66    () =>
 67      myEvents.filter(({date}) => {
 68        return !date;
 69      }),
 70    [myEvents]
 71  );
 72  const futureEvents = useMemo(
 73    () =>
 74      myEvents
 75        .filter(({date}) => {
 76          return date && moment(date).isSameOrAfter(moment(), 'day');
 77        })
 78        .sort(sortDesc),
 79    [myEvents]
 80  );
 81  const fetchEvents = useCallback(
 82    async query => {
 83      const myEvents = await strapi.services.events.find(query);
 84      setMyEvents(myEvents);
 85    },
 86    [strapi.services.events]
 87  );
 88
 89  useEffect(() => {
 90    if (!token) return;
 91    const {
 92      user: {events = []},
 93    } = authState;
 94    if (events.length > 0) {
 95      setIsLoading(true);
 96      fetchEvents(
 97        events
 98          .reduce((acc, eventId) => {
 99            return acc + `id_in=${eventId}&`;
100          }, '')
101          .substring(-1)
102      ).then(() => setIsLoading(false));
103    } else {
104      setIsLoading(false);
105    }
106  }, [authState, token, fetchEvents]);
107
108  if (isLoading) return <Loading />;
109
110  if (!token || !myEvents) return <div>Not connected</div>;
111
112  if (!isLoading && myEvents.length === 0) {
113    return (
114      <>
115        <Menu />
116        <LayoutCentered>
117          <EmptyDashboard />
118          <DashboardFab onClick={() => goNewEvent()} />
119        </LayoutCentered>
120      </>
121    );
122  }
123
124  return (
125    <>
126      <Menu />
127      <LayoutDefault className={classes.root}>
128        <DashboardWithCard
129          pastEvents={pastEvents}
130          futureEvents={futureEvents}
131          noDateEvents={noDateEvents}
132        />
133        <DashboardFab onClick={() => goNewEvent()} />
134      </LayoutDefault>
135    </>
136  );
137};
138const useStyles = makeStyles(theme => ({
139  root: {
140    marginTop: '50px',
141  },
142}));
143export default Dashboard;