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;