1 import axios from 'axios';
2 import moment from 'moment';
3 import PropTypes from 'prop-types';
4 import React from 'react';
5 import { Button } from 'react-bootstrap';
7 const Filter = ({ filter, setFilter }) => {
8 const [events, setEvents] = React.useState([]);
10 React.useEffect(() => {
11 const controller = new AbortController();
12 axios.get(`/api/events`, {
13 signal: controller.signal,
15 after: moment().startOf('day').subtract(7, 'days').toISOString(),
16 before: moment().startOf('day').add(8, 'days').toISOString(),
19 const newEvents = (response.data || []).sort(
20 (a, b) => (a.short || a.title).localeCompare(b.short || b.title)
24 if (!axios.isCancel(e)) {
33 const toggleEvent = React.useCallback(event => {
34 const eventFilter = filter.event || [];
35 if (eventFilter.includes(event.id)) {
38 event: eventFilter.filter(id => id !== event.id && events.find(e => e.id === id)),
43 event: [...eventFilter, event.id],
46 }, [events, filter, setFilter]);
48 const isEventSelected = React.useCallback(event => {
49 const eventFilter = filter.event || [];
50 return eventFilter.includes(event.id);
53 if (!events || !events.length) return null;
55 return <div className="episode-filter button-bar text-end">
58 active={isEventSelected(event)}
60 onClick={() => toggleEvent(event)}
61 title={event.short ? event.title : null}
62 variant="outline-secondary"
64 {event.short || event.title}
71 filter: PropTypes.shape(),
72 setFilter: PropTypes.func,
75 export default Filter;