app/src/pages/Dashboard.js (view raw)
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 label: t('dashboard.actions.about'),
103 onClick: goAbout,
104 id: 'AboutTabs',
105 },
106 ]}
107 />
108 <LayoutDefault>
109 <DashboardWithCard
110 pastEvents={pastEvents}
111 futureEvents={futureEvents}
112 noDateEvents={noDateEvents}
113 />
114 <DashboardFab onClick={() => goNewEvent()} />
115 </LayoutDefault>
116 </>
117 );
118};
119
120export default Dashboard;