import React, {useEffect, useState, useCallback, useMemo} from 'react';
import {useStrapi, useAuth} from 'strapi-react-context';
import LayoutCentered from '../layouts/Centered';
import LayoutDefault from '../layouts/Default';
import moment from 'moment';
import Loading from './Loading';
import DashboardWithCard, {
EmptyDashboard,
DashboardFab,
} from '../containers/Dashboard';
import {useTranslation} from 'react-i18next';
import GenericMenu from '../containers/GenericMenu';
import {makeStyles} from '@material-ui/core/styles';
import {useHistory} from 'react-router-dom';
const Menu = () => {
const history = useHistory();
const {t} = useTranslation();
const goProfile = history.push.bind(undefined, '/profile');
const goNewEvent = history.push.bind(undefined, '/new');
const goAbout = () => (window.location.href = t('meta.about_href'));
return (
);
};
const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
const Dashboard = () => {
const [myEvents, setMyEvents] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const strapi = useStrapi();
const {authState, token} = useAuth();
const history = useHistory();
const classes = useStyles();
const goNewEvent = history.push.bind(undefined, '/new');
const pastEvents = useMemo(
() =>
myEvents
.filter(({date}) => {
return date && moment(date).isBefore(moment(), 'day');
})
.sort(sortDesc),
[myEvents]
);
const noDateEvents = useMemo(
() =>
myEvents.filter(({date}) => {
return !date;
}),
[myEvents]
);
const futureEvents = useMemo(
() =>
myEvents
.filter(({date}) => {
return date && moment(date).isSameOrAfter(moment(), 'day');
})
.sort(sortDesc),
[myEvents]
);
const fetchEvents = useCallback(
async query => {
const myEvents = await strapi.services.events.find(query);
setMyEvents(myEvents);
},
[strapi.services.events]
);
useEffect(() => {
if (!token) return;
const {
user: {events = []},
} = authState;
if (events.length > 0) {
setIsLoading(true);
fetchEvents(
events
.reduce((acc, eventId) => {
return acc + `id_in=${eventId}&`;
}, '')
.substring(-1)
).then(() => setIsLoading(false));
} else {
setIsLoading(false);
}
}, [authState, token, fetchEvents]);
if (isLoading) return ;
if (!token || !myEvents) return
Not connected
;
if (!isLoading && myEvents.length === 0) {
return (
<>
goNewEvent()} />
>
);
}
return (
<>
goNewEvent()} />
>
);
};
const useStyles = makeStyles(theme => ({
root: {
marginTop: '50px',
},
}));
export default Dashboard;