schedule style improvements

[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 14d0891707e23a59da9b444c6c9cb5b115bd293d..59e6ac4846eeff8aee216d632d90a773a0706170 100644 (file)
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -1,28 +1,44 @@
 import axios from 'axios';
 import moment from 'moment';
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Alert, Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 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 [ahead, setAhead] = React.useState(14);
        const [behind, setBehind] = React.useState(0);
        const [episodes, setEpisodes] = React.useState([]);
+       const [filter, setFilter] = React.useState({});
 
        const { t } = useTranslation();
 
        React.useEffect(() => {
-               const controller = new AbortController();
+               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);
+       }, []);
+
+       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 || []);
@@ -31,10 +47,19 @@ const Schedule = () => {
                                console.error(e);
                        }
                });
+       }, []);
+
+       React.useEffect(() => {
+               const controller = new AbortController();
+               fetchEpisodes(controller, ahead, behind, filter);
+               const timer = setInterval(() => {
+                       fetchEpisodes(controller, ahead, behind, filter);
+               }, 3 * 60 * 1000);
                return () => {
                        controller.abort();
+                       clearInterval(timer);
                };
-       }, [ahead, behind]);
+       }, [ahead, behind, fetchEpisodes, filter]);
 
        return <Container>
                <Helmet>
@@ -42,9 +67,20 @@ const Schedule = () => {
                        <meta name="description" content={t('schedule.description')} />
                </Helmet>
                <CanonicalLinks base="/schedule" />
-               <h1>{t('schedule.heading')}</h1>
+               <div className="d-flex align-items-start justify-content-between">
+                       <h1>{t('schedule.heading')}</h1>
+                       <div className="ms-3 mt-5">
+                               <Filter filter={filter} setFilter={updateFilter} />
+                       </div>
+               </div>
                <ErrorBoundary>
-                       <List episodes={episodes} />
+                       {episodes.length ?
+                               <List episodes={episodes} />
+                       :
+                               <Alert variant="info">
+                                       {t('episodes.empty')}
+                               </Alert>
+                       }
                </ErrorBoundary>
        </Container>;
 };