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, fetchEpisodes]);
  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;