1import React, {useState, useReducer} from 'react';
 2import {useTranslation} from 'react-i18next';
 3import {useEvent, EventProvider} from '../contexts/Event';
 4import {useToast} from '../contexts/Toast';
 5import Layout from '../layouts/Default';
 6import Fab from '../containers/Fab';
 7import CarColumns from '../containers/CarColumns';
 8import NewCarDialog from '../containers/NewCarDialog';
 9import AddToMyEventDialog from '../containers/AddToMyEventDialog';
10import Loading from './Loading';
11import EventBar from '../containers/EventBar';
12
13const Event = () => {
14  const {t} = useTranslation();
15  const {addToast} = useToast();
16  const [isAddToMyEvent, setIsAddToMyEvent] = useState(false);
17  const [openNewCar, toggleNewCar] = useReducer(i => !i, false);
18  const {event, isEditing, setIsEditing, updateEvent} = useEvent();
19
20  const onSave = async e => {
21    try {
22      await updateEvent();
23      setIsEditing(false);
24    } catch (error) {
25      console.error(error);
26      addToast(t('event.errors.cant_update'));
27    }
28  };
29
30  const onShare = async () => {
31    if (!event) return null;
32    // If navigator as share capability
33    if (!!navigator.share)
34      return await navigator.share({
35        title: `Caroster ${event.name}`,
36        url: `${window.location.href}`,
37      });
38    // Else copy URL in clipboard
39    else if (!!navigator.clipboard) {
40      await navigator.clipboard.writeText(window.location.href);
41      addToast(t('event.actions.copied'));
42      return true;
43    }
44  };
45
46  if (!event) return <Loading />;
47
48  return (
49    <Layout menuTitle={t('meta.title', {title: event.name})}>
50      <EventBar
51        event={event}
52        isEditing={isEditing}
53        setIsEditing={setIsEditing}
54        onAdd={setIsAddToMyEvent}
55        onSave={onSave}
56        onShare={onShare}
57      />
58      <CarColumns toggleNewCar={toggleNewCar} />
59      <Fab onClick={toggleNewCar} open={openNewCar} aria-label="add-car" />
60      <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
61      <AddToMyEventDialog
62        event={event}
63        open={isAddToMyEvent}
64        onClose={() => setIsAddToMyEvent(false)}
65      />
66    </Layout>
67  );
68};
69
70const EventWithContext = props => (
71  <EventProvider {...props}>
72    <Event {...props} />
73  </EventProvider>
74);
75export default EventWithContext;