Allow filtering inside filter presets (#1014)

ShokoAnime · Aug 23, 2024 · 3bbabf2 · 3bbabf2
1 parent 473fdff
commit 3bbabf2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 34 deletions.
diff --git a/src/components/Collection/CollectionTitle.tsx b/src/components/Collection/CollectionTitle.tsx
@@ -12,7 +12,7 @@ type Props = {
 };
 
 const CollectionTitle = memo(({ count, filterActive, filterOrGroup, searchQuery }: Props) => (
-  <div className="flex items-center min-w-0 gap-x-2 text-xl font-semibold">
+  <div className="flex min-w-0 items-center gap-x-2 text-xl font-semibold">
     <Link to="/webui/collection" className={cx(filterOrGroup ? 'text-panel-text-primary' : 'pointer-events-none')}>
       Collection
     </Link>
@@ -24,7 +24,7 @@ const CollectionTitle = memo(({ count, filterActive, filterOrGroup, searchQuery
         </span>
       </>
     )}
-    {!filterOrGroup && filterActive && (
+    {filterActive && (
       <>
         <Icon className="flex-none" path={mdiChevronRight} size={1} />
         Filtered

diff --git a/src/components/Collection/TitleOptions.tsx b/src/components/Collection/TitleOptions.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import { useParams } from 'react-router';
 import {
   mdiCogOutline,
   mdiFilterMenuOutline,
@@ -28,15 +27,13 @@ type Props = {
 
 const OptionButton = React.memo(
   (
-    { disabled, icon, onClick, tooltip }: {
-      disabled?: boolean;
+    { icon, onClick, tooltip }: {
       icon: string;
       onClick: React.MouseEventHandler<HTMLDivElement>;
       tooltip?: string;
     },
   ) => (
     <IconButton
-      disabled={disabled}
       icon={icon}
       buttonType="secondary"
       buttonSize="normal"
@@ -57,8 +54,6 @@ const TitleOptions = (props: Props) => {
     toggleMode,
   } = props;
 
-  const { filterId } = useParams();
-
   const [showFilterModal, toggleFilterModal] = useToggle(false);
   const [showDisplaySettingsModal, toggleDisplaySettingsModal] = useToggle(false);
 
@@ -76,12 +71,7 @@ const TitleOptions = (props: Props) => {
         {!isSeries && (
           <>
             <OptionButton onClick={toggleFilterModal} icon={mdiFilterMenuOutline} tooltip="Filter Presets" />
-            <OptionButton
-              onClick={toggleFilterSidebar}
-              icon={mdiFilterOutline}
-              tooltip={!filterId ? 'Filter' : ''}
-              disabled={!!filterId}
-            />
+            <OptionButton onClick={toggleFilterSidebar} icon={mdiFilterOutline} tooltip="Filter" />
           </>
         )}
         <OptionButton

diff --git a/src/components/Input/IconButton.tsx b/src/components/Input/IconButton.tsx
@@ -9,7 +9,6 @@ import type { ButtonType, SizeType } from '@/components/Input/Button.utils';
 
 type IconButtonProps = {
   icon: string;
-  disabled?: boolean;
   className?: string;
   onClick: React.MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
   buttonType: ButtonType;
@@ -18,7 +17,7 @@ type IconButtonProps = {
 };
 
 const IconButton = (
-  { buttonSize = 'normal', buttonType = 'secondary', className, disabled, icon, onClick, tooltip }: IconButtonProps,
+  { buttonSize = 'normal', buttonType = 'secondary', className, icon, onClick, tooltip }: IconButtonProps,
 ) => (
   <Button
     className={cx(
@@ -29,7 +28,6 @@ const IconButton = (
     )}
     onClick={onClick}
     tooltip={tooltip}
-    disabled={disabled}
   >
     <Icon path={icon} size={1} />
   </Button>

diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
@@ -33,11 +33,12 @@ import type { SeriesType } from '@/core/types/api/series';
 
 const getFilter = (
   query: string,
-  filterCondition?: FilterCondition,
+  filterConditions: (FilterCondition | undefined)[],
   sortingCriteria?: SortingCriteria,
   isSeriesSearch = true,
 ): FilterType => {
   let finalCondition: FilterCondition | undefined;
+  const cleanFilterConditions = filterConditions.filter(condition => !!condition) as FilterCondition[];
   if (query) {
     let searchCondition: FilterCondition = {
       Type: isSeriesSearch ? 'StringContains' : 'AnyContains',
@@ -61,13 +62,13 @@ const getFilter = (
       };
     }
 
-    if (filterCondition) {
-      finalCondition = buildFilter([searchCondition, filterCondition]);
+    if (cleanFilterConditions.length > 0) {
+      finalCondition = buildFilter([searchCondition, ...cleanFilterConditions]);
     } else {
       finalCondition = buildFilter([searchCondition]);
     }
-  } else if (filterCondition) {
-    finalCondition = buildFilter([filterCondition]);
+  } else if (cleanFilterConditions.length > 0) {
+    finalCondition = buildFilter(cleanFilterConditions);
   }
 
   return (
@@ -98,7 +99,7 @@ function Collection() {
   const [debouncedGroupSearch] = useDebounceValue(groupSearch, 200);
   const [debouncedSeriesSearch] = useDebounceValue(seriesSearch, 200);
 
-  const activeFilter = useSelector((state: RootState) => state.collection.activeFilter);
+  const activeFilter = useSelector((state: RootState) => state.collection.activeFilter) as FilterCondition;
   const filterQuery = useFilterQuery(toNumber(filterId!), !!filterId);
   const groupQuery = useGroupQuery(toNumber(groupId!), isSeries);
   const subsectionName = isSeries ? groupQuery?.data?.Name : filterId && filterQuery?.data?.Name;
@@ -117,17 +118,16 @@ function Collection() {
     setMode(viewSetting);
   }, [viewSetting]);
 
-  const groupFilterCondition = useMemo(() => {
-    if (filterId) return filterQuery.data?.Expression;
-    if (activeFilter !== null) return activeFilter as FilterCondition;
-    return undefined;
-  }, [activeFilter, filterId, filterQuery.data?.Expression]);
-
   const groupsQuery = useFilteredGroupsInfiniteQuery(
     {
       pageSize: 50,
       randomImages: showRandomPoster,
-      filterCriteria: getFilter(debouncedGroupSearch, groupFilterCondition, filterQuery.data?.Sorting, false),
+      filterCriteria: getFilter(
+        debouncedGroupSearch,
+        [activeFilter, filterQuery.data?.Expression],
+        filterQuery.data?.Sorting,
+        false,
+      ),
     },
     !isSeries && (!filterId || (!!filterId && filterQuery.isSuccess)),
   );
@@ -140,7 +140,12 @@ function Collection() {
   const seriesQuery = useFilteredGroupSeries(
     toNumber(groupId!),
     {
-      filterCriteria: getFilter(debouncedSeriesSearch, groupFilterCondition, filterQuery.data?.Sorting, true),
+      filterCriteria: getFilter(
+        debouncedSeriesSearch,
+        [activeFilter, filterQuery.data?.Expression],
+        filterQuery.data?.Sorting,
+        true,
+      ),
       randomImages: showRandomPoster,
       includeDataFrom: ['AniDB'],
       recursive: true,
@@ -199,7 +204,7 @@ function Collection() {
           // eslint-disable-next-line no-nested-ternary
           count={(total === 0 && isFetching) ? -1 : (isSeries ? total : groupsTotal)}
           filterOrGroup={subsectionName}
-          filterActive={!!groupFilterCondition}
+          filterActive={!!activeFilter}
           searchQuery={isSeries ? seriesSearch : groupSearch}
         />
         <TitleOptions
@@ -219,15 +224,15 @@ function Collection() {
           isFetchingNextPage={groupsQuery.isFetchingNextPage}
           isFetching={isFetching}
           isSeries={isSeries}
-          isSidebarOpen={showFilterSidebar}
+          isSidebarOpen={!filterId && showFilterSidebar}
           items={items}
           mode={mode}
           total={total}
         />
         <div
           className={cx(
             'flex items-start transition-all',
-            (!isSeries && showFilterSidebar)
+            (!isSeries && !filterId && showFilterSidebar)
               ? 'w-[28.84rem] opacity-100 overflow-auto '
               : 'w-0 opacity-0 overflow-hidden ',
           )}