From b742b814c09610d2fe75d5bffff9e06d9ebc7c69 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Wed, 21 Dec 2022 01:25:56 -0800 Subject: [PATCH] Split stores --- src/renderer/store/album.store.ts | 83 ++++++++++++++++++++++ src/renderer/store/app.store.ts | 108 +---------------------------- src/renderer/store/auth.store.ts | 15 ++-- src/renderer/store/index.ts | 2 + src/renderer/store/player.store.ts | 4 +- src/renderer/store/song.store.ts | 106 ++++++++++++++++++++++++++++ src/renderer/types.ts | 4 +- 7 files changed, 200 insertions(+), 122 deletions(-) create mode 100644 src/renderer/store/album.store.ts create mode 100644 src/renderer/store/song.store.ts diff --git a/src/renderer/store/album.store.ts b/src/renderer/store/album.store.ts new file mode 100644 index 00000000..245212e9 --- /dev/null +++ b/src/renderer/store/album.store.ts @@ -0,0 +1,83 @@ +import merge from 'lodash/merge'; +import create from 'zustand'; +import { devtools, persist } from 'zustand/middleware'; +import { immer } from 'zustand/middleware/immer'; +import { AlbumListArgs, AlbumListSort, SortOrder } from '/@/renderer/api/types'; +import { CardDisplayType } from '/@/renderer/types'; + +type TableProps = { + scrollOffset: number; +}; + +type ListProps = { + display: CardDisplayType; + filter: T; + grid: { + scrollOffset: number; + size: number; + }; + table: TableProps; +}; + +type AlbumListFilter = Omit; + +export interface AlbumState { + list: ListProps; +} + +export interface AlbumSlice extends AlbumState { + actions: { + setFilters: (data: Partial) => void; + setStore: (data: Partial) => void; + }; +} + +export const useAlbumStore = create()( + persist( + devtools( + immer((set, get) => ({ + actions: { + setFilters: (data) => { + set((state) => { + state.list.filter = { ...state.list.filter, ...data }; + }); + }, + setStore: (data) => { + set({ ...get(), ...data }); + }, + }, + list: { + display: CardDisplayType.CARD, + filter: { + musicFolderId: undefined, + sortBy: AlbumListSort.RECENTLY_ADDED, + sortOrder: SortOrder.ASC, + }, + grid: { + scrollOffset: 0, + size: 50, + }, + table: { + scrollOffset: 0, + }, + }, + })), + { name: 'store_album' }, + ), + { + merge: (persistedState, currentState) => { + return merge(currentState, persistedState); + }, + name: 'store_album', + version: 1, + }, + ), +); + +export const useAlbumStoreActions = () => useAlbumStore((state) => state.actions); + +export const useSetAlbumStore = () => useAlbumStore((state) => state.actions.setStore); + +export const useSetAlbumFilters = () => useAlbumStore((state) => state.actions.setFilters); + +export const useAlbumListStore = () => useAlbumStore((state) => state.list); diff --git a/src/renderer/store/app.store.ts b/src/renderer/store/app.store.ts index 653dbda5..6916fa27 100644 --- a/src/renderer/store/app.store.ts +++ b/src/renderer/store/app.store.ts @@ -1,10 +1,8 @@ import merge from 'lodash/merge'; -import { nanoid } from 'nanoid/non-secure'; import create from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; -import { AlbumListSort, SongListSort, SortOrder } from '/@/renderer/api/types'; -import { AdvancedFilterGroup, CardDisplayType, Platform, FilterGroupType } from '/@/renderer/types'; +import { Platform } from '/@/renderer/types'; type SidebarProps = { expanded: string[]; @@ -14,38 +12,12 @@ type SidebarProps = { rightWidth: string; }; -type LibraryPageProps = { - list: ListProps; -}; - -type ListFilter = { - musicFolderId?: string; - sortBy: TSort; - sortOrder: SortOrder; -}; - -type ListAdvancedFilter = { - enabled: boolean; - filter: AdvancedFilterGroup; -}; - -type ListProps = { - advancedFilter: ListAdvancedFilter; - display: CardDisplayType; - filter: ListFilter; - gridScrollOffset: number; - listScrollOffset: number; - size: number; - type: 'list' | 'grid'; -}; - type TitlebarProps = { backgroundColor: string; outOfView: boolean; }; export interface AppState { - albums: LibraryPageProps; isReorderingQueue: boolean; platform: Platform; sidebar: { @@ -55,32 +27,12 @@ export interface AppState { rightExpanded: boolean; rightWidth: string; }; - songs: LibraryPageProps; titlebar: TitlebarProps; } -const DEFAULT_ADVANCED_FILTERS = { - group: [], - rules: [ - { - field: '', - operator: '', - uniqueId: nanoid(), - value: '', - }, - ], - type: FilterGroupType.AND, - uniqueId: nanoid(), -}; - export interface AppSlice extends AppState { actions: { - resetServerDefaults: () => void; setAppStore: (data: Partial) => void; - setPage: ( - page: 'albums' | 'songs', - options: Partial>, - ) => void; setSidebar: (options: Partial) => void; setTitlebar: (options: Partial) => void; }; @@ -91,27 +43,9 @@ export const useAppStore = create()( devtools( immer((set, get) => ({ actions: { - resetServerDefaults: () => { - set((state) => { - state.albums.list = { - ...state.albums.list, - filter: { - ...state.albums.list.filter, - musicFolderId: undefined, - }, - gridScrollOffset: 0, - listScrollOffset: 0, - }; - }); - }, setAppStore: (data) => { set({ ...get(), ...data }); }, - setPage: (page: 'albums' | 'songs', data: any) => { - set((state) => { - state[page] = { ...state[page], ...data }; - }); - }, setSidebar: (options) => { set((state) => { state.sidebar = { ...state.sidebar, ...options }; @@ -123,24 +57,6 @@ export const useAppStore = create()( }); }, }, - albums: { - list: { - advancedFilter: { - enabled: false, - filter: DEFAULT_ADVANCED_FILTERS, - }, - display: CardDisplayType.CARD, - filter: { - musicFolderId: undefined, - sortBy: AlbumListSort.RECENTLY_ADDED, - sortOrder: SortOrder.ASC, - }, - gridScrollOffset: 0, - listScrollOffset: 0, - size: 50, - type: 'grid', - }, - }, isReorderingQueue: false, platform: Platform.WINDOWS, sidebar: { @@ -150,24 +66,6 @@ export const useAppStore = create()( rightExpanded: false, rightWidth: '400px', }, - songs: { - list: { - advancedFilter: { - enabled: false, - filter: DEFAULT_ADVANCED_FILTERS, - }, - display: CardDisplayType.CARD, - filter: { - musicFolderId: undefined, - sortBy: SongListSort.NAME, - sortOrder: SortOrder.ASC, - }, - gridScrollOffset: 0, - listScrollOffset: 0, - size: 50, - type: 'grid', - }, - }, titlebar: { backgroundColor: '#000000', outOfView: false, @@ -187,10 +85,6 @@ export const useAppStore = create()( export const useAppStoreActions = () => useAppStore((state) => state.actions); -export const useAlbumRouteStore = () => useAppStore((state) => state.albums); - -export const useSongRouteStore = () => useAppStore((state) => state.songs); - export const useSidebarStore = () => useAppStore((state) => state.sidebar); export const useSidebarRightExpanded = () => useAppStore((state) => state.sidebar.rightExpanded); diff --git a/src/renderer/store/auth.store.ts b/src/renderer/store/auth.store.ts index b0391f8e..3968479b 100644 --- a/src/renderer/store/auth.store.ts +++ b/src/renderer/store/auth.store.ts @@ -4,7 +4,7 @@ import create from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; import { AlbumListSort, SortOrder } from '/@/renderer/api/types'; -import { useAppStore } from '/@/renderer/store/app.store'; +import { useAlbumStore } from '/@/renderer/store/album.store'; import { ServerListItem } from '/@/renderer/types'; export interface AuthState { @@ -45,15 +45,10 @@ export const useAuthStore = create()( state.currentServer = server; if (server) { - useAppStore.getState().actions.setPage('albums', { - list: { - ...useAppStore.getState().albums.list, - filter: { - ...useAppStore.getState().albums.list.filter, - sortBy: AlbumListSort.RECENTLY_ADDED, - sortOrder: SortOrder.ASC, - }, - }, + useAlbumStore.getState().actions.setFilters({ + musicFolderId: undefined, + sortBy: AlbumListSort.RECENTLY_ADDED, + sortOrder: SortOrder.ASC, }); } }); diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts index 4bcde8b4..2c462415 100644 --- a/src/renderer/store/index.ts +++ b/src/renderer/store/index.ts @@ -1,3 +1,5 @@ export * from './auth.store'; export * from './player.store'; export * from './app.store'; +export * from './album.store'; +export * from './song.store'; diff --git a/src/renderer/store/player.store.ts b/src/renderer/store/player.store.ts index 635674ef..110ed3c0 100644 --- a/src/renderer/store/player.store.ts +++ b/src/renderer/store/player.store.ts @@ -6,8 +6,8 @@ import create from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; import shallow from 'zustand/shallow'; -import { Song } from '/@/renderer/api/types'; -import { QueueSong, PlayerStatus, PlayerRepeat, PlayerShuffle, Play } from '/@/renderer/types'; +import { QueueSong, Song } from '/@/renderer/api/types'; +import { PlayerStatus, PlayerRepeat, PlayerShuffle, Play } from '/@/renderer/types'; export interface PlayerState { current: { diff --git a/src/renderer/store/song.store.ts b/src/renderer/store/song.store.ts new file mode 100644 index 00000000..2cc0e203 --- /dev/null +++ b/src/renderer/store/song.store.ts @@ -0,0 +1,106 @@ +import merge from 'lodash/merge'; +import create from 'zustand'; +import { devtools, persist } from 'zustand/middleware'; +import { immer } from 'zustand/middleware/immer'; +import { SongListArgs, SongListSort, SortOrder } from '/@/renderer/api/types'; +import { DataTableProps } from '/@/renderer/store/settings.store'; +import { CardDisplayType, TableColumn } from '/@/renderer/types'; + +type TableProps = { + scrollOffset: number; +} & DataTableProps; + +type ListProps = { + display: CardDisplayType; + filter: T; + table: TableProps; +}; + +type AlbumListFilter = Omit; + +interface SongState { + list: ListProps; +} + +export interface SongSlice extends SongState { + actions: { + setFilters: (data: Partial) => void; + setStore: (data: Partial) => void; + }; +} + +export const useSongStore = create()( + persist( + devtools( + immer((set, get) => ({ + actions: { + setFilters: (data) => { + set((state) => { + state.list.filter = { ...state.list.filter, ...data }; + }); + }, + setStore: (data) => { + set({ ...get(), ...data }); + }, + }, + list: { + display: CardDisplayType.TABLE, + filter: { + musicFolderId: undefined, + sortBy: SongListSort.RECENTLY_ADDED, + sortOrder: SortOrder.ASC, + }, + table: { + autoFit: true, + columns: [ + { + column: TableColumn.ROW_INDEX, + width: 50, + }, + { + column: TableColumn.TITLE_COMBINED, + width: 500, + }, + { + column: TableColumn.DURATION, + width: 100, + }, + { + column: TableColumn.ALBUM, + width: 300, + }, + { + column: TableColumn.ARTIST, + width: 100, + }, + { + column: TableColumn.YEAR, + width: 100, + }, + ], + rowHeight: 60, + scrollOffset: 0, + }, + }, + })), + { name: 'store_song' }, + ), + { + merge: (persistedState, currentState) => { + return merge(currentState, persistedState); + }, + name: 'store_song', + version: 1, + }, + ), +); + +export const useSongStoreActions = () => useSongStore((state) => state.actions); + +export const useSetSongStore = () => useSongStore((state) => state.actions.setStore); + +export const useSongFilters = () => { + return useSongStore((state) => [state.list.filter, state.actions.setFilters]); +}; + +export const useSongListStore = () => useSongStore((state) => state.list); diff --git a/src/renderer/types.ts b/src/renderer/types.ts index 843e197c..7b21c998 100644 --- a/src/renderer/types.ts +++ b/src/renderer/types.ts @@ -1,4 +1,3 @@ -import { Song } from '/@/renderer/api/types'; import { AppRoute } from '/@/renderer/router/routes'; export type RouteSlug = { @@ -22,6 +21,7 @@ export type CardRow = { export enum CardDisplayType { CARD = 'card', POSTER = 'poster', + TABLE = 'table', } export enum ListDisplayType { @@ -150,8 +150,6 @@ export enum TableColumn { YEAR = 'releaseYear', } -export type QueueSong = Song & UniqueId; - export type PlayQueueAddOptions = { // byData?: any[]; byItemType: {