import React, {useState, useReducer, useEffect} from 'react';
import {useTranslation} from 'react-i18next';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Icon from '@material-ui/core/Icon';
import {makeStyles} from '@material-ui/core/styles';
import Layout from '../layouts/Default';
import EventMenu from '../containers/EventMenu';
import EventDetails from '../containers/EventDetails';
import EventFab from '../containers/EventFab';
import {useEvent, EventProvider} from '../contexts/Event';
import CarColumns from '../containers/CarColumns';
import {useToast} from '../contexts/Toast';
import NewCarDialog from '../containers/NewCarDialog';
import Loading from '../pages/Loading';
const Event = () => {
const {t} = useTranslation();
const {addToast} = useToast();
const [anchorEl, setAnchorEl] = useState(null);
const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
const classes = useStyles({detailsOpen});
const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
const {event, isEditing, setIsEditing, updateEvent} = useEvent();
useEffect(() => {
window.scrollTo(0, 0);
}, []);
useEffect(() => {
if (!detailsOpen) setIsEditing(false);
}, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
const onEventSave = async e => {
try {
await updateEvent();
setIsEditing(false);
} catch (error) {
console.error(error);
addToast(t('event.errors.cant_update'));
}
};
const onShare = async () => {
if (!event) return null;
// If navigator as share capability
if (!!navigator.share)
return await navigator.share({
title: `Caroster ${event.name}`,
url: `${window.location.href}`,
});
// Else copy URL in clipboard
else if (!!navigator.clipboard) {
await navigator.clipboard.writeText(window.location.href);
addToast(t('event.actions.copied'));
return true;
}
};
if (!event) return ;
return (
{!detailsOpen && (
<>
share
>
)}
{detailsOpen && !isEditing && (
close
)}
{detailsOpen && isEditing && (
done
)}
{},
id: 'InviteTab',
},
]}
/>
);
};
const useStyles = makeStyles(theme => ({
container: {
padding: theme.spacing(2),
},
appbar: ({detailsOpen}) => ({
overflow: 'hidden',
height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
transition: 'height 0.3s ease',
zIndex: theme.zIndex.appBar,
position: 'fixed',
top: 0,
}),
name: {
flexGrow: 1,
},
shareIcon: {
marginRight: theme.spacing(2),
},
}));
const EventWithContext = props => (
);
export default EventWithContext;