option to invert event filter

[alttp.git] / resources / js / components / pages / Schedule.js

diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index dfac328b57dc484d5605570aee6024fb1e21f514..cac23e7e66d19e5cc39534db61a528ef6a50349f 100644 (file)
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -14,6 +14,7 @@ import ApplyDialog from '../episodes/ApplyDialog';
 import Filter from '../episodes/Filter';
 import List from '../episodes/List';
 import RestreamDialog from '../episodes/RestreamDialog';
+import { toggleEventFilter } from '../../helpers/Episode';
 import { withUser } from '../../helpers/UserContext';
 
 const Schedule = ({ user }) => {
@@ -21,6 +22,7 @@ const Schedule = ({ user }) => {
        const [applyAs, setApplyAs] = React.useState('commentary');
        const [behind] = React.useState(0);
        const [episodes, setEpisodes] = React.useState([]);
+       const [events, setEvents] = React.useState([]);
        const [filter, setFilter] = React.useState({});
        const [restreamChannel, setRestreamChannel] = React.useState(null);
        const [restreamEpisode, setRestreamEpisode] = React.useState(null);
@@ -39,11 +41,40 @@ const Schedule = ({ user }) => {
                }
        }, []);
 
+       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();
+               };
+       }, []);
+
        const updateFilter = React.useCallback(newFilter => {
                localStorage.setItem('episodes.filter.schedule', JSON.stringify(newFilter));
                setFilter(newFilter);
        }, []);
 
+       const invertFilter = React.useCallback(() => {
+               updateFilter(events.reduce((newFilter, event) => {
+                       return toggleEventFilter(events, newFilter, event);
+               }, filter));
+       }, [events, filter]);
+
        const fetchEpisodes = React.useCallback((controller, ahead, behind, filter) => {
                axios.get(`/api/episodes`, {
                        signal: controller.signal,
@@ -231,17 +262,28 @@ const Schedule = ({ user }) => {
                <CanonicalLinks base="/schedule" />
                <div className="d-flex align-items-end justify-content-between">
                        <h1 className="mb-0">{t('schedule.heading')}</h1>
-                       <Button
-                               onClick={toggleFilter}
-                               title={t('button.filter')}
-                               variant={filterButtonVariant}
-                       >
-                               <Icon.FILTER title="" />
-                       </Button>
+                       <div className="button-bar">
+                               {showFilter ?
+                                       <Button
+                                               onClick={invertFilter}
+                                               title={t('button.invert')}
+                                               variant="outline-secondary"
+                                       >
+                                               <Icon.INVERT title="" />
+                                       </Button>
+                               : null}
+                               <Button
+                                       onClick={toggleFilter}
+                                       title={t('button.filter')}
+                                       variant={filterButtonVariant}
+                               >
+                                       <Icon.FILTER title="" />
+                               </Button>
+                       </div>
                </div>
                {showFilter ?
                        <div className="my-2">
-                               <Filter filter={filter} setFilter={updateFilter} />
+                               <Filter events={events} filter={filter} setFilter={updateFilter} />
                        </div>
                : null}
                <ErrorBoundary>