diff --git a/src/renderer/store/album-artist.store.ts b/src/renderer/store/album-artist.store.ts index d8ae5d67..54ce3d5c 100644 --- a/src/renderer/store/album-artist.store.ts +++ b/src/renderer/store/album-artist.store.ts @@ -1,10 +1,10 @@ -import merge from 'lodash/merge'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; import { AlbumArtistListArgs, AlbumArtistListSort, SortOrder } from '/@/renderer/api/types'; import { DataTableProps } from '/@/renderer/store/settings.store'; import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types'; +import { mergeOverridingColumns } from '/@/renderer/store/utils'; type TableProps = { pagination: TablePagination; @@ -102,9 +102,7 @@ export const useAlbumArtistStore = create()( { name: 'store_album_artist' }, ), { - merge: (persistedState, currentState) => { - return merge(currentState, persistedState); - }, + merge: mergeOverridingColumns, name: 'store_album_artist', version: 1, }, diff --git a/src/renderer/store/list.store.ts b/src/renderer/store/list.store.ts index c4bd24d3..f9d7ff0b 100644 --- a/src/renderer/store/list.store.ts +++ b/src/renderer/store/list.store.ts @@ -1,4 +1,3 @@ -import merge from 'lodash/merge'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; @@ -19,6 +18,7 @@ import { } from '/@/renderer/api/types'; import { DataTableProps, PersistedTableColumn } from '/@/renderer/store/settings.store'; import { ListDisplayType, TableColumn, TablePagination } from '/@/renderer/types'; +import { mergeOverridingColumns } from '/@/renderer/store/utils'; export const generatePageKey = (page: string, id?: string) => { return id ? `${page}_${id}` : page; @@ -613,9 +613,7 @@ export const useListStore = create()( { name: 'store_list' }, ), { - merge: (persistedState, currentState) => { - return merge(currentState, persistedState); - }, + merge: mergeOverridingColumns, name: 'store_list', partialize: (state) => { return Object.fromEntries( diff --git a/src/renderer/store/playlist.store.ts b/src/renderer/store/playlist.store.ts index 129cdb0d..e4d36d4e 100644 --- a/src/renderer/store/playlist.store.ts +++ b/src/renderer/store/playlist.store.ts @@ -1,4 +1,3 @@ -import merge from 'lodash/merge'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; @@ -6,6 +5,7 @@ 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'; +import { mergeOverridingColumns } from '/@/renderer/store/utils'; type TableProps = { pagination: TablePagination; @@ -187,9 +187,7 @@ export const usePlaylistStore = create()( { name: 'store_playlist' }, ), { - merge: (persistedState, currentState) => { - return merge(currentState, persistedState); - }, + merge: mergeOverridingColumns, name: 'store_playlist', version: 1, }, diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts index fa7670fe..fc88f71d 100644 --- a/src/renderer/store/settings.store.ts +++ b/src/renderer/store/settings.store.ts @@ -2,7 +2,6 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import { ColDef } from '@ag-grid-community/core'; import isElectron from 'is-electron'; -import merge from 'lodash/merge'; import { generatePath } from 'react-router'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; @@ -24,6 +23,7 @@ import { import { randomString } from '/@/renderer/utils'; import i18n from '/@/i18n/i18n'; import { usePlayerStore } from '/@/renderer/store/player.store'; +import { mergeOverridingColumns } from '/@/renderer/store/utils'; const utils = isElectron() ? window.electron.utils : null; @@ -640,9 +640,7 @@ export const useSettingsStore = create()( { name: 'store_settings' }, ), { - merge: (persistedState, currentState) => { - return merge(currentState, persistedState); - }, + merge: mergeOverridingColumns, name: 'store_settings', version: 8, }, diff --git a/src/renderer/store/utils.ts b/src/renderer/store/utils.ts new file mode 100644 index 00000000..2521ea4d --- /dev/null +++ b/src/renderer/store/utils.ts @@ -0,0 +1,19 @@ +import mergeWith from 'lodash/mergeWith'; + +/** + * A custom deep merger that will replace all 'columns' items with the persistent + * state, instead of the default merge behavior. This is important to preserve the user's + * order, and not lead to an inconsistent state (e.g. multiple 'Favorite' keys) + * @param persistedState the persistent state + * @param currentState the current state + * @returns the a custom deep merge + */ +export const mergeOverridingColumns = (persistedState: unknown, currentState: T) => { + return mergeWith(currentState, persistedState, (_original, persistent, key) => { + if (key === 'columns') { + return persistent; + } + + return undefined; + }); +};