minor ux

diff --git a/resources/js/helpers/Episode.js b/resources/js/helpers/Episode.js
index cdbbf4572e7d4f5040850df5231fef4b2195674b..ca4e0010bbec35f3a8e32175e25520c8ab0c02ea 100644 (file)
--- a/resources/js/helpers/Episode.js
+++ b/resources/js/helpers/Episode.js
@@ -58,6 +58,13 @@ export const isActive = episode => {
        return start.isBefore(now) && end.isAfter(now);
 };
 
+export const isFilterActive = (filter) => {
+       if (!filter) return false;
+       if (filter.event && filter.event.length) return true;
+       if (filter.game && filter.game.length) return true;
+       return false;
+};
+
 export const isEventSelected = (filter, event) => {
        const found = (filter.event || []).includes(event.id);
        return filter.eventInvert ? !found : found;

diff --git a/resources/js/pages/Schedule.jsx b/resources/js/pages/Schedule.jsx
index fe963e48b961350941bd08d8d855bdd687b74288..b688fe86891d8230f00a6ede366ff2b48a453f53 100644 (file)
--- a/resources/js/pages/Schedule.jsx
+++ b/resources/js/pages/Schedule.jsx
@@ -13,6 +13,7 @@ import ApplyDialog from '../components/episodes/ApplyDialog';
 import Filter from '../components/episodes/Filter';
 import List from '../components/episodes/List';
 import RestreamDialog from '../components/episodes/RestreamDialog';
+import { isFilterActive } from '../helpers/Episode';
 import { useUser } from '../hooks/user';
 
 const GAMES = [
@@ -255,7 +256,7 @@ export const Component = () => {
 
        const filterButtonVariant = React.useMemo(() => {
                const outline = showFilter ? '' : 'outline-';
-               const filterActive = filter && filter.event && filter.event.length;
+               const filterActive = isFilterActive(filter);
                return `${outline}${filterActive ? 'info' : 'secondary'}`;
        }, [filter, showFilter]);
 
@@ -274,6 +275,7 @@ export const Component = () => {
                                        variant={filterButtonVariant}
                                >
                                        <Icon.FILTER title="" />
+                                       <span>{` ${t('button.filter')}`}</span>
                                </Button>
                        </div>
                </div>
@@ -294,7 +296,7 @@ export const Component = () => {
                                        onEditRestream={onEditRestream}
                                />
                        :
-                               <Alert variant="info">
+                               <Alert className="my-5" variant="info">
                                        {t('episodes.empty')}
                                </Alert>
                        }