1import React, {useState, useEffect} from 'react';
  2import {useTranslation} from 'react-i18next';
  3import {useAuth} from 'strapi-react-context';
  4import AppBar from '@material-ui/core/AppBar';
  5import Toolbar from '@material-ui/core/Toolbar';
  6import Container from '@material-ui/core/Container';
  7import Typography from '@material-ui/core/Typography';
  8import IconButton from '@material-ui/core/IconButton';
  9import Icon from '@material-ui/core/Icon';
 10import {makeStyles} from '@material-ui/core/styles';
 11import {useEvent} from '../../contexts/Event';
 12import {useToast} from '../../contexts/Toast';
 13import EventMenu from './EventMenu';
 14import EventDetails from '../EventDetails';
 15import {useHistory} from 'react-router-dom';
 16
 17const EventAppBar = ({detailsOpen, toggleDetails, setIsAddToMyEvent}) => {
 18  const {t} = useTranslation();
 19  const history = useHistory();
 20  const {addToast} = useToast();
 21  const [anchorEl, setAnchorEl] = useState(null);
 22  const classes = useStyles({detailsOpen});
 23  const {event, isEditing, setIsEditing, updateEvent} = useEvent();
 24  const {token} = useAuth();
 25
 26  useEffect(() => {
 27    window.scrollTo(0, 0);
 28  }, []);
 29
 30  useEffect(() => {
 31    if (!detailsOpen) setIsEditing(false);
 32  }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 33
 34  const onEventSave = async e => {
 35    try {
 36      await updateEvent();
 37      setIsEditing(false);
 38    } catch (error) {
 39      console.error(error);
 40      addToast(t('event.errors.cant_update'));
 41    }
 42  };
 43
 44  const onShare = async eventName => {
 45    if (!eventName) return null;
 46    // If navigator as share capability
 47    if (!!navigator.share)
 48      return await navigator.share({
 49        title: `Caroster ${eventName}`,
 50        url: `${window.location.href}`,
 51      });
 52    // Else copy URL in clipboard
 53    else if (!!navigator.clipboard) {
 54      await navigator.clipboard.writeText(window.location.href);
 55      addToast(t('event.actions.copied'));
 56      return true;
 57    }
 58  };
 59
 60  const addToMyEvents = () => {
 61    if (!event) return;
 62    window.localStorage.setItem('addToMyEvents', event.id);
 63    setIsAddToMyEvent(true);
 64  };
 65
 66  const signUp = () => {
 67    if (!event) return;
 68    history.push({
 69      pathname: '/register',
 70      state: {event: event.id},
 71    });
 72  };
 73
 74  const signIn = history.push.bind(undefined, '/login');
 75  const goToDashboard = history.push.bind(undefined, '/dashboard');
 76  const goProfile = history.push.bind(undefined, '/profile');
 77  const goAbout = () => (window.location.href = t('meta.about_href'));
 78
 79  return (
 80    <AppBar
 81      position="static"
 82      color="primary"
 83      className={classes.appbar}
 84      id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
 85    >
 86      <Toolbar>
 87        <div className={classes.name}>
 88          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 89            {event.name}
 90          </Typography>
 91          {detailsOpen && !isEditing && (
 92            <IconButton
 93              color="inherit"
 94              edge="end"
 95              id="CloseDetailsBtn"
 96              onClick={() => setIsEditing(true)}
 97            >
 98              <Icon>edit</Icon>
 99            </IconButton>
100          )}
101          {detailsOpen && isEditing && (
102            <IconButton
103              color="inherit"
104              edge="end"
105              id="EditEventSubmit"
106              onClick={onEventSave}
107            >
108              <Icon>done</Icon>
109            </IconButton>
110          )}
111        </div>
112        {detailsOpen ? (
113          <IconButton
114            color="inherit"
115            edge="end"
116            id="CloseDetailsBtn"
117            onClick={() => {
118              setIsEditing(false);
119              toggleDetails();
120            }}
121          >
122            <Icon>close</Icon>
123          </IconButton>
124        ) : (
125          <>
126            <IconButton
127              color="inherit"
128              edge="end"
129              id="ShareBtn"
130              onClick={onShare.bind(undefined, event?.name)}
131              className={classes.shareIcon}
132            >
133              <Icon>share</Icon>
134            </IconButton>
135            <IconButton
136              color="inherit"
137              edge="end"
138              id="MenuMoreInfo"
139              onClick={e => setAnchorEl(e.currentTarget)}
140            >
141              <Icon>more_vert</Icon>
142            </IconButton>
143          </>
144        )}
145        <EventMenu
146          anchorEl={anchorEl}
147          setAnchorEl={setAnchorEl}
148          actions={[
149            {
150              label: detailsOpen
151                ? t('event.actions.hide_details')
152                : t('event.actions.show_details'),
153              onClick: toggleDetails,
154              id: 'DetailsTab',
155            },
156            !token && {
157              label: t('event.actions.add_to_my_events'),
158              onClick: addToMyEvents,
159              id: 'AddToMyEventsTab',
160            },
161            !!token && {
162              label: t('menu.dashboard'),
163              onClick: goToDashboard,
164              id: 'GoToDashboardTab',
165            },
166            !token && {
167              label: t('menu.login'),
168              onClick: signIn,
169              id: 'SignInTab',
170            },
171            !token && {
172              label: t('menu.register'),
173              onClick: signUp,
174              id: 'SignUpTab',
175            },
176            !!token && {
177              label: t('menu.profile'),
178              onClick: goProfile,
179              id: 'ProfileTab',
180            },
181            {
182              label: t('menu.about'),
183              onClick: goAbout,
184              id: 'AboutTab',
185            },
186          ].filter(Boolean)}
187        />
188      </Toolbar>
189      <Container className={classes.container} maxWidth="sm">
190        <EventDetails toggleDetails={toggleDetails} />
191      </Container>
192    </AppBar>
193  );
194};
195
196const useStyles = makeStyles(theme => ({
197  container: {
198    padding: theme.spacing(2),
199  },
200  appbar: ({detailsOpen}) => ({
201    overflow: 'hidden',
202    height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
203    transition: 'height 0.3s ease',
204    zIndex: theme.zIndex.appBar,
205    position: 'fixed',
206    top: 0,
207  }),
208  name: {
209    flexGrow: 1,
210    display: 'flex',
211    alignItems: 'center',
212  },
213  shareIcon: {
214    marginRight: theme.spacing(0),
215  },
216}));
217
218export default EventAppBar;