import React, {useState, useReducer, useEffect} from 'react';
import {useTranslation} from 'react-i18next';
import AppBar from '@material-ui/core/AppBar';
import TextField from '../components/TextField';
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,
editingEvent,
setEditingEvent,
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'));
}
};
if (!event) return ;
return (
{isEditing ? (
setEditingEvent({...editingEvent, name: e.target.value})
}
id="EditEventName"
name="name"
/>
) : (
)}
{!detailsOpen && (
)}
{detailsOpen && !isEditing && (
setIsEditing(true)}
>
edit
)}
{detailsOpen && isEditing && (
done
)}
{},
id: 'InviteTab',
},
]}
/>
);
};
const useStyles = makeStyles(theme => ({
container: {padding: theme.spacing(2)},
appbar: ({detailsOpen}) => ({
transition: 'height 0.3s ease',
overflow: 'hidden',
height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
zIndex: theme.zIndex.appBar,
}),
name: {
flexGrow: 1,
},
barIcon: {
color: 'white',
},
}));
export default props => (
);