app/src/pages/Event.js (view raw)
1import React, {useState, useReducer, useEffect} from 'react';
2import {useTranslation} from 'react-i18next';
3import {useEvent, EventProvider} from '../contexts/Event';
4import Layout from '../layouts/Default';
5import Loading from './Loading';
6import EventAppBar from '../containers/EventAppBar';
7import EventFab from '../containers/EventFab';
8import CarColumns from '../containers/CarColumns';
9import NewCarDialog from '../containers/NewCarDialog';
10import AddToMyEventDialog from '../containers/AddToMyEventDialog';
11
12const Event = () => {
13 const {t} = useTranslation();
14 const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
15 const [detailsOpen, toggleDetails] = useReducer(i => !i, false);
16 const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
17 const {event, setIsEditing} = useEvent();
18
19 useEffect(() => {
20 window.scrollTo(0, 0);
21 }, []);
22
23 useEffect(() => {
24 if (!detailsOpen) setIsEditing(false);
25 }, [detailsOpen]); // eslint-disable-line react-hooks/exhaustive-deps
26
27 if (!event) return <Loading />;
28
29 return (
30 <Layout title={t('meta.event_title', {event})}>
31 <EventAppBar
32 detailsOpen={detailsOpen}
33 toggleDetails={toggleDetails}
34 setIsAddToMyEvent={setIsAddToMyEvent}
35 />
36 <CarColumns toggleNewCar={toggleNewCar} />
37 <EventFab toggleNewCar={toggleNewCar} open={openNewCar} />
38 <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
39 <AddToMyEventDialog
40 open={isAddToMyEvent}
41 onClose={() => setIsAddToMyEvent(false)}
42 event={event}
43 />
44 </Layout>
45 );
46};
47
48const EventWithContext = props => (
49 <EventProvider {...props}>
50 <Event {...props} />
51 </EventProvider>
52);
53export default EventWithContext;