app/src/pages/Event.js (view raw)
1import React, {useState, useReducer, useEffect} from 'react';
2import {useTranslation} from 'react-i18next';
3import AppBar from '@material-ui/core/AppBar';
4import TextField from '../components/TextField';
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 Layout from '../layouts/Default';
12import EventMenu from '../containers/EventMenu';
13import EventDetails from '../containers/EventDetails';
14import EventFab from '../containers/EventFab';
15import {useEvent, EventProvider} from '../contexts/Event';
16import CarColumns from '../containers/CarColumns';
17import {useToast} from '../contexts/Toast';
18import NewCarDialog from '../containers/NewCarDialog';
19import Loading from '../pages/Loading';
20
21const Event = () => {
22 const {t} = useTranslation();
23 const {addToast} = useToast();
24 const [anchorEl, setAnchorEl] = useState(null);
25 const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
26 const classes = useStyles({detailsOpen});
27 const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
28 const {
29 event,
30 isEditing,
31 setIsEditing,
32 editingEvent,
33 setEditingEvent,
34 updateEvent,
35 } = useEvent();
36
37 useEffect(() => {
38 window.scrollTo(0, 0);
39 }, []);
40
41 useEffect(() => {
42 if (!detailsOpen) setIsEditing(false);
43 }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
44
45 const onEventSave = async e => {
46 try {
47 await updateEvent();
48 setIsEditing(false);
49 } catch (error) {
50 console.error(error);
51 addToast(t('event.errors.cant_update'));
52 }
53 };
54
55 if (!event) return <Loading />;
56
57 return (
58 <Layout>
59 <AppBar
60 position="static"
61 className={classes.appbar}
62 id={(isEditing && 'EditEvent') || (detailsOpen && 'Details') || 'Menu'}
63 >
64 <Toolbar>
65 {isEditing ? (
66 <TextField
67 light
68 value={editingEvent.name ?? event.name}
69 onChange={e =>
70 setEditingEvent({...editingEvent, name: e.target.value})
71 }
72 id="EditEventName"
73 name="name"
74 />
75 ) : (
76 <Typography
77 variant="h6"
78 className={classes.name}
79 id="MenuHeaderTitle"
80 >
81 {event.name}
82 </Typography>
83 )}
84 {!detailsOpen && (
85 <IconButton
86 edge="end"
87 id="MenuMoreInfo"
88 onClick={e => setAnchorEl(e.currentTarget)}
89 >
90 <Icon className={classes.barIcon}>more_vert</Icon>
91 </IconButton>
92 )}
93 {detailsOpen && !isEditing && (
94 <IconButton
95 edge="end"
96 id="DetailsEditBtn"
97 onClick={e => setIsEditing(true)}
98 >
99 <Icon className={classes.barIcon}>edit</Icon>
100 </IconButton>
101 )}
102 {detailsOpen && isEditing && (
103 <IconButton edge="end" id="EditEventSubmit" onClick={onEventSave}>
104 <Icon className={classes.barIcon}>done</Icon>
105 </IconButton>
106 )}
107 <EventMenu
108 anchorEl={anchorEl}
109 setAnchorEl={setAnchorEl}
110 actions={[
111 {
112 label: detailsOpen
113 ? t('event.actions.hide_details')
114 : t('event.actions.show_details'),
115 onClick: toggleDetails,
116 id: 'DetailsTab',
117 },
118 {
119 label: t('event.actions.add_car'),
120 onClick: toggleNewCar,
121 id: 'NewCarTab',
122 },
123 {
124 label: t('event.actions.invite'),
125 onClick: () => {},
126 id: 'InviteTab',
127 },
128 ]}
129 />
130 </Toolbar>
131 <Container className={classes.container} maxWidth="sm">
132 <EventDetails toggleDetails={toggleDetails} />
133 </Container>
134 </AppBar>
135 <CarColumns toggleNewCar={toggleNewCar} />
136 <EventFab toggleNewCar={toggleNewCar} />
137 <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
138 </Layout>
139 );
140};
141
142const useStyles = makeStyles(theme => ({
143 container: {padding: theme.spacing(2)},
144 appbar: ({detailsOpen}) => ({
145 transition: 'height 0.3s ease',
146 overflow: 'hidden',
147 height: detailsOpen ? '100vh' : theme.mixins.toolbar.minHeight,
148 zIndex: theme.zIndex.appBar,
149 }),
150 name: {
151 flexGrow: 1,
152 },
153 barIcon: {
154 color: 'white',
155 },
156}));
157
158const EventWithContext = props => (
159 <EventProvider {...props}>
160 <Event {...props} />
161 </EventProvider>
162);
163export default EventWithContext;