frontend/containers/EventBar/index.js (view raw)
1import {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 Avatar from '@material-ui/core/Avatar';
7import IconButton from '@material-ui/core/IconButton';
8import Icon from '@material-ui/core/Icon';
9import {makeStyles} from '@material-ui/core/styles';
10import {useTranslation} from 'react-i18next';
11import {useRouter} from 'next/router';
12import Link from 'next/link';
13import EventMenu from '../EventMenu';
14import EventDetails from '../EventDetails';
15import useAuthStore from '../../stores/useAuthStore';
16import useEventStore from '../../stores/useEventStore';
17import useProfile from '../../hooks/useProfile';
18import useSettings from '../../hooks/useSettings';
19
20const EventBar = ({event, onAdd, onSave, onShare}) => {
21 const {t} = useTranslation();
22 const router = useRouter();
23 const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
24 const [anchorEl, setAnchorEl] = useState(null);
25 const isEditing = useEventStore(s => s.isEditing);
26 const setIsEditing = useEventStore(s => s.setIsEditing);
27 const classes = useStyles({detailsOpen});
28 const token = useAuthStore(s => s.token);
29 const {user} = useProfile();
30 const settings = useSettings();
31
32 useEffect(() => {
33 if (!detailsOpen) setIsEditing(false);
34 }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
35
36 const signUp = () =>
37 router.push({
38 pathname: '/register',
39 state: {event: event?.id},
40 });
41 const signIn = () => router.push('/auth/login');
42 const goToDashboard = () => router.push('/dashboard');
43 const goProfile = () => router.push('/profile');
44
45 const noUserMenuActions = [
46 {
47 label: t('event.actions.add_to_my_events'),
48 onClick: () => {
49 onAdd(true);
50 },
51 id: 'AddToMyEventsTab',
52 },
53 {divider: true},
54 {
55 label: t('menu.login'),
56 onClick: signIn,
57 id: 'SignInTab',
58 },
59 {
60 label: t('menu.register'),
61 onClick: signUp,
62 id: 'SignUpTab',
63 },
64 ];
65
66 const loggedMenuActions = [
67 {
68 label: t('menu.dashboard'),
69 onClick: goToDashboard,
70 id: 'GoToDashboardTab',
71 },
72 {
73 label: t('menu.profile'),
74 onClick: goProfile,
75 id: 'ProfileTab',
76 },
77 {divider: true},
78 ];
79
80 const menuActions = token ? loggedMenuActions : noUserMenuActions;
81 const userInfos = user
82 ? [{label: user.username, id: 'Email'}, {divider: true}]
83 : [];
84
85 return (
86 <AppBar
87 position="static"
88 color="primary"
89 className={classes.appbar}
90 id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
91 >
92 <Toolbar>
93 <div className={classes.name}>
94 <Link
95 href={''}
96 onClick={() => {
97 window.location.href = settings['about_link'];
98 }}
99 >
100 <img className={classes.logo} src="/assets/logo.svg" alt="Logo" />
101 </Link>
102 <Typography variant="h6" noWrap id="MenuHeaderTitle">
103 {event.name}
104 </Typography>
105 {detailsOpen && (
106 <IconButton
107 color="inherit"
108 edge="end"
109 id="HeaderAction"
110 onClick={isEditing ? onSave : () => setIsEditing(true)}
111 >
112 <Icon>{isEditing ? 'done' : 'edit'}</Icon>
113 </IconButton>
114 )}
115 </div>
116 {detailsOpen ? (
117 <IconButton
118 color="inherit"
119 edge="end"
120 id="CloseDetailsBtn"
121 onClick={() => {
122 setIsEditing(false);
123 toggleDetails();
124 }}
125 >
126 <Icon>close</Icon>
127 </IconButton>
128 ) : (
129 <>
130 <IconButton
131 color="inherit"
132 edge="end"
133 id="ShareBtn"
134 onClick={toggleDetails}
135 className={classes.shareIcon}
136 >
137 <Icon>share</Icon>
138 </IconButton>
139 <IconButton
140 color="inherit"
141 edge="end"
142 id="ShareBtn"
143 onClick={toggleDetails}
144 className={classes.iconButtons}
145 >
146 <Icon>information_outline</Icon>
147 </IconButton>
148 <IconButton
149 color="inherit"
150 edge="end"
151 id="MenuMoreInfo"
152 onClick={e => setAnchorEl(e.currentTarget)}
153 >
154 {user ? (
155 <Avatar className={classes.avatar}>
156 {`${user.username[0]}`.toUpperCase()}
157 </Avatar>
158 ) : (
159 <Icon>more_vert</Icon>
160 )}
161 </IconButton>
162 </>
163 )}
164 <EventMenu
165 anchorEl={anchorEl}
166 setAnchorEl={setAnchorEl}
167 actions={[
168 ...userInfos,
169 ...[
170 {
171 label: detailsOpen
172 ? t('event.actions.hide_details')
173 : t('event.actions.show_details'),
174 onClick: toggleDetails,
175 id: 'DetailsTab',
176 },
177 ],
178 ...menuActions,
179 ]}
180 />
181 </Toolbar>
182 {detailsOpen && (
183 <Container className={classes.container} maxWidth="sm">
184 <EventDetails toggleDetails={toggleDetails} onShare={onShare} />
185 </Container>
186 )}
187 </AppBar>
188 );
189};
190
191const useStyles = makeStyles(theme => ({
192 container: {
193 padding: theme.spacing(2),
194 },
195 appbar: ({detailsOpen}) => ({
196 overflow: 'hidden',
197 height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
198 overflowY: detailsOpen ? 'scroll' : 'hidden',
199 transition: 'height 0.3s ease',
200 zIndex: theme.zIndex.appBar,
201 position: 'fixed',
202 top: 0,
203 }),
204 logo: {
205 marginRight: theme.spacing(2),
206 width: 32,
207 height: 32,
208 },
209 name: {
210 flexGrow: 1,
211 display: 'flex',
212 alignItems: 'center',
213 },
214 iconButtons: {
215 margin: theme.spacing(0),
216 },
217 avatar: {
218 width: theme.spacing(3),
219 height: theme.spacing(3),
220 fontSize: 16,
221 },
222 withDivider: {
223 borderBottom: `1px solid ${theme.palette.divider}`,
224 },
225}));
226
227export default EventBar;