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 || [];
22 const eventFilter = filter.event || [];
25 event: eventFilter.filter(newEvents.find(id => newEvents.includes(id))),
29 if (!axios.isCancel(e)) {
36 }, [setEvents, setFilter]);
38 const toggleEvent = React.useCallback(event => {
40 const eventFilter = filter.event || [];
41 if (!eventFilter.includes(event.id)) {
44 event: [...eventFilter, event.id],
49 event: eventFilter.filter(id => id !== event.id),
54 const isEventSelected = React.useCallback(event => {
55 const eventFilter = filter.event || [];
56 return eventFilter.includes(event.id);
59 if (!events || !events.length) return null;
61 return <div className="episode-filter">
64 active={isEventSelected(event)}
66 onClick={() => toggleEvent(event)}
67 variant="outline-secondary"
76 filter: PropTypes.shape(),
77 setFilter: PropTypes.func,
80 export default Filter;