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 {t} = useTranslation();
 54  const history = useHistory();
 55  const classes = useStyles();
 56  const goNewEvent = history.push.bind(undefined, '/new');
 57  const pastEvents = useMemo(
 58    () =>
 59      myEvents
 60        .filter(({date}) => {
 61          return date && moment(date).isBefore(moment(), 'day');
 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).isSameOrAfter(moment(), 'day');
 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    const {
 93      user: {events = []},
 94    } = authState;
 95    if (events.length > 0) {
 96      setIsLoading(true);
 97      fetchEvents(
 98        events
 99          .reduce((acc, eventId) => {
100            return acc + `id_in=${eventId}&`;
101          }, '')
102          .substring(-1)
103      ).then(() => setIsLoading(false));
104    } else {
105      setIsLoading(false);
106    }
107  }, [authState, token, fetchEvents]);
108
109  if (isLoading) return <Loading />;
110
111  if (!token || !myEvents) return <div>Not connected</div>;
112
113  if (!isLoading && myEvents.length === 0) {
114    return (
115      <>
116        <Menu />
117        <LayoutCentered title={t('meta.dashboard_title')}>
118          <EmptyDashboard />
119          <DashboardFab onClick={() => goNewEvent()} />
120        </LayoutCentered>
121      </>
122    );
123  }
124
125  return (
126    <>
127      <Menu />
128      <LayoutDefault className={classes.root} title={t('meta.dashboard_title')}>
129        <DashboardWithCard
130          pastEvents={pastEvents}
131          futureEvents={futureEvents}
132          noDateEvents={noDateEvents}
133        />
134        <DashboardFab onClick={() => goNewEvent()} />
135      </LayoutDefault>
136    </>
137  );
138};
139const useStyles = makeStyles(theme => ({
140  root: {
141    marginTop: '50px',
142  },
143}));
144export default Dashboard;