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