Fix live filtering on presets (#1098)

* Fix live filtering on presets

* I should sleep...

src/components/Dialogs/FilterPresetsModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { mdiLoading, mdiMagnify } from '@mdi/js';
 import { Icon } from '@mdi/react';
@@ -9,6 +10,8 @@ import { useDebounceValue } from 'usehooks-ts';
 import Input from '@/components/Input/Input';
 import ModalPanel from '@/components/Panels/ModalPanel';
 import { useFiltersQuery, useSubFiltersQuery } from '@/core/react-query/filter/queries';
+import { resetActiveFilter } from '@/core/slices/collection';
+import useEventCallback from '@/hooks/useEventCallback';
 
 import type { CollectionFilterType } from '@/core/types/api/collection';
 
@@ -32,16 +35,28 @@ const TabButton = (
   );
 };
 
-const Item = ({ item, onClose }: { item: CollectionFilterType, onClose: () => void }) => (
-  <div
-    // TODO: Disable selecting empty filter presets for now. Remove the disable condition once editing presets is possible
-    className={cx('flex justify-between pb-1 pr-4 font-semibold', item.Size === 0 && 'pointer-events-none opacity-65')}
-    key={item.IDs.ID}
-  >
-    <Link to={`/webui/collection/filter/${item.IDs.ID}`} onClick={onClose}>{item.Name}</Link>
-    <span className="text-panel-text-important">{item.Size}</span>
-  </div>
-);
+const Item = ({ item, onClose }: { item: CollectionFilterType, onClose: () => void }) => {
+  const dispatch = useDispatch();
+
+  const handleClose = useEventCallback(() => {
+    dispatch(resetActiveFilter());
+    onClose();
+  });
+
+  return (
+    <div
+      // TODO: Disable selecting empty filter presets for now. Remove the disable condition once editing presets is possible
+      className={cx(
+        'flex justify-between pb-1 pr-4 font-semibold',
+        item.Size === 0 && 'pointer-events-none opacity-65',
+      )}
+      key={item.IDs.ID}
+    >
+      <Link to={`/webui/collection/filter/${item.IDs.ID}`} onClick={handleClose}>{item.Name}</Link>
+      <span className="text-panel-text-important">{item.Size}</span>
+    </div>
+  );
+};
 
 const SidePanel = (
   props: { activeFilter: number, activeTab: string, filterId: number, onClose: () => void, title: string },

src/pages/collection/Collection.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import cx from 'classnames';
 import { cloneDeep, toNumber } from 'lodash';
 import { useDebounceValue, useToggle } from 'usehooks-ts';
@@ -88,7 +88,6 @@ function Collection() {
 
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const location = useLocation();
 
   const [searchParams, setSearchParams] = useSearchParams();
   const groupSearch = useMemo(() => searchParams.get('q') ?? '', [searchParams]);
@@ -105,7 +104,7 @@ function Collection() {
 
   const activeFilterFromStore = useSelector((state: RootState) => state.collection.activeFilter) as FilterCondition;
   const activeFilter = useMemo(() => {
-    if (filterId !== 'live') return undefined;
+    if (!filterId) return undefined;
     return activeFilterFromStore;
   }, [activeFilterFromStore, filterId]);
   const filterQuery = useFilterQuery(toNumber(filterId!), !!filterId && filterId !== 'live');
@@ -121,15 +120,15 @@ function Collection() {
   const [timelineSeries, setTimelineSeries] = useState<SeriesType[]>([]);
 
   const handleFilterSidebarToggle = useEventCallback(() => {
-    if (!showFilterSidebar && location.pathname !== '/webui/collection/filter/live') {
+    if (!showFilterSidebar && !filterId) {
       dispatch(resetFilter());
       navigate('/webui/collection/filter/live');
     }
     toggleFilterSidebar();
   });
 
   useEffect(() => {
-    if (filterId !== 'live' && showFilterSidebar) toggleFilterSidebar();
+    if (!filterId && showFilterSidebar) toggleFilterSidebar();
   }, [filterId, showFilterSidebar, toggleFilterSidebar]);
 
   const { mutate: patchSettings } = usePatchSettingsMutation();