update query persistence to hooks

This commit is contained in:
jeffvli
2025-10-13 20:09:01 -07:00
parent 1efd39de72
commit 6f35cad349
11 changed files with 165 additions and 113 deletions
@@ -54,8 +54,7 @@ export const AlbumListView = ({
}: ItemListSettings) => {
const server = useCurrentServer();
const filters = useAlbumListFilters();
const query = filters.query;
const { query } = useAlbumListFilters();
switch (display) {
case ListDisplayType.GRID: {
@@ -9,7 +9,7 @@ import { useContainerQuery } from '/@/renderer/hooks';
import { Divider } from '/@/shared/components/divider/divider';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { AlbumListSort, LibraryItem } from '/@/shared/types/domain-types';
import { AlbumListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
export const AlbumListHeaderFilters = () => {
@@ -24,7 +24,10 @@ export const AlbumListHeaderFilters = () => {
listKey={ItemListKey.ALBUM}
/>
<Divider orientation="vertical" />
<ListSortOrderToggleButton listKey={ItemListKey.ALBUM} />
<ListSortOrderToggleButton
defaultSortOrder={SortOrder.ASC}
listKey={ItemListKey.ALBUM}
/>
<ListMusicFolderDropdown listKey={ItemListKey.ALBUM} />
<ListFilters itemType={LibraryItem.ALBUM} />
<ListRefreshButton listKey={ItemListKey.ALBUM} />
@@ -42,14 +42,14 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
const {
query,
setAlbumArtist,
setAlbumCompilation,
setAlbumFavorite,
setAlbumGenre,
setAlbumHasRating,
setAlbumRecentlyPlayed,
setCompilation,
setCustom,
setMaxAlbumYear,
setMinAlbumYear,
setFavorite,
setGenreId,
setHasRating,
setMaxYear,
setMinYear,
setRecentlyPlayed,
} = useAlbumListFilters();
const genreListQuery = useQuery(
@@ -92,14 +92,14 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
{
label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
onChange: (favorite?: boolean) => {
setAlbumFavorite(favorite ?? null);
setFavorite(favorite ?? null);
},
value: query.favorite,
},
{
label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
onChange: (compilation?: boolean) => {
setAlbumCompilation(compilation ?? null);
setCompilation(compilation ?? null);
},
value: query.compilation,
},
@@ -110,7 +110,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
label: t('filter.isRated', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const hasRating = e.currentTarget.checked ? true : undefined;
setAlbumHasRating(hasRating ?? null);
setHasRating(hasRating ?? null);
},
value: query.hasRating,
},
@@ -118,7 +118,7 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
label: t('filter.isRecentlyPlayed', { postProcess: 'sentenceCase' }),
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const recentlyPlayed = e.currentTarget.checked ? true : undefined;
setAlbumRecentlyPlayed(recentlyPlayed ?? null);
setRecentlyPlayed(recentlyPlayed ?? null);
},
value: query.recentlyPlayed,
},
@@ -126,8 +126,8 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
const handleYearFilter = debounce((e: number | string) => {
const year = e === '' ? undefined : (e as number);
setMinAlbumYear(year ?? null);
setMaxAlbumYear(year ?? null);
setMinYear(year ?? null);
setMaxYear(year ?? null);
}, 500);
const albumArtistListQuery = useQuery(
@@ -194,9 +194,9 @@ export const NavidromeAlbumFilters = ({ disableArtistFilter }: NavidromeAlbumFil
<SelectWithInvalidData
clearable
data={genreList}
defaultValue={query.genres ? query.genres[0] : undefined}
defaultValue={query.genreId ? query.genreId[0] : undefined}
label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
onChange={(e) => (e ? setAlbumGenre([e]) : undefined)}
onChange={(e) => (e ? setGenreId([e]) : undefined)}
searchable
/>
</Group>
@@ -12,19 +12,20 @@ import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-searc
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 { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
import { AlbumListSort } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
export const useAlbumListFilters = () => {
const { sortBy } = useSortByFilter<AlbumListSort>(AlbumListSort.NAME);
const { sortBy } = useSortByFilter<AlbumListSort>(null, ItemListKey.ALBUM);
const { sortOrder } = useSortOrderFilter(SortOrder.ASC);
const { sortOrder } = useSortOrderFilter(null, ItemListKey.ALBUM);
const { musicFolderId } = useMusicFolderIdFilter('');
const { musicFolderId } = useMusicFolderIdFilter(null, ItemListKey.ALBUM);
const { searchTerm, setSearchTerm } = useSearchTermFilter('');
const [albumGenre, setAlbumGenre] = useQueryState(
FILTER_KEYS.ALBUM.GENRES,
const [genreId, setGenreId] = useQueryState(
FILTER_KEYS.ALBUM.GENRE_ID,
parseAsArrayOf(parseAsString),
);
@@ -33,32 +34,20 @@ export const useAlbumListFilters = () => {
parseAsArrayOf(parseAsString),
);
const [minAlbumYear, setMinAlbumYear] = useQueryState(
FILTER_KEYS.ALBUM.MIN_YEAR,
parseAsInteger,
);
const [minYear, setMinYear] = useQueryState(FILTER_KEYS.ALBUM.MIN_YEAR, parseAsInteger);
const [maxAlbumYear, setMaxAlbumYear] = useQueryState(
FILTER_KEYS.ALBUM.MAX_YEAR,
parseAsInteger,
);
const [maxYear, setMaxYear] = useQueryState(FILTER_KEYS.ALBUM.MAX_YEAR, parseAsInteger);
const [albumFavorite, setAlbumFavorite] = useQueryState(
FILTER_KEYS.ALBUM.FAVORITE,
parseAsBoolean,
);
const [favorite, setFavorite] = useQueryState(FILTER_KEYS.ALBUM.FAVORITE, parseAsBoolean);
const [albumCompilation, setAlbumCompilation] = useQueryState(
const [compilation, setCompilation] = useQueryState(
FILTER_KEYS.ALBUM.COMPILATION,
parseAsBoolean,
);
const [albumHasRating, setAlbumHasRating] = useQueryState(
FILTER_KEYS.ALBUM.HAS_RATING,
parseAsBoolean,
);
const [hasRating, setHasRating] = useQueryState(FILTER_KEYS.ALBUM.HAS_RATING, parseAsBoolean);
const [albumRecentlyPlayed, setAlbumRecentlyPlayed] = useQueryState(
const [recentlyPlayed, setRecentlyPlayed] = useQueryState(
FILTER_KEYS.ALBUM.RECENTLY_PLAYED,
parseAsBoolean,
);
@@ -71,13 +60,13 @@ export const useAlbumListFilters = () => {
const query = {
[FILTER_KEYS.ALBUM._CUSTOM]: custom ?? undefined,
[FILTER_KEYS.ALBUM.ARTIST_IDS]: albumArtist ?? undefined,
[FILTER_KEYS.ALBUM.COMPILATION]: albumCompilation ?? undefined,
[FILTER_KEYS.ALBUM.FAVORITE]: albumFavorite ?? undefined,
[FILTER_KEYS.ALBUM.GENRES]: albumGenre ?? undefined,
[FILTER_KEYS.ALBUM.HAS_RATING]: albumHasRating ?? undefined,
[FILTER_KEYS.ALBUM.MAX_YEAR]: maxAlbumYear ?? undefined,
[FILTER_KEYS.ALBUM.MIN_YEAR]: minAlbumYear ?? undefined,
[FILTER_KEYS.ALBUM.RECENTLY_PLAYED]: albumRecentlyPlayed ?? undefined,
[FILTER_KEYS.ALBUM.COMPILATION]: compilation ?? undefined,
[FILTER_KEYS.ALBUM.FAVORITE]: favorite ?? undefined,
[FILTER_KEYS.ALBUM.GENRE_ID]: genreId ?? undefined,
[FILTER_KEYS.ALBUM.HAS_RATING]: hasRating ?? undefined,
[FILTER_KEYS.ALBUM.MAX_YEAR]: maxYear ?? undefined,
[FILTER_KEYS.ALBUM.MIN_YEAR]: minYear ?? undefined,
[FILTER_KEYS.ALBUM.RECENTLY_PLAYED]: recentlyPlayed ?? undefined,
[FILTER_KEYS.SHARED.MUSIC_FOLDER_ID]: musicFolderId ?? undefined,
[FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm ?? undefined,
[FILTER_KEYS.SHARED.SORT_BY]: sortBy ?? undefined,
@@ -87,14 +76,14 @@ export const useAlbumListFilters = () => {
return {
query,
setAlbumArtist,
setAlbumCompilation,
setAlbumFavorite,
setAlbumGenre,
setAlbumHasRating,
setAlbumRecentlyPlayed,
setCompilation,
setCustom,
setMaxAlbumYear,
setMinAlbumYear,
setFavorite,
setGenreId,
setHasRating,
setMaxYear,
setMinYear,
setRecentlyPlayed,
setSearchTerm,
};
};