X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fepisodes%2FFilter.js;h=06dcf13f65501839f08090b58754c69d35fafa1f;hb=01c03862db4c9d7da371fb3500aab566d36366ff;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..06dcf13 100644
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -16,15 +16,10 @@ const Filter = ({ filter, setFilter }) => {
 				before: moment().startOf('day').add(8, 'days').toISOString(),
 			},
 		}).then(response => {
-			const newEvents = response.data || [];
+			const newEvents = (response.data || []).sort(
+				(a, b) => (a.short || a.title).localeCompare(b.short || b.title)
+			);
 			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);
@@ -33,23 +28,22 @@ const Filter = ({ filter, setFilter }) => {
 		return () => {
 			controller.abort();
 		};
-	}, [setEvents, setFilter]);
+	}, []);
 
 	const toggleEvent = React.useCallback(event => {
-		setFilter(filter => {
-			const eventFilter = filter.event || [];
-			if (!eventFilter.includes(event.id)) {
-				return {
-					...filter,
-					event: [...eventFilter, event.id],
-				};
-			}
-			return {
+		const eventFilter = filter.event || [];
+		if (eventFilter.includes(event.id)) {
+			setFilter({
 				...filter,
-				event: eventFilter.filter(id => id !== event.id),
-			};
-		});
-	}, [setFilter]);
+				event: eventFilter.filter(id => id !== event.id && events.find(e => e.id === id)),
+			});
+		} else {
+			setFilter({
+				...filter,
+				event: [...eventFilter, event.id],
+			});
+		}
+	}, [events, filter, setFilter]);
 
 	const isEventSelected = React.useCallback(event => {
 		const eventFilter = filter.event || [];
@@ -58,15 +52,16 @@ const Filter = ({ 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)}
 				key={event.id}
 				onClick={() => toggleEvent(event)}
+				title={event.short ? event.title : null}
 				variant="outline-secondary"
 			>
-				{event.title}
+				{event.short || event.title}
 			</Button>
 		)}
 	</div>;