frontend/containers/EventBar/index.tsx (view raw)
1import Link from 'next/link';
2import AppBar from '@material-ui/core/AppBar';
3import Toolbar from '@material-ui/core/Toolbar';
4import Typography from '@material-ui/core/Typography';
5import IconButton from '@material-ui/core/IconButton';
6import Tooltip from '@material-ui/core/Tooltip';
7import Avatar from '@material-ui/core/Avatar';
8import Icon from '@material-ui/core/Icon';
9import {makeStyles} from '@material-ui/core/styles';
10import {useState} from 'react';
11import {useRouter} from 'next/router';
12import {useTranslation} from 'react-i18next';
13import useAuthStore from '../../stores/useAuthStore';
14import useProfile from '../../hooks/useProfile';
15import useShare from '../../hooks/useShare';
16import GenericMenu from '../GenericMenu';
17
18const EventBar = ({event, onAdd}) => {
19 const {t} = useTranslation();
20 const router = useRouter();
21 const {share} = useShare();
22 const [anchorEl, setAnchorEl] = useState(null);
23 const token = useAuthStore(s => s.token);
24 const {user} = useProfile();
25 const classes = useStyles();
26
27 const signUp = () =>
28 router.push({
29 pathname: '/auth/register',
30 state: {event: event?.id},
31 });
32 const signIn = () => router.push('/auth/login');
33 const goToDashboard = () => router.push('/dashboard');
34 const goProfile = () => router.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 {divider: true},
45 {
46 label: t('menu.login'),
47 onClick: signIn,
48 id: 'SignInTab',
49 },
50 {
51 label: t('menu.register'),
52 onClick: signUp,
53 id: 'SignUpTab',
54 },
55 {divider: true},
56 ];
57
58 const loggedMenuActions = [
59 {
60 label: t('menu.dashboard'),
61 onClick: goToDashboard,
62 id: 'GoToDashboardTab',
63 },
64 {
65 label: t('menu.profile'),
66 onClick: goProfile,
67 id: 'ProfileTab',
68 },
69 {divider: true},
70 ];
71
72 const menuActions = token ? loggedMenuActions : noUserMenuActions;
73 const userInfos = user
74 ? [{label: user.username, id: 'Email'}, {divider: true}]
75 : [];
76
77 const appLink = user ? '/dashboard' : `/e/${event.uuid}` || '';
78
79 const UserIcon = user ? (
80 <Avatar className={classes.avatar}>
81 {`${user.username[0]}`.toUpperCase()}
82 </Avatar>
83 ) : (
84 <Icon>more_vert</Icon>
85 );
86
87 return (
88 <AppBar
89 className={classes.appbar}
90 color="primary"
91 position="static"
92 id="Menu"
93 >
94 <Toolbar>
95 <div className={classes.name}>
96 <Link href={appLink}>
97 <img
98 className={classes.logo}
99 src="/assets/Logo_in_beta.svg"
100 alt="Logo"
101 />
102 </Link>
103 <Tooltip title={event.name}>
104 <Typography
105 variant="h6"
106 noWrap
107 id="MenuHeaderTitle"
108 className={classes.title}
109 >
110 {event.name}
111 </Typography>
112 </Tooltip>
113 </div>
114 <>
115 <IconButton
116 className={classes.shareIcon}
117 color="inherit"
118 edge="end"
119 id="ShareBtn"
120 onClick={() =>
121 share({
122 title: `Caroster ${event.name}`,
123 url: `${window.location.href}`,
124 })
125 }
126 >
127 <Icon>share</Icon>
128 </IconButton>
129 {
130 <GenericMenu
131 anchorEl={anchorEl}
132 setAnchorEl={setAnchorEl}
133 actions={[...userInfos, ...menuActions]}
134 />
135 }
136 <IconButton
137 color="inherit"
138 edge="end"
139 id="MenuMoreInfo"
140 onClick={e => setAnchorEl(e.currentTarget)}
141 >
142 {UserIcon}
143 </IconButton>
144 </>
145 </Toolbar>
146 </AppBar>
147 );
148};
149
150const useStyles = makeStyles(theme => ({
151 appbar: () => ({
152 overflow: 'hidden',
153 minHeight: theme.mixins.toolbar.minHeight,
154 overflowY: 'hidden',
155 transition: 'height 0.3s ease',
156 }),
157 logo: {
158 marginRight: theme.spacing(2),
159 width: 64,
160 height: 32,
161 cursor: 'pointer',
162 },
163 name: {
164 flexGrow: 1,
165 display: 'flex',
166 alignItems: 'center',
167 },
168 title: {
169 maxWidth: `calc(100vw - ${theme.spacing(30)}px)`,
170 },
171 iconButtons: {
172 margin: theme.spacing(0),
173 },
174 avatar: {
175 width: theme.spacing(3),
176 height: theme.spacing(3),
177 fontSize: 16,
178 },
179 shareIcon: {
180 marginRight: 0,
181 },
182}));
183
184export default EventBar;