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 };