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