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;