X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fepisodes%2FFilter.js;h=98d965dd3ff902751164140df20a79cc280b211d;hb=249e06be11d0f7778d99956c87d4f0a8ac7e69f7;hp=4855a71b5b09156e56e16eb39fd0958b60c3b3cf;hpb=1555e7984ae682c7c7cddb5026275317742eaef3;p=alttp.git

diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index 4855a71..98d965d 100644
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -1,78 +1,34 @@
-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 || [];
-			setEvents(newEvents);
-			setFilter(filter => {
-				const eventFilter = filter.event || [];
-				return {
-					...filter,
-					event: eventFilter.filter(newEvents.find(id => newEvents.includes(id))),
-				};
-			});
-		}).catch(e => {
-			if (!axios.isCancel(e)) {
-				console.error(e);
-			}
-		});
-		return () => {
-			controller.abort();
-		};
-	}, [setEvents, setFilter]);
+import { isEventSelected, toggleEventFilter } from '../../helpers/Episode';
 
+const Filter = ({ events, filter, setFilter }) => {
 	const toggleEvent = React.useCallback(event => {
-		setFilter(filter => {
-			const eventFilter = filter.event || [];
-			if (!eventFilter.includes(event.id)) {
-				return {
-					...filter,
-					event: [...eventFilter, event.id],
-				};
-			}
-			return {
-				...filter,
-				event: eventFilter.filter(id => id !== event.id),
-			};
-		});
-	}, [setFilter]);
-
-	const isEventSelected = React.useCallback(event => {
-		const eventFilter = filter.event || [];
-		return eventFilter.includes(event.id);
-	}, [filter]);
+		setFilter(toggleEventFilter(events, filter, event));
+	}, [events, filter, setFilter]);
 
 	if (!events || !events.length) return null;
 
-	return <div className="episode-filter">
+	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}
 				variant="outline-secondary"
 			>
-				{event.title}
+				{event.short || event.title}
 			</Button>
 		)}
 	</div>;
 };
 
 Filter.propTypes = {
+	events: PropTypes.arrayOf(PropTypes.shape({
+	})),
 	filter: PropTypes.shape(),
 	setFilter: PropTypes.func,
 };