vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-16 13:40:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix list filters

Browse Source
This commit is contained in:
jeffvli
2025-12-02 00:11:42 -08:00
parent 4abfbd1973
commit aff7a61bca
26 changed files with 1022 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/jellyfin-album-filters.tsx
+29 -45
View File
@@ -3,17 +3,19 @@ import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
import { useListContext } from '/@/renderer/context/list-context';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { sharedQueries } from '/@/renderer/features/shared/api/shared-api';
import { AlbumListFilter, useCurrentServerId } from '/@/renderer/store';
import { useCurrentServerId } from '/@/renderer/store';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import {
AlbumArtistListSort,
GenreListSort,
@@ -22,15 +24,17 @@ import {
} from '/@/shared/types/domain-types';
interface JellyfinAlbumFiltersProps {
customFilters?: Partial<AlbumListFilter>;
disableArtistFilter?: boolean;
onFilterChange: (filters: AlbumListFilter) => void;
}
export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFiltersProps) => {
const { t } = useTranslation();
const serverId = useCurrentServerId();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const {
query,
setAlbumArtist,
@@ -180,46 +184,25 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
const handleTagFilter = useMemo(
() => (e: string[] | undefined) => {
setCustom((prev) => {
if (!prev) {
return e && e.length > 0 ? { [e.join('|')]: e.join('|') } : null;
}
if (!e || e.length === 0) {
// Remove all tag-related properties (they use '|' joined keys)
const rest = Object.fromEntries(
Object.entries(prev).filter(([key]) => !key.includes('|')),
);
return Object.keys(rest).length === 0 ? null : rest;
}
// Remove old tag entries and add new one
const rest = Object.fromEntries(
Object.entries(prev).filter(([key]) => !key.includes('|')),
);
const tagKey = e.join('|');
return {
...rest,
[tagKey]: tagKey,
};
});
setCustom({ Tags: e?.join('|') ?? null });
},
[setCustom],
);
const debouncedHandleMinYearFilter = useDebouncedCallback(handleMinYearFilter, 300);
const debouncedHandleMaxYearFilter = useDebouncedCallback(handleMaxYearFilter, 300);
return (
<Stack p="0.8rem">
<Stack p="md">
{yesNoFilter.map((filter) => (
<YesNoSelect
defaultValue={filter.value ? filter.value.toString() : undefined}
key={`jf-filter-${filter.label}`}
label={filter.label}
onChange={filter.onChange}
value={filter.value ?? undefined}
onChange={(e) => filter.onChange(e ? e === 'true' : undefined)}
/>
))}
<Divider my="0.5rem" />
<Divider my="md" />
<Group grow>
<NumberInput
defaultValue={query.minYear ?? undefined}
@@ -227,7 +210,7 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
label={t('filter.fromYear', { postProcess: 'sentenceCase' })}
max={2300}
min={1700}
onBlur={(e) => handleMinYearFilter(e.currentTarget.value)}
onChange={(e) => debouncedHandleMinYearFilter(e)}
required={!!query.minYear}
/>
<NumberInput
@@ -236,23 +219,24 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
label={t('filter.toYear', { postProcess: 'sentenceCase' })}
max={2300}
min={1700}
onBlur={(e) => handleMaxYearFilter(e.currentTarget.value)}
onChange={(e) => debouncedHandleMaxYearFilter(e)}
required={!!query.minYear}
/>
</Group>
<MultiSelectWithInvalidData
clearable
data={genreList}
defaultValue={query.genreIds ?? undefined}
label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
onChange={(e) => handleGenresFilter(e)}
searchable
/>
{!isGenrePage && (
<MultiSelectWithInvalidData
clearable
data={genreList}
defaultValue={query.genreIds || []}
label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
onChange={handleGenresFilter}
searchable
/>
)}
<MultiSelectWithInvalidData
clearable
data={selectableAlbumArtists}
defaultValue={query.artistIds ?? undefined}
defaultValue={query.artistIds || []}
disabled={disableArtistFilter}
label={t('entity.artist', { count: 2, postProcess: 'sentenceCase' })}
limit={300}
@@ -264,7 +248,7 @@ export const JellyfinAlbumFilters = ({ disableArtistFilter }: JellyfinAlbumFilte
<MultiSelectWithInvalidData
clearable
data={tagsQuery.data.boolTags}
defaultValue={query._custom?.[tagsQuery.data.boolTags.join('|')] ?? undefined}
defaultValue={query._custom?.[tagsQuery.data.boolTags.join('|')] || []}
label={t('common.tags', { postProcess: 'sentenceCase' })}
onChange={handleTagFilter}
searchable
src/renderer/features/albums/components/navidrome-album-filters.tsx
+72 -87
View File
@@ -1,11 +1,12 @@
import { useQuery } from '@tanstack/react-query';
import { ChangeEvent, memo, useMemo } from 'react';
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { ChangeEvent, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
MultiSelectWithInvalidData,
SelectWithInvalidData,
} from '/@/renderer/components/select-with-invalid-data';
import { useListContext } from '/@/renderer/context/list-context';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
@@ -15,11 +16,12 @@ import { titleCase } from '/@/renderer/utils';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input';
import { Spinner, SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
interface NavidromeAlbumFiltersProps {
@@ -31,6 +33,10 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
const server = useCurrentServer();
const serverId = server.id;
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const {
query,
setAlbumArtist,
@@ -89,10 +95,10 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
const recentlyPlayed = e.currentTarget.checked ? true : undefined;
setRecentlyPlayed(recentlyPlayed ?? null);
},
value: query.recentlyPlayed,
value: query.isRecentlyPlayed,
},
],
[t, query.hasRating, query.recentlyPlayed, setHasRating, setRecentlyPlayed],
[t, query.hasRating, query.isRecentlyPlayed, setHasRating, setRecentlyPlayed],
);
const handleYearFilter = useMemo(
@@ -142,43 +148,48 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
}));
}, [albumArtistListQuery.data?.items]);
const debouncedHandleYearFilter = useDebouncedCallback(handleYearFilter, 300);
return (
<Stack p="0.8rem">
<Stack p="md">
{yesNoUndefinedFilters.map((filter) => (
<YesNoSelect
clearable
defaultValue={filter.value ? filter.value.toString() : undefined}
key={`nd-filter-${filter.label}`}
label={filter.label}
onChange={filter.onChange}
value={filter.value ?? undefined}
onChange={(e) => filter.onChange(e ? e === 'true' : undefined)}
/>
))}
{toggleFilters.map((filter) => (
<Group justify="space-between" key={`nd-filter-${filter.label}`}>
<Text>{filter.label}</Text>
<Switch checked={filter?.value ?? false} onChange={filter.onChange} />
<Switch defaultChecked={filter?.value ?? false} onChange={filter.onChange} />
</Group>
))}
<Divider my="0.5rem" />
<Divider my="md" />
<NumberInput
defaultValue={query.minYear ?? undefined}
hideControls={false}
label={t('common.year', { postProcess: 'titleCase' })}
max={5000}
min={0}
onBlur={(e) => handleYearFilter(e.currentTarget.value)}
/>
<MultiSelectWithInvalidData
clearable
data={genreList}
defaultValue={query.genreIds}
label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
onChange={(e) => (e && e.length > 0 ? setGenreId(e) : setGenreId(null))}
searchable
onChange={(e) => debouncedHandleYearFilter(e)}
/>
{!isGenrePage && (
<MultiSelectWithInvalidData
clearable
data={genreList}
defaultValue={query.genreIds || []}
label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
onChange={(e) => (e && e.length > 0 ? setGenreId(e) : setGenreId(null))}
searchable
/>
)}
<SelectWithInvalidData
clearable
data={selectableAlbumArtists}
defaultValue={query.artistIds ? query.artistIds[0] : undefined}
defaultValue={query.artistIds?.[0] || undefined}
disabled={disableArtistFilter}
label={t('entity.artist', { count: 1, postProcess: 'titleCase' })}
limit={300}
@@ -186,6 +197,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
searchable
/>
<Divider my="md" />
<TagFilters />
</Stack>
);
@@ -194,38 +206,34 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
interface TagFilterItemProps {
label: string;
onChange: (value: null | string) => void;
options: string[];
options: Array<{ id: string; name: string }>;
tagValue: string;
value: string | undefined;
}
const TagFilterItem = memo(
({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
return (
<SelectWithInvalidData
clearable
data={options}
defaultValue={value}
key={tagValue}
label={label}
limit={100}
onChange={onChange}
searchable
/>
);
},
(prevProps, nextProps) => {
// Only re-render if the specific tag's value or options change
// We don't compare onChange since it's a stable wrapper around handleTagFilter
// and handleTagFilter itself is memoized and stable
return (
prevProps.tagValue === nextProps.tagValue &&
prevProps.label === nextProps.label &&
prevProps.value === nextProps.value &&
prevProps.options === nextProps.options
);
},
);
const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterItemProps) => {
const selectData = useMemo(
() =>
options.map((option) => ({
label: option.name,
value: option.id,
})),
[options],
);
return (
<SelectWithInvalidData
clearable
data={selectData}
defaultValue={value}
key={tagValue}
label={label}
limit={100}
onChange={onChange}
searchable
/>
);
};
TagFilterItem.displayName = 'TagFilterItem';
@@ -234,7 +242,7 @@ const TagFilters = () => {
const serverId = useCurrentServerId();
const tagsQuery = useQuery(
const tagsQuery = useSuspenseQuery(
sharedQueries.tags({
options: {
gcTime: 1000 * 60 * 60,
@@ -249,50 +257,27 @@ const TagFilters = () => {
const handleTagFilter = useMemo(
() => (tag: string, e: null | string) => {
setCustom((prev) => {
if (!prev) {
return e ? { [tag]: e } : null;
}
if (e === null) {
const rest = Object.fromEntries(
Object.entries(prev).filter(([key]) => key !== tag),
);
return Object.keys(rest).length === 0 ? null : rest;
}
return {
...prev,
[tag]: e,
};
});
setCustom({ [tag]: e });
},
[setCustom],
);
const tags = useMemo(() => {
return (
tagsQuery.data?.enumTags?.map((tag) => ({
label: titleCase(tag.name),
options: tag.options,
value: tag.name,
})) || []
);
}, [tagsQuery.data?.enumTags]);
const results: { label: string; options: { id: string; name: string }[]; value: string }[] =
[];
// Create stable onChange handlers for each tag using useMemo
const tagHandlers = useMemo(() => {
const handlers = new Map<string, (value: null | string) => void>();
tags.forEach((tag) => {
handlers.set(tag.value, (value: null | string) => handleTagFilter(tag.value, value));
});
return handlers;
}, [tags, handleTagFilter]);
for (const tag of tagsQuery.data?.enumTags || []) {
if (!tagsQuery.data?.excluded.album.includes(tag.name)) {
results.push({
label: titleCase(tag.name),
options: tag.options,
value: tag.name,
});
}
}
if (tagsQuery.isLoading) {
return <Spinner container />;
}
return results;
}, [tagsQuery.data]);
return (
<>
@@ -300,7 +285,7 @@ const TagFilters = () => {
<TagFilterItem
key={tag.value}
label={tag.label}
onChange={tagHandlers.get(tag.value)!}
onChange={(e) => handleTagFilter(tag.value, e)}
options={tag.options}
tagValue={tag.value}
value={query._custom?.[tag.value] as string | undefined}
src/renderer/features/albums/components/subsonic-album-filters.tsx
+32 -34
View File
@@ -1,11 +1,12 @@
import { useQuery } from '@tanstack/react-query';
import { useSuspenseQuery } from '@tanstack/react-query';
import { ChangeEvent, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
import { useListContext } from '/@/renderer/context/list-context';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { useCurrentServerId } from '/@/renderer/store';
import { Divider } from '/@/shared/components/divider/divider';
import { Group } from '/@/shared/components/group/group';
@@ -15,7 +16,8 @@ import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { AlbumArtistListSort, GenreListSort, SortOrder } from '/@/shared/types/domain-types';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, SortOrder } from '/@/shared/types/domain-types';
interface SubsonicAlbumFiltersProps {
disableArtistFilter?: boolean;
@@ -26,12 +28,16 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
const serverId = useCurrentServerId();
const { customFilters } = useListContext();
const isGenrePage = customFilters?.genreIds !== undefined;
const { query, setAlbumArtist, setFavorite, setGenreId, setMaxYear, setMinYear } =
useAlbumListFilters();
const [albumArtistSearchTerm, setAlbumArtistSearchTerm] = useState<string>('');
const albumArtistListQuery = useQuery(
const albumArtistListQuery = useSuspenseQuery(
artistsQueries.albumArtistList({
options: {
gcTime: 1000 * 60 * 2,
@@ -64,20 +70,7 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
[setAlbumArtist],
);
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreListQuery = useGenreList();
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
@@ -146,15 +139,18 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
[setMaxYear],
);
const debouncedHandleMinYearFilter = useDebouncedCallback(handleMinYearFilter, 300);
const debouncedHandleMaxYearFilter = useDebouncedCallback(handleMaxYearFilter, 300);
return (
<Stack p="0.8rem">
<Stack p="md">
{toggleFilters.map((filter) => (
<Group justify="space-between" key={`nd-filter-${filter.label}`}>
<Group justify="space-between" key={`ss-filter-${filter.label}`}>
<Text>{filter.label}</Text>
<Switch checked={filter?.value || false} onChange={filter.onChange} />
<Switch defaultChecked={filter.value ?? false} onChange={filter.onChange} />
</Group>
))}
<Divider my="0.5rem" />
<Divider my="md" />
<Group grow>
<NumberInput
defaultValue={query.minYear ?? undefined}
@@ -163,7 +159,7 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
label={t('filter.fromYear', { postProcess: 'sentenceCase' })}
max={5000}
min={0}
onBlur={(e) => handleMinYearFilter(e.currentTarget.value)}
onChange={(e) => debouncedHandleMinYearFilter(e)}
/>
<NumberInput
defaultValue={query.maxYear ?? undefined}
@@ -172,22 +168,24 @@ export const SubsonicAlbumFilters = ({ disableArtistFilter }: SubsonicAlbumFilte
label={t('filter.toYear', { postProcess: 'sentenceCase' })}
max={5000}
min={0}
onBlur={(e) => handleMaxYearFilter(e.currentTarget.value)}
onChange={(e) => debouncedHandleMaxYearFilter(e)}
/>
</Group>
<Select
clearable
data={genreList}
defaultValue={query.genreIds?.[0] ?? undefined}
disabled={Boolean(query.minYear || query.maxYear)}
label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
onChange={(e) => handleGenresFilter(e)}
searchable
/>
{!isGenrePage && (
<Select
clearable
data={genreList}
defaultValue={query.genreIds?.[0] ?? undefined}
disabled={Boolean(query.minYear || query.maxYear)}
label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
onChange={(e) => handleGenresFilter(e)}
searchable
/>
)}
<MultiSelectWithInvalidData
clearable
data={selectableAlbumArtists}
defaultValue={query.artistIds ?? undefined}
defaultValue={query.artistIds ?? []}
disabled={disableArtistFilter}
label={t('entity.artist', { count: 2, postProcess: 'sentenceCase' })}
limit={300}
src/renderer/features/albums/hooks/use-album-list-filters.ts
+151 -33
View File
@@ -1,17 +1,17 @@
import {
parseAsArrayOf,
parseAsBoolean,
parseAsInteger,
parseAsJson,
parseAsString,
useQueryState,
} from 'nuqs';
import { useCallback, useMemo } from 'react';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { useSearchParams } from 'react-router';
import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
import { customFiltersSchema, FILTER_KEYS } from '/@/renderer/features/shared/utils';
import { FILTER_KEYS } from '/@/renderer/features/shared/utils';
import {
parseArrayParam,
parseBooleanParam,
parseCustomFiltersParam,
parseIntParam,
setSearchParam,
} from '/@/renderer/utils/query-params';
import { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
@@ -25,37 +25,155 @@ export const useAlbumListFilters = () => {
const { searchTerm, setSearchTerm } = useSearchTermFilter('');
const [genreId, setGenreId] = useQueryState(
FILTER_KEYS.ALBUM.GENRE_ID,
parseAsArrayOf(parseAsString),
const [searchParams, setSearchParams] = useSearchParams();
const genreId = useMemo(
() => parseArrayParam(searchParams, FILTER_KEYS.ALBUM.GENRE_ID),
[searchParams],
);
const [albumArtist, setAlbumArtist] = useQueryState(
FILTER_KEYS.ALBUM.ARTIST_IDS,
parseAsArrayOf(parseAsString),
const albumArtist = useMemo(
() => parseArrayParam(searchParams, FILTER_KEYS.ALBUM.ARTIST_IDS),
[searchParams],
);
const [minYear, setMinYear] = useQueryState(FILTER_KEYS.ALBUM.MIN_YEAR, parseAsInteger);
const [maxYear, setMaxYear] = useQueryState(FILTER_KEYS.ALBUM.MAX_YEAR, parseAsInteger);
const [favorite, setFavorite] = useQueryState(FILTER_KEYS.ALBUM.FAVORITE, parseAsBoolean);
const [compilation, setCompilation] = useQueryState(
FILTER_KEYS.ALBUM.COMPILATION,
parseAsBoolean,
const minYear = useMemo(
() => parseIntParam(searchParams, FILTER_KEYS.ALBUM.MIN_YEAR),
[searchParams],
);
const [hasRating, setHasRating] = useQueryState(FILTER_KEYS.ALBUM.HAS_RATING, parseAsBoolean);
const [recentlyPlayed, setRecentlyPlayed] = useQueryState(
FILTER_KEYS.ALBUM.RECENTLY_PLAYED,
parseAsBoolean,
const maxYear = useMemo(
() => parseIntParam(searchParams, FILTER_KEYS.ALBUM.MAX_YEAR),
[searchParams],
);
const [custom, setCustom] = useQueryState(
FILTER_KEYS.ALBUM._CUSTOM,
parseAsJson(customFiltersSchema),
const favorite = useMemo(
() => parseBooleanParam(searchParams, FILTER_KEYS.ALBUM.FAVORITE),
[searchParams],
);
const compilation = useMemo(
() => parseBooleanParam(searchParams, FILTER_KEYS.ALBUM.COMPILATION),
[searchParams],
);
const hasRating = useMemo(
() => parseBooleanParam(searchParams, FILTER_KEYS.ALBUM.HAS_RATING),
[searchParams],
);
const recentlyPlayed = useMemo(
() => parseBooleanParam(searchParams, FILTER_KEYS.ALBUM.RECENTLY_PLAYED),
[searchParams],
);
const custom = useMemo(
() => parseCustomFiltersParam(searchParams, FILTER_KEYS.ALBUM._CUSTOM),
[searchParams],
);
// Use a ref to track the latest custom filters to avoid stale state during batched updates
const customRef = useRef<null | Record<string, any> | undefined>(custom);
useEffect(() => {
customRef.current = custom;
}, [custom]);
const setGenreId = useCallback(
(value: null | string[]) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.GENRE_ID, value), {
replace: true,
});
},
[setSearchParams],
);
const setAlbumArtist = useCallback(
(value: null | string[]) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.ARTIST_IDS, value), {
replace: true,
});
},
[setSearchParams],
);
const setMinYear = useCallback(
(value: null | number) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.MIN_YEAR, value), {
replace: true,
});
},
[setSearchParams],
);
const setMaxYear = useCallback(
(value: null | number) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.MAX_YEAR, value), {
replace: true,
});
},
[setSearchParams],
);
const setFavorite = useCallback(
(value: boolean | null) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.FAVORITE, value), {
replace: true,
});
},
[setSearchParams],
);
const setCompilation = useCallback(
(value: boolean | null) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.COMPILATION, value), {
replace: true,
});
},
[setSearchParams],
);
const setHasRating = useCallback(
(value: boolean | null) => {
setSearchParams((prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.HAS_RATING, value), {
replace: true,
});
},
[setSearchParams],
);
const setRecentlyPlayed = useCallback(
(value: boolean | null) => {
setSearchParams(
(prev) => setSearchParam(prev, FILTER_KEYS.ALBUM.RECENTLY_PLAYED, value),
{
replace: true,
},
);
},
[setSearchParams],
);
const setCustom = useCallback(
(value: null | Record<string, any>) => {
setSearchParams((prev) => {
const previousValue = prev.get(FILTER_KEYS.ALBUM._CUSTOM);
const newCustom = {
...(previousValue ? JSON.parse(previousValue) : {}),
...value,
};
const filteredNewCustom = Object.fromEntries(
Object.entries(newCustom).filter(
([, value]) => value !== null && value !== undefined,
),
);
prev.set(FILTER_KEYS.ALBUM._CUSTOM, JSON.stringify(filteredNewCustom));
return prev;
});
},
[setSearchParams],
);
const clear = useCallback(() => {