Migrate playlist list to use list store

This commit is contained in:
jeffvli 2023-07-19 00:28:46 -07:00
parent 78860db537
commit bba27c5ddb
5 changed files with 158 additions and 279 deletions

View file

@ -9,6 +9,7 @@ import {
AlbumListArgs,
AlbumListSort,
LibraryItem,
PlaylistListArgs,
PlaylistListSort,
SongListArgs,
SongListSort,
@ -24,10 +25,11 @@ export const generatePageKey = (page: string, id?: string) => {
export type AlbumListFilter = Omit<AlbumListArgs['query'], 'startIndex' | 'limit'>;
export type SongListFilter = Omit<SongListArgs['query'], 'startIndex' | 'limit'>;
export type AlbumArtistListFilter = Omit<AlbumArtistListArgs['query'], 'startIndex' | 'limit'>;
export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
export type ListKey = keyof ListState['item'] | string;
type FilterType = AlbumListFilter | SongListFilter | AlbumArtistListFilter;
type FilterType = AlbumListFilter | SongListFilter | AlbumArtistListFilter | PlaylistListFilter;
export type ListTableProps = {
pagination: TablePagination;
@ -54,6 +56,7 @@ export interface ListState {
album: ListItemProps<AlbumListFilter>;
albumArtist: ListItemProps<AlbumArtistListFilter>;
albumDetail: ListItemProps<any>;
playlist: ListItemProps<PlaylistListFilter>;
song: ListItemProps<SongListFilter>;
};
}
@ -399,17 +402,13 @@ export const useListStore = create<ListSlice>()(
width: 50,
},
{
column: TableColumn.TITLE_COMBINED,
column: TableColumn.TITLE,
width: 500,
},
{
column: TableColumn.DURATION,
column: TableColumn.SONG_COUNT,
width: 100,
},
{
column: TableColumn.ALBUM,
width: 500,
},
],
pagination: {
currentPage: 1,
@ -422,7 +421,7 @@ export const useListStore = create<ListSlice>()(
},
},
song: {
display: ListDisplayType.POSTER,
display: ListDisplayType.TABLE,
filter: {
sortBy: SongListSort.RECENTLY_ADDED,
sortOrder: SortOrder.DESC,
@ -540,6 +539,27 @@ export const useSongListStore = (args?: { id?: string; key?: string }) =>
};
}, shallow);
export const usePlaylistListStore = (args?: { key?: string }) =>
useListStore((state) => {
const detail = args?.key ? state.detail[args.key] : undefined;
return {
...state.item.playlist,
filter: {
...state.item.playlist.filter,
...detail?.filter,
},
grid: {
...state.item.playlist.grid,
...detail?.grid,
},
table: {
...state.item.playlist.table,
...detail?.table,
},
};
}, shallow);
export const useSongListFilter = (args: { id?: string; key?: string }) =>
useListStore((state) => {
return state._actions.getFilter({
@ -567,4 +587,13 @@ export const useAlbumArtistListFilter = (args: { id?: string; key?: string }) =>
}) as AlbumArtistListFilter;
}, shallow);
export const usePlaylistListFilter = (args: { id?: string; key?: string }) =>
useListStore((state) => {
return state._actions.getFilter({
id: args.id,
itemType: LibraryItem.PLAYLIST,
key: args.key,
}) as PlaylistListFilter;
}, shallow);
export const useListDetail = (key: string) => useListStore((state) => state.detail[key], shallow);

View file

@ -2,8 +2,8 @@ import merge from 'lodash/merge';
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import { PlaylistListArgs, PlaylistListSort, SortOrder } from '/@/renderer/api/types';
import { SongListFilter } from '/@/renderer/store/list.store';
import { PlaylistListSort, SortOrder } from '/@/renderer/api/types';
import { PlaylistListFilter, SongListFilter } from '/@/renderer/store/list.store';
import { DataTableProps } from '/@/renderer/store/settings.store';
import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types';
@ -38,8 +38,6 @@ type ListGridProps = {
scrollOffset?: number;
};
export type PlaylistListFilter = Omit<PlaylistListArgs['query'], 'startIndex' | 'limit'>;
interface PlaylistState {
detail: DetailProps;
grid: ListGridProps;