option to invert event filter

[alttp.git] / resources / js / components / episodes / Filter.js

diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index 06dcf13f65501839f08090b58754c69d35fafa1f..98d965dd3ff902751164140df20a79cc280b211d 100644 (file)
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -1,61 +1,20 @@
-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 || []).sort(
-                               (a, b) => (a.short || a.title).localeCompare(b.short || b.title)
-                       );
-                       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 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}
@@ -68,6 +27,8 @@ const Filter = ({ filter, setFilter }) => {
 };
 
 Filter.propTypes = {
+       events: PropTypes.arrayOf(PropTypes.shape({
+       })),
        filter: PropTypes.shape(),
        setFilter: PropTypes.func,
 };