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 { withTranslation } from 'react-i18next';
7 import { useParams } from 'react-router-dom';
8 import toastr from 'toastr';
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';
20 } from '../helpers/permissions';
21 import { getTranslation } from '../helpers/Technique';
22 import { useUser } from '../helpers/UserContext';
23 import i18n from '../i18n';
26 const params = useParams();
27 const { name } = params;
28 const user = useUser();
30 const [error, setError] = React.useState(null);
31 const [loading, setLoading] = React.useState(true);
32 const [event, setEvent] = React.useState(null);
34 const [editContent, setEditContent] = React.useState(null);
35 const [episodes, setEpisodes] = React.useState([]);
36 const [showContentDialog, setShowContentDialog] = React.useState(false);
38 const actions = React.useMemo(() => ({
39 editContent: mayEditContent(user) ? content => {
40 setEditContent(content);
41 setShowContentDialog(true);
45 const fetchEpisodes = React.useCallback((controller, event) => {
50 axios.get(`/api/episodes`, {
51 signal: controller.signal,
53 after: moment().subtract(3, 'hours').toISOString(),
54 before: moment().add(14, 'days').toISOString(),
58 setEpisodes(response.data || []);
60 if (!axios.isCancel(e)) {
66 const saveContent = React.useCallback(async values => {
68 const response = await axios.put(`/api/content/${values.id}`, {
69 parent_id: event.description_id,
72 toastr.success(i18n.t('content.saveSuccess'));
75 description: response.data,
77 setShowContentDialog(false);
79 toastr.error(i18n.t('content.saveError'));
81 }, [event && event.description_id]);
83 React.useEffect(() => {
84 const ctrl = new AbortController();
87 .get(`/api/events/${name}`, { signal: ctrl.signal })
91 setEvent(response.data);
103 React.useEffect(() => {
104 const controller = new AbortController();
105 fetchEpisodes(controller, event);
106 const timer = setInterval(() => {
107 fetchEpisodes(controller, event);
111 clearInterval(timer);
113 }, [event, fetchEpisodes]);
120 return <ErrorMessage error={error} />;
127 return <ErrorBoundary>
130 {(event.description && getTranslation(event.description, 'title', i18n.language))
134 {event.description ? <Helmet>
137 content={getTranslation(event.description, 'short', i18n.language)}
140 <CanonicalLinks base={`/events/${event.name}`} />
142 <Detail actions={actions} event={event} />
143 {episodes.length ? <>
144 <h2 className="mt-4">{i18n.t('events.upcomingEpisodes')}</h2>
145 <EpisodeList episodes={episodes} />
149 content={editContent}
150 language={i18n.language}
151 onHide={() => { setShowContentDialog(false); }}
152 onSubmit={saveContent}
153 show={showContentDialog}
158 export default withTranslation()(Event);