WIP 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 c27a384a5fdddc8bbd527abb97e550b5e1057ee1..2e97af9e4437ba6ee49cb5b646a5ff920e482644 100644 (file)
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -7,21 +7,38 @@ import { useTranslation } from 'react-i18next';
 
 import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
+import Filter from '../episodes/Filter';
 import List from '../episodes/List';
 
 const Schedule = () => {
        const [ahead, setAhead] = React.useState(6);
        const [behind, setBehind] = React.useState(0);
        const [episodes, setEpisodes] = React.useState([]);
+       const [filter, setFilter] = React.useState({});
 
        const { t } = useTranslation();
 
-       const fetchEpisodes = React.useCallback((controller, ahead, behind) => {
+       React.useEffect(() => {
+               const savedFilter = localStorage.getItem('episodes.filter.schedule');
+               if (savedFilter) {
+                       setFilter(JSON.parse(savedFilter));
+               } else {
+                       setFilter(filter => filter ? {} : filter);
+               }
+       }, []);
+
+       const updateFilter = React.useCallback(newFilter => {
+               localStorage.setItem('episodes.filter.schedule', JSON.stringify(newFilter));
+               setFilter(newFilter);
+       }, [setFilter]);
+
+       const fetchEpisodes = React.useCallback((controller, ahead, behind, filter) => {
                axios.get(`/api/episodes`, {
                        signal: controller.signal,
                        params: {
                                after: moment().startOf('day').subtract(behind, 'days').toISOString(),
                                before: moment().startOf('day').add(ahead + 1, 'days').toISOString(),
+                               ...filter,
                        },
                }).then(response => {
                        setEpisodes(response.data || []);
@@ -34,15 +51,15 @@ const Schedule = () => {
 
        React.useEffect(() => {
                const controller = new AbortController();
-               fetchEpisodes(controller, ahead, behind);
+               fetchEpisodes(controller, ahead, behind, filter);
                const timer = setInterval(() => {
-                       fetchEpisodes(controller, ahead, behind);
-               }, 5 * 60 * 1000);
+                       fetchEpisodes(controller, ahead, behind, filter);
+               }, 3 * 60 * 1000);
                return () => {
                        controller.abort();
                        clearInterval(timer);
                };
-       }, [ahead, behind, fetchEpisodes]);
+       }, [ahead, behind, fetchEpisodes, filter]);
 
        return <Container>
                <Helmet>
@@ -52,6 +69,7 @@ const Schedule = () => {
                <CanonicalLinks base="/schedule" />
                <h1>{t('schedule.heading')}</h1>
                <ErrorBoundary>
+                       <Filter filter={filter} setFilter={updateFilter} />
                        <List episodes={episodes} />
                </ErrorBoundary>
        </Container>;