]> git.localhorst.tv Git - alttp.git/blob - resources/js/pages/Event.js
compact keysanity tracker
[alttp.git] / resources / js / pages / Event.js
1 import axios from 'axios';
2 import moment from 'moment';
3 import React from 'react';
4 import { Container } from 'react-bootstrap';
5 import { Helmet } from 'react-helmet';
6 import { useTranslation } from 'react-i18next';
7 import { useParams } from 'react-router-dom';
8 import toastr from 'toastr';
9
10 import NotFound from './NotFound';
11 import CanonicalLinks from '../components/common/CanonicalLinks';
12 import ErrorBoundary from '../components/common/ErrorBoundary';
13 import ErrorMessage from '../components/common/ErrorMessage';
14 import Loading from '../components/common/Loading';
15 import EpisodeList from '../components/episodes/List';
16 import Detail from '../components/events/Detail';
17 import Dialog from '../components/techniques/Dialog';
18 import { hasConcluded } from '../helpers/Event';
19 import {
20         mayEditContent,
21 } from '../helpers/permissions';
22 import { getTranslation } from '../helpers/Technique';
23 import { useUser } from '../hooks/user';
24 import i18n from '../i18n';
25
26 export const Component = () => {
27         const params = useParams();
28         const { name } = params;
29         const { user } = useUser();
30         const { t } = useTranslation();
31
32         const [error, setError] = React.useState(null);
33         const [loading, setLoading] = React.useState(true);
34         const [event, setEvent] = React.useState(null);
35
36         const [editContent, setEditContent] = React.useState(null);
37         const [episodes, setEpisodes] = React.useState([]);
38         const [showContentDialog, setShowContentDialog] = React.useState(false);
39
40         const actions = React.useMemo(() => ({
41                 editContent: mayEditContent(user) ? content => {
42                         setEditContent(content);
43                         setShowContentDialog(true);
44                 } : null,
45         }), [user]);
46
47         const fetchEpisodes = React.useCallback((controller, event) => {
48                 if (!event) {
49                         setEpisodes([]);
50                         return;
51                 }
52                 const params = {
53                         event: [event.id],
54                 };
55                 if (hasConcluded(event)) {
56                         params.limit = 25;
57                         params.reverse = '1';
58                 } else {
59                         params.after = moment().subtract(3, 'hours').toISOString();
60                         params.before = moment().add(14, 'days').toISOString();
61                 }
62                 axios.get(`/api/episodes`, {
63                         signal: controller.signal,
64                         params,
65                 }).then(response => {
66                         setEpisodes(response.data || []);
67                 }).catch(e => {
68                         if (!axios.isCancel(e)) {
69                                 console.error(e);
70                         }
71                 });
72         }, []);
73
74         const saveContent = React.useCallback(async values => {
75                 try {
76                         const response = await axios.put(`/api/content/${values.id}`, {
77                                 parent_id: event.description_id,
78                                 ...values,
79                         });
80                         toastr.success(t('content.saveSuccess'));
81                         setEvent(event => ({
82                                 ...event,
83                                 description: response.data,
84                         }));
85                         setShowContentDialog(false);
86                 } catch (e) {
87                         toastr.error(t('content.saveError'));
88                 }
89         }, [event && event.description_id]);
90
91         React.useEffect(() => {
92                 const ctrl = new AbortController();
93                 setLoading(true);
94                 axios
95                         .get(`/api/events/${name}`, { signal: ctrl.signal })
96                         .then(response => {
97                                 setError(null);
98                                 setLoading(false);
99                                 setEvent(response.data);
100                         })
101                         .catch(error => {
102                                 setError(error);
103                                 setLoading(false);
104                                 setEvent(null);
105                         });
106                 return () => {
107                         ctrl.abort();
108                 };
109         }, [name]);
110
111         React.useEffect(() => {
112                 const controller = new AbortController();
113                 fetchEpisodes(controller, event);
114                 const timer = setInterval(() => {
115                         fetchEpisodes(controller, event);
116                 }, 1.5 * 60 * 1000);
117                 return () => {
118                         controller.abort();
119                         clearInterval(timer);
120                 };
121         }, [event, fetchEpisodes]);
122
123         if (loading) {
124                 return <Loading />;
125         }
126
127         if (error) {
128                 return <ErrorMessage error={error} />;
129         }
130
131         if (!event) {
132                 return <NotFound />;
133         }
134
135         return <ErrorBoundary>
136                 <Helmet>
137                         <title>
138                                 {(event.description && getTranslation(event.description, 'title', i18n.language))
139                                         || event.title}
140                         </title>
141                 </Helmet>
142                 {event.description ? <Helmet>
143                         <meta
144                                 name="description"
145                                 content={getTranslation(event.description, 'short', i18n.language)}
146                         />
147                 </Helmet> : null}
148                 <CanonicalLinks base={`/events/${event.name}`} />
149                 <Container>
150                         <Detail actions={actions} event={event} />
151                         {episodes.length ? <>
152                                 <h2 className="mt-4">
153                                         {t(hasConcluded(event)
154                                                 ? 'events.pastEpisodes'
155                                                 : 'events.upcomingEpisodes'
156                                         )}
157                                 </h2>
158                                 <EpisodeList episodes={episodes} />
159                         </> : null}
160                 </Container>
161                 <Dialog
162                         content={editContent}
163                         language={i18n.language}
164                         onHide={() => { setShowContentDialog(false); }}
165                         onSubmit={saveContent}
166                         show={showContentDialog}
167                 />
168         </ErrorBoundary>;
169 };