app/src/containers/EventBar/index.js (view raw)
1import React, {useEffect, useState, useReducer} from 'react';
2import AppBar from '@material-ui/core/AppBar';
3import Toolbar from '@material-ui/core/Toolbar';
4import Typography from '@material-ui/core/Typography';
5import Container from '@material-ui/core/Container';
6import IconButton from '@material-ui/core/IconButton';
7import Icon from '@material-ui/core/Icon';
8import {makeStyles} from '@material-ui/core/styles';
9import {useTranslation} from 'react-i18next';
10import {useHistory} from 'react-router-dom';
11import {useAuth} from 'strapi-react-context';
12import EventMenu from '../EventMenu';
13import EventDetails from '../EventDetails';
14
15const EventBar = ({event, isEditing, setIsEditing, onAdd, onSave, onShare}) => {
16 const {t} = useTranslation();
17 const history = useHistory();
18 const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
19 const [anchorEl, setAnchorEl] = useState(null);
20 const classes = useStyles({detailsOpen});
21 const {token} = useAuth();
22
23 useEffect(() => {
24 if (!detailsOpen) setIsEditing(false);
25 }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
26
27 const signUp = () =>
28 history.push({
29 pathname: '/register',
30 state: {event: event?.id},
31 });
32 const signIn = () => history.push('/login');
33 const goToDashboard = () => history.push('/dashboard');
34 const goProfile = () => history.push('/profile');
35
36 const noUserMenuActions = [
37 {
38 label: t('event.actions.add_to_my_events'),
39 onClick: () => {
40 onAdd(true);
41 },
42 id: 'AddToMyEventsTab',
43 },
44 {
45 label: t('menu.login'),
46 onClick: signIn,
47 id: 'SignInTab',
48 },
49 {
50 label: t('menu.register'),
51 onClick: signUp,
52 id: 'SignUpTab',
53 },
54 ];
55
56 const loggedMenuActions = [
57 {
58 label: t('menu.dashboard'),
59 onClick: goToDashboard,
60 id: 'GoToDashboardTab',
61 },
62 {
63 label: t('menu.profile'),
64 onClick: goProfile,
65 id: 'ProfileTab',
66 },
67 ];
68
69 const menuActions = token ? loggedMenuActions : noUserMenuActions;
70
71 return (
72 <AppBar
73 position="static"
74 color="primary"
75 className={classes.appbar}
76 id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
77 >
78 <Toolbar>
79 <div className={classes.name}>
80 <Typography variant="h6" noWrap id="MenuHeaderTitle">
81 {event.name}
82 </Typography>
83 {detailsOpen && (
84 <IconButton
85 color="inherit"
86 edge="end"
87 id="HeaderAction"
88 onClick={isEditing ? onSave : () => setIsEditing(true)}
89 >
90 <Icon>{isEditing ? 'done' : 'edit'}</Icon>
91 </IconButton>
92 )}
93 </div>
94 {detailsOpen ? (
95 <IconButton
96 color="inherit"
97 edge="end"
98 id="CloseDetailsBtn"
99 onClick={() => {
100 setIsEditing(false);
101 toggleDetails();
102 }}
103 >
104 <Icon>close</Icon>
105 </IconButton>
106 ) : (
107 <>
108 <IconButton
109 color="inherit"
110 edge="end"
111 id="ShareBtn"
112 onClick={onShare}
113 className={classes.shareIcon}
114 >
115 <Icon>share</Icon>
116 </IconButton>
117 <IconButton
118 color="inherit"
119 edge="end"
120 id="MenuMoreInfo"
121 onClick={e => setAnchorEl(e.currentTarget)}
122 >
123 <Icon>more_vert</Icon>
124 </IconButton>
125 </>
126 )}
127 <EventMenu
128 anchorEl={anchorEl}
129 setAnchorEl={setAnchorEl}
130 actions={[
131 ...[
132 {
133 label: detailsOpen
134 ? t('event.actions.hide_details')
135 : t('event.actions.show_details'),
136 onClick: toggleDetails,
137 id: 'DetailsTab',
138 },
139 ],
140 ...menuActions,
141 ]}
142 />
143 </Toolbar>
144 {detailsOpen && (
145 <Container className={classes.container} maxWidth="sm">
146 <EventDetails toggleDetails={toggleDetails} />
147 </Container>
148 )}
149 </AppBar>
150 );
151};
152
153const useStyles = makeStyles(theme => ({
154 container: {
155 padding: theme.spacing(2),
156 },
157 appbar: ({detailsOpen}) => ({
158 overflow: 'hidden',
159 height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
160 overflowY: detailsOpen ? 'scroll' : 'hidden',
161 transition: 'height 0.3s ease',
162 zIndex: theme.zIndex.appBar,
163 position: 'fixed',
164 top: 0,
165 }),
166 name: {
167 flexGrow: 1,
168 display: 'flex',
169 alignItems: 'center',
170 },
171 shareIcon: {
172 marginRight: theme.spacing(0),
173 },
174}));
175
176export default EventBar;