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';
 13
 14import {useHistory} from 'react-router-dom';
 15const Dashboard = () => {
 16  const [myEvents, setMyEvents] = useState([]);
 17  const [isLoading, setIsLoading] = useState(true);
 18  const {t} = useTranslation();
 19  const strapi = useStrapi();
 20  const {authState, token} = useAuth();
 21  const history = useHistory();
 22  const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
 23  const pastEvents = useMemo(
 24    () =>
 25      myEvents
 26        .filter(({date}) => {
 27          return date && moment(date).isBefore(moment());
 28        })
 29        .sort(sortDesc),
 30    [myEvents]
 31  );
 32  const noDateEvents = useMemo(
 33    () =>
 34      myEvents.filter(({date}) => {
 35        return !date;
 36      }),
 37    [myEvents]
 38  );
 39  const futureEvents = useMemo(
 40    () =>
 41      myEvents
 42        .filter(({date}) => {
 43          return date && moment(date).isAfter(moment());
 44        })
 45        .sort(sortDesc),
 46    [myEvents]
 47  );
 48  const fetchEvents = useCallback(
 49    async query => {
 50      const myEvents = await strapi.services.events.find(query);
 51      setMyEvents(myEvents);
 52    },
 53    [strapi.services.events]
 54  );
 55
 56  useEffect(() => {
 57    if (!token) return;
 58    setIsLoading(true);
 59    const {
 60      user: {events = []},
 61    } = authState;
 62    fetchEvents(
 63      events
 64        .reduce((acc, eventId) => {
 65          return acc + `id_in=${eventId}&`;
 66        }, '')
 67        .substring(-1)
 68    ).then(() => setIsLoading(false));
 69  }, [authState, token, fetchEvents]);
 70
 71  if (isLoading) return <Loading />;
 72
 73  if (!token || !myEvents) return <div>Not connected</div>;
 74
 75  if (!isLoading && myEvents.length === 0) {
 76    return (
 77      <LayoutCentered>
 78        <EmptyDashboard />
 79      </LayoutCentered>
 80    );
 81  }
 82  const goProfile = history.push.bind(undefined, '/profile');
 83  const goNewEvent = history.push.bind(undefined, '/new');
 84  const goAbout = () => (window.location.href = t('meta.about_href'));
 85
 86  return (
 87    <>
 88      <GenericMenu
 89        title={t('dashboard.title')}
 90        actions={[
 91          {
 92            label: t('dashboard.actions.add_event'),
 93            onClick: goNewEvent,
 94            id: 'AddEventTabs',
 95          },
 96          {
 97            label: t('dashboard.actions.see_profile'),
 98            onClick: goProfile,
 99            id: 'ProfileTabs',
100          },
101
102          {
103            label: t('dashboard.actions.about'),
104            onClick: goAbout,
105            id: 'AboutTabs',
106          },
107        ]}
108      />
109      <LayoutDefault>
110        <DashboardWithCard
111          pastEvents={pastEvents}
112          futureEvents={futureEvents}
113          noDateEvents={noDateEvents}
114        />
115        <DashboardFab onClick={() => goNewEvent()} />
116      </LayoutDefault>
117    </>
118  );
119};
120
121export default Dashboard;