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 pageTitle={t('event.title')}
51 menuTitle={t('meta.title', {title: event.name})}
52 displayMenu={false}
53 >
54 <EventBar
55 event={event}
56 isEditing={isEditing}
57 setIsEditing={setIsEditing}
58 onAdd={setIsAddToMyEvent}
59 onSave={onSave}
60 onShare={onShare}
61 />
62 <CarColumns toggleNewCar={toggleNewCar} />
63 <Fab onClick={toggleNewCar} open={openNewCar} aria-label="add-car" />
64 <NewCarDialog open={openNewCar} toggle={toggleNewCar} />
65 <AddToMyEventDialog
66 event={event}
67 open={isAddToMyEvent}
68 onClose={() => setIsAddToMyEvent(false)}
69 />
70 </Layout>
71 );
72};
73
74const EventWithContext = props => (
75 <EventProvider {...props}>
76 <Event {...props} />
77 </EventProvider>
78);
79export default EventWithContext;