mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-16 13:40:24 +02:00
update query persistence to hooks
This commit is contained in:
@@ -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,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user