+import axios from 'axios';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from 'react-bootstrap';
+
+const Filter = ({ filter, setFilter }) => {
+ const [events, setEvents] = React.useState([]);
+
+ 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 || [];
+ setEvents(newEvents);
+ setFilter(filter => {
+ const eventFilter = filter.event || [];
+ return {
+ ...filter,
+ event: eventFilter.filter(newEvents.find(id => newEvents.includes(id))),
+ };
+ });
+ }).catch(e => {
+ if (!axios.isCancel(e)) {
+ console.error(e);
+ }
+ });
+ return () => {
+ controller.abort();
+ };
+ }, [setEvents, setFilter]);
+
+ const toggleEvent = React.useCallback(event => {
+ setFilter(filter => {
+ const eventFilter = filter.event || [];
+ if (!eventFilter.includes(event.id)) {
+ return {
+ ...filter,
+ event: [...eventFilter, event.id],
+ };
+ }
+ return {
+ ...filter,
+ event: eventFilter.filter(id => id !== event.id),
+ };
+ });
+ }, [setFilter]);
+
+ const isEventSelected = React.useCallback(event => {
+ const eventFilter = filter.event || [];
+ return eventFilter.includes(event.id);
+ }, [filter]);
+
+ if (!events || !events.length) return null;
+
+ return <div className="episode-filter">
+ {events.map(event =>
+ <Button
+ active={isEventSelected(event)}
+ key={event.id}
+ onClick={() => toggleEvent(event)}
+ variant="outline-secondary"
+ >
+ {event.title}
+ </Button>
+ )}
+ </div>;
+};
+
+Filter.propTypes = {
+ filter: PropTypes.shape(),
+ setFilter: PropTypes.func,
+};
+
+export default Filter;