resources/js/components/episodes/Filter.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button } from 'react-bootstrap';
   4
   5 import { isEventSelected, toggleEventFilter } from '../../helpers/Episode';
   6
   7 const Filter = ({ events, filter, setFilter }) => {
   8         const toggleEvent = React.useCallback(event => {
   9                 setFilter(toggleEventFilter(events, filter, event));
  10         }, [events, filter, setFilter]);
  11
  12         if (!events || !events.length) return null;
  13
  14         return <div className="episode-filter button-bar text-end">
  15                 {events.map(event =>
  16                         <Button
  17                                 active={isEventSelected(filter, event)}
  18                                 key={event.id}
  19                                 onClick={() => toggleEvent(event)}
  20                                 title={event.short ? event.title : null}
  21                                 variant="outline-secondary"
  22                         >
  23                                 {event.short || event.title}
  24                         </Button>
  25                 )}
  26         </div>;
  27 };
  28
  29 Filter.propTypes = {
  30         events: PropTypes.arrayOf(PropTypes.shape({
  31         })),
  32         filter: PropTypes.shape(),
  33         setFilter: PropTypes.func,
  34 };
  35
  36 export default Filter;