]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/pages/Schedule.js
14d0891707e23a59da9b444c6c9cb5b115bd293d
[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         React.useEffect(() => {
20                 const controller = new AbortController();
21                 axios.get(`/api/episodes`, {
22                         signal: controller.signal,
23                         params: {
24                                 after: moment().startOf('day').subtract(behind, 'days').toISOString(),
25                                 before: moment().startOf('day').add(ahead + 1, 'days').toISOString(),
26                         },
27                 }).then(response => {
28                         setEpisodes(response.data || []);
29                 }).catch(e => {
30                         if (!axios.isCancel(e)) {
31                                 console.error(e);
32                         }
33                 });
34                 return () => {
35                         controller.abort();
36                 };
37         }, [ahead, behind]);
38
39         return <Container>
40                 <Helmet>
41                         <title>{t('schedule.heading')}</title>
42                         <meta name="description" content={t('schedule.description')} />
43                 </Helmet>
44                 <CanonicalLinks base="/schedule" />
45                 <h1>{t('schedule.heading')}</h1>
46                 <ErrorBoundary>
47                         <List episodes={episodes} />
48                 </ErrorBoundary>
49         </Container>;
50 };
51
52 export default Schedule;