X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fpages%2FSchedule.js;h=2e97af9e4437ba6ee49cb5b646a5ff920e482644;hb=1555e7984ae682c7c7cddb5026275317742eaef3;hp=c27a384a5fdddc8bbd527abb97e550b5e1057ee1;hpb=3dc03a6a0d6ec624c1c66d96691af6a09d461302;p=alttp.git

diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index c27a384..2e97af9 100644
--- 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>;