-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);
- }).catch(e => {
- if (!axios.isCancel(e)) {
- console.error(e);
- }
- });
- return () => {
- controller.abort();
- };
- }, []);
+import { isEventSelected, toggleEventFilter } from '../../helpers/Episode';
+const Filter = ({ events, filter, setFilter }) => {
const toggleEvent = React.useCallback(event => {
- const eventFilter = filter.event || [];
- if (eventFilter.includes(event.id)) {
- setFilter({
- ...filter,
- event: eventFilter.filter(id => id !== event.id && events.find(e => e.id === id)),
- });
- } else {
- setFilter({
- ...filter,
- event: [...eventFilter, event.id],
- });
- }
+ setFilter(toggleEventFilter(events, filter, event));
}, [events, filter, 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">
+ return <div className="episode-filter button-bar text-end">
{events.map(event =>
<Button
- active={isEventSelected(event)}
+ active={isEventSelected(filter, event)}
key={event.id}
onClick={() => toggleEvent(event)}
+ title={event.short ? event.title : null}
variant="outline-secondary"
>
- {event.title}
+ {event.short || event.title}
</Button>
)}
</div>;
};
Filter.propTypes = {
+ events: PropTypes.arrayOf(PropTypes.shape({
+ })),
filter: PropTypes.shape(),
setFilter: PropTypes.func,
};