app/src/pages/Event.js (view raw)
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>
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;