X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fepisodes%2FFilter.js;h=98d965dd3ff902751164140df20a79cc280b211d;hb=c56ab0725b926af522285d96a22f998f4f7c0c40;hp=06dcf13f65501839f08090b58754c69d35fafa1f;hpb=9f54b6e8fde827556cf858818090a1dfc829624c;p=alttp.git

diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index 06dcf13..98d965d 100644
--- 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,
 };