diff --git a/src/components/Dialogs/FiltersModal.tsx b/src/components/Dialogs/FiltersModal.tsx index 63e54688e..0750b4bba 100644 --- a/src/components/Dialogs/FiltersModal.tsx +++ b/src/components/Dialogs/FiltersModal.tsx @@ -33,7 +33,11 @@ const TabButton = ( }; const Item = ({ item, onClose }: { item: CollectionFilterType, onClose: () => void }) => ( -
+
{item.Name} {item.Size}
diff --git a/src/core/react-query/filter/queries.ts b/src/core/react-query/filter/queries.ts index c847d7717..faf0d5fa2 100644 --- a/src/core/react-query/filter/queries.ts +++ b/src/core/react-query/filter/queries.ts @@ -12,7 +12,7 @@ import type { SeriesType } from '@/core/types/api/series'; export const useFiltersQuery = (enabled = false) => useQuery>({ queryKey: ['filter', 'all'], - queryFn: () => axios.get('Filter', { params: { pageSize: 0 } }), + queryFn: () => axios.get('Filter', { params: { includeEmpty: true, pageSize: 0 } }), enabled, }); @@ -38,7 +38,10 @@ export const useFilterExpressionsQuery = (enabled = true) => enabled, }); -export const useFilteredGroupsInfiniteQuery = ({ filterCriteria, ...params }: FilteredGroupsRequestType) => +export const useFilteredGroupsInfiniteQuery = ( + { filterCriteria, ...params }: FilteredGroupsRequestType, + enabled = true, +) => useInfiniteQuery>({ queryKey: ['filter', 'preview', 'groups', filterCriteria, params], queryFn: ({ pageParam }) => @@ -58,6 +61,7 @@ export const useFilteredGroupsInfiniteQuery = ({ filterCriteria, ...params }: Fi if (!params.pageSize || lastPage.Total / params.pageSize <= lastPageParam) return undefined; return lastPageParam + 1; }, + enabled, }); export const useFilteredGroupSeries = ( diff --git a/src/core/types/api/filter.ts b/src/core/types/api/filter.ts index 17112bf3c..59b53e4ab 100644 --- a/src/core/types/api/filter.ts +++ b/src/core/types/api/filter.ts @@ -69,7 +69,7 @@ export type FilterSeason = { Season: string; }; -type SortingCriteria = { +export type SortingCriteria = { Type: SortingType; Next?: SortingCriteria; IsInverted: boolean; @@ -82,5 +82,5 @@ export type FilterType = { IsHidden?: boolean; ApplyAtSeriesLevel?: boolean; Expression?: FilterCondition; - SortingCriteria?: SortingCriteria; + Sorting?: SortingCriteria; }; diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx index 6082fda7a..ed7b06df8 100644 --- a/src/pages/collection/Collection.tsx +++ b/src/pages/collection/Collection.tsx @@ -25,10 +25,15 @@ import useEventCallback from '@/hooks/useEventCallback'; import useFlattenListResult from '@/hooks/useFlattenListResult'; import type { RootState } from '@/core/store'; -import type { FilterCondition, FilterType } from '@/core/types/api/filter'; +import type { FilterCondition, FilterType, SortingCriteria } from '@/core/types/api/filter'; import type { SeriesType } from '@/core/types/api/series'; -const getFilter = (query: string, filterCondition?: FilterCondition, isSeries = true): FilterType => { +const getFilter = ( + query: string, + filterCondition?: FilterCondition, + sortingCriteria?: SortingCriteria, + isSeries = true, +): FilterType => { let finalCondition: FilterCondition | undefined; if (query) { const searchCondition: FilterCondition = { @@ -53,6 +58,7 @@ const getFilter = (query: string, filterCondition?: FilterCondition, isSeries = ? { ApplyAtSeriesLevel: isSeries, Expression: finalCondition, + Sorting: sortingCriteria ?? { Type: 'Name', IsInverted: false }, } : {} ); @@ -103,11 +109,14 @@ function Collection() { return undefined; }, [activeFilter, filterId, filterQuery.data?.Expression]); - const groupsQuery = useFilteredGroupsInfiniteQuery({ - pageSize: 50, - randomImages: showRandomPoster, - filterCriteria: getFilter(debouncedGroupSearch, groupFilterCondition, false), - }); + const groupsQuery = useFilteredGroupsInfiniteQuery( + { + pageSize: 50, + randomImages: showRandomPoster, + filterCriteria: getFilter(debouncedGroupSearch, groupFilterCondition, filterQuery.data?.Sorting, false), + }, + !filterId || (!!filterId && filterQuery.isSuccess), + ); const [groups, groupsTotal] = useFlattenListResult(groupsQuery.data); const lastPageIds = useMemo( () => groupsQuery.data?.pages.toReversed()[0].List.map(group => group.IDs.ID) ?? [], @@ -117,7 +126,7 @@ function Collection() { const seriesQuery = useFilteredGroupSeries( toNumber(groupId!), { - filterCriteria: getFilter(debouncedSeriesSearch), + filterCriteria: getFilter(debouncedSeriesSearch, groupFilterCondition, filterQuery.data?.Sorting, true), randomImages: showRandomPoster, includeDataFrom: ['AniDB'], },