schedule event filter

[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 b411f82193574c9036b3ff8d22bbe6d4b99a940e..06dcf13f65501839f08090b58754c69d35fafa1f 100644 (file)
--- a/resources/js/components/episodes/Filter.js
+++ b/resources/js/components/episodes/Filter.js
@@ -16,7 +16,9 @@ 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);
                }).catch(e => {
                        if (!axios.isCancel(e)) {
@@ -50,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>;