+import axios from 'axios';
+import moment from 'moment';
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+import CanonicalLinks from '../common/CanonicalLinks';
+import ErrorBoundary from '../common/ErrorBoundary';
+import List from '../episodes/List';
+
+const Schedule = () => {
+ const [ahead, setAhead] = React.useState(6);
+ const [behind, setBehind] = React.useState(0);
+ const [episodes, setEpisodes] = React.useState([]);
+
+ const { t } = useTranslation();
+
+ React.useEffect(() => {
+ const controller = new AbortController();
+ axios.get(`/api/episodes`, {
+ signal: controller.signal,
+ params: {
+ after: moment().startOf('day').subtract(behind, 'days').toISOString(),
+ before: moment().startOf('day').add(ahead + 1, 'days').toISOString(),
+ },
+ }).then(response => {
+ setEpisodes(response.data || []);
+ }).catch(e => {
+ if (!axios.isCancel(e)) {
+ console.error(e);
+ }
+ });
+ return () => {
+ controller.abort();
+ };
+ }, [ahead, behind]);
+
+ return <Container>
+ <Helmet>
+ <title>{t('schedule.heading')}</title>
+ <meta name="description" content={t('schedule.description')} />
+ </Helmet>
+ <CanonicalLinks base="/schedule" />
+ <h1>{t('schedule.heading')}</h1>
+ <ErrorBoundary>
+ <List episodes={episodes} />
+ </ErrorBoundary>
+ </Container>;
+};
+
+export default Schedule;