]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/pages/Schedule.js
5f82bfe3347d322d0178b86da342209a2d8129b1
[alttp.git] / resources / js / components / pages / Schedule.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
8 import CanonicalLinks from '../common/CanonicalLinks';
9 import ErrorBoundary from '../common/ErrorBoundary';
10 import List from '../episodes/List';
11
12 const Schedule = () => {
13         const [ahead, setAhead] = React.useState(6);
14         const [behind, setBehind] = React.useState(0);
15         const [episodes, setEpisodes] = React.useState([]);
16
17         const { t } = useTranslation();
18
19         const fetchEpisodes = React.useCallback((controller, ahead, behind) => {
20                 axios.get(`/api/episodes`, {
21                         signal: controller.signal,
22                         params: {
23                                 after: moment().startOf('day').subtract(behind, 'days').toISOString(),
24                                 before: moment().startOf('day').add(ahead + 1, 'days').toISOString(),
25                         },
26                 }).then(response => {
27                         setEpisodes(response.data || []);
28                 }).catch(e => {
29                         if (!axios.isCancel(e)) {
30                                 console.error(e);
31                         }
32                 });
33         }, [setEpisodes]);
34
35         React.useEffect(() => {
36                 const controller = new AbortController();
37                 fetchEpisodes(controller, ahead, behind);
38                 const timer = setInterval(() => {
39                         fetchEpisodes(controller, ahead, behind);
40                 }, 5 * 60 * 1000);
41                 return () => {
42                         controller.abort();
43                         clearInterval(timer);
44                 };
45         }, [ahead, behind]);
46
47         return <Container>
48                 <Helmet>
49                         <title>{t('schedule.heading')}</title>
50                         <meta name="description" content={t('schedule.description')} />
51                 </Helmet>
52                 <CanonicalLinks base="/schedule" />
53                 <h1>{t('schedule.heading')}</h1>
54                 <ErrorBoundary>
55                         <List episodes={episodes} />
56                 </ErrorBoundary>
57         </Container>;
58 };
59
60 export default Schedule;