import axios from 'axios';
import moment from 'moment';
import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Alert, Container } from 'react-bootstrap';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import List from '../episodes/List';
const Schedule = () => {
- const [ahead, setAhead] = React.useState(6);
+ const [ahead, setAhead] = React.useState(14);
const [behind, setBehind] = React.useState(0);
const [episodes, setEpisodes] = React.useState([]);
const [filter, setFilter] = React.useState({});
const updateFilter = React.useCallback(newFilter => {
localStorage.setItem('episodes.filter.schedule', JSON.stringify(newFilter));
setFilter(newFilter);
- }, [setFilter]);
+ }, []);
const fetchEpisodes = React.useCallback((controller, ahead, behind, filter) => {
axios.get(`/api/episodes`, {
console.error(e);
}
});
- }, [setEpisodes]);
+ }, []);
React.useEffect(() => {
const controller = new AbortController();
<meta name="description" content={t('schedule.description')} />
</Helmet>
<CanonicalLinks base="/schedule" />
- <h1>{t('schedule.heading')}</h1>
+ <div className="d-flex align-items-start justify-content-between">
+ <h1>{t('schedule.heading')}</h1>
+ <div className="mt-5">
+ <Filter filter={filter} setFilter={updateFilter} />
+ </div>
+ </div>
<ErrorBoundary>
- <Filter filter={filter} setFilter={updateFilter} />
- <List episodes={episodes} />
+ {episodes.length ?
+ <List episodes={episodes} />
+ :
+ <Alert variant="info">
+ {t('episodes.empty')}
+ </Alert>
+ }
</ErrorBoundary>
</Container>;
};