app/src/pages/Dashboard.js (view raw)
1import React, {useMemo} from 'react';
2import {useAuth} from 'strapi-react-context';
3import LayoutDefault from '../layouts/Default';
4import moment from 'moment';
5import Loading from './Loading';
6import DashboardEvents from '../containers/DashboardEvents';
7import DashboardEmpty from '../containers/DashboardEmpty';
8import Fab from '../containers/Fab';
9import {useTranslation} from 'react-i18next';
10import {makeStyles} from '@material-ui/core/styles';
11import {useHistory} from 'react-router-dom';
12import useProfile from '../hooks/useProfile';
13
14const sortDesc = ({date: dateA}, {date: dateB}) => dateB.localeCompare(dateA);
15
16const Dashboard = () => {
17 const {authState} = useAuth();
18 const {profile, isReady} = useProfile();
19 const history = useHistory();
20 const {t} = useTranslation();
21 const classes = useStyles();
22 const {events = []} = profile || {};
23
24 const pastEvents = useMemo(
25 () =>
26 events
27 .filter(({date}) => date && moment(date).isBefore(moment(), 'day'))
28 .sort(sortDesc),
29 [events]
30 );
31
32 const futureEvents = useMemo(
33 () =>
34 events
35 .filter(({date}) => date && moment(date).isSameOrAfter(moment(), 'day'))
36 .sort(sortDesc),
37 [events]
38 );
39
40 const noDateEvents = useMemo(() => events.filter(({date}) => !date), [
41 events,
42 ]);
43
44 if (!authState || !isReady)
45 return (
46 <LayoutDefault menuTitle={t('dashboard.title')}>
47 <Loading />
48 </LayoutDefault>
49 );
50
51 const menuActions = [
52 {
53 label: t('menu.new_event'),
54 onClick: () => history.push('/new'),
55 id: 'AddEventTabs',
56 },
57 {
58 label: t('menu.profile'),
59 onClick: () => history.push('/profile'),
60 id: 'ProfileTabs',
61 },
62 ];
63
64 return (
65 <LayoutDefault
66 className={classes.root}
67 menuActions={menuActions}
68 menuTitle={t('dashboard.title')}
69 >
70 {!events || events.length === 0 ? (
71 <DashboardEmpty />
72 ) : (
73 <DashboardEvents
74 pastEvents={pastEvents}
75 futureEvents={futureEvents}
76 noDateEvents={noDateEvents}
77 />
78 )}
79 <Fab onClick={() => history.push('/new')} aria-label="add-event" />
80 </LayoutDefault>
81 );
82};
83const useStyles = makeStyles(theme => ({
84 root: {
85 marginTop: theme.mixins.toolbar.minHeight,
86 },
87}));
88export default Dashboard;