schedule style improvements

[alttp.git] / resources / js / components / episodes / Filter.js

diff --git a/resources/js/components/episodes/Filter.js b/resources/js/components/episodes/Filter.js
index 4855a71b5b09156e56e16eb39fd0958b60c3b3cf..06dcf13f65501839f08090b58754c69d35fafa1f 100644 (file)
--- 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>;