import Filter from '../episodes/Filter';
import List from '../episodes/List';
import RestreamDialog from '../episodes/RestreamDialog';
+import { toggleEventFilter } from '../../helpers/Episode';
import { withUser } from '../../helpers/UserContext';
const Schedule = ({ user }) => {
const [applyAs, setApplyAs] = React.useState('commentary');
const [behind] = React.useState(0);
const [episodes, setEpisodes] = React.useState([]);
+ const [events, setEvents] = React.useState([]);
const [filter, setFilter] = React.useState({});
const [restreamChannel, setRestreamChannel] = React.useState(null);
const [restreamEpisode, setRestreamEpisode] = React.useState(null);
}
}, []);
+ React.useEffect(() => {
+ const controller = new AbortController();
+ axios.get(`/api/events`, {
+ signal: controller.signal,
+ params: {
+ after: moment().startOf('day').subtract(7, 'days').toISOString(),
+ before: moment().startOf('day').add(8, 'days').toISOString(),
+ },
+ }).then(response => {
+ const newEvents = (response.data || []).sort(
+ (a, b) => (a.short || a.title).localeCompare(b.short || b.title)
+ );
+ setEvents(newEvents);
+ }).catch(e => {
+ if (!axios.isCancel(e)) {
+ console.error(e);
+ }
+ });
+ return () => {
+ controller.abort();
+ };
+ }, []);
+
const updateFilter = React.useCallback(newFilter => {
localStorage.setItem('episodes.filter.schedule', JSON.stringify(newFilter));
setFilter(newFilter);
}, []);
+ const invertFilter = React.useCallback(() => {
+ updateFilter(events.reduce((newFilter, event) => {
+ return toggleEventFilter(events, newFilter, event);
+ }, filter));
+ }, [events, filter]);
+
const fetchEpisodes = React.useCallback((controller, ahead, behind, filter) => {
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(),
+ after: moment().subtract(8, 'hours').subtract(behind, 'days').toISOString(),
+ before: moment().add(16, 'hours').add(ahead, 'days').toISOString(),
...filter,
},
}).then(response => {
<CanonicalLinks base="/schedule" />
<div className="d-flex align-items-end justify-content-between">
<h1 className="mb-0">{t('schedule.heading')}</h1>
- <Button
- onClick={toggleFilter}
- title={t('button.filter')}
- variant={filterButtonVariant}
- >
- <Icon.FILTER title="" />
- </Button>
+ <div className="button-bar">
+ {showFilter ?
+ <Button
+ onClick={invertFilter}
+ title={t('button.invert')}
+ variant="outline-secondary"
+ >
+ <Icon.INVERT title="" />
+ </Button>
+ : null}
+ <Button
+ onClick={toggleFilter}
+ title={t('button.filter')}
+ variant={filterButtonVariant}
+ >
+ <Icon.FILTER title="" />
+ </Button>
+ </div>
</div>
{showFilter ?
<div className="my-2">
- <Filter filter={filter} setFilter={updateFilter} />
+ <Filter events={events} filter={filter} setFilter={updateFilter} />
</div>
: null}
<ErrorBoundary>