resources/js/components/episodes/Filter.js

   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';
   6
   7 const Filter = ({ filter, setFilter }) => {
   8         const [events, setEvents] = React.useState([]);
   9
  10         React.useEffect(() => {
  11                 const controller = new AbortController();
  12                 axios.get(`/api/events`, {
  13                         signal: controller.signal,
  14                         params: {
  15                                 after: moment().startOf('day').subtract(7, 'days').toISOString(),
  16                                 before: moment().startOf('day').add(8, 'days').toISOString(),
  17                         },
  18                 }).then(response => {
  19                         const newEvents = response.data || [];
  20                         setEvents(newEvents);
  21                         setFilter(filter => {
  22                                 const eventFilter = filter.event || [];
  23                                 return {
  24                                         ...filter,
  25                                         event: eventFilter.filter(newEvents.find(id => newEvents.includes(id))),
  26                                 };
  27                         });
  28                 }).catch(e => {
  29                         if (!axios.isCancel(e)) {
  30                                 console.error(e);
  31                         }
  32                 });
  33                 return () => {
  34                         controller.abort();
  35                 };
  36         }, [setEvents, setFilter]);
  37
  38         const toggleEvent = React.useCallback(event => {
  39                 setFilter(filter => {
  40                         const eventFilter = filter.event || [];
  41                         if (!eventFilter.includes(event.id)) {
  42                                 return {
  43                                         ...filter,
  44                                         event: [...eventFilter, event.id],
  45                                 };
  46                         }
  47                         return {
  48                                 ...filter,
  49                                 event: eventFilter.filter(id => id !== event.id),
  50                         };
  51                 });
  52         }, [setFilter]);
  53
  54         const isEventSelected = React.useCallback(event => {
  55                 const eventFilter = filter.event || [];
  56                 return eventFilter.includes(event.id);
  57         }, [filter]);
  58
  59         if (!events || !events.length) return null;
  60
  61         return <div className="episode-filter">
  62                 {events.map(event =>
  63                         <Button
  64                                 active={isEventSelected(event)}
  65                                 key={event.id}
  66                                 onClick={() => toggleEvent(event)}
  67                                 variant="outline-secondary"
  68                         >
  69                                 {event.title}
  70                         </Button>
  71                 )}
  72         </div>;
  73 };
  74
  75 Filter.propTypes = {
  76         filter: PropTypes.shape(),
  77         setFilter: PropTypes.func,
  78 };
  79
  80 export default Filter;