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';
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;