1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button } from 'react-bootstrap';
5 import { isEventSelected, toggleEventFilter } from '../../helpers/Episode';
7 const Filter = ({ events, filter, setFilter }) => {
8 const toggleEvent = React.useCallback(event => {
9 setFilter(toggleEventFilter(events, filter, event));
10 }, [events, filter, setFilter]);
12 if (!events || !events.length) return null;
14 return <div className="episode-filter button-bar text-end">
17 active={isEventSelected(filter, event)}
19 onClick={() => toggleEvent(event)}
20 title={event.short ? event.title : null}
21 variant="outline-secondary"
23 {event.short || event.title}
30 events: PropTypes.arrayOf(PropTypes.shape({
32 filter: PropTypes.shape(),
33 setFilter: PropTypes.func,
36 export default Filter;