From 0c6a993f29ecbd653440225ece4d7949c44fb172 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 14 Nov 2025 00:17:36 -0800 Subject: [PATCH] refactor filter persistence to one key --- .../hooks/use-list-filter-persistence.ts | 38 +++++++++++++++++++ .../hooks/use-music-folder-id-filter.ts | 16 +++----- .../shared/hooks/use-select-filter.ts | 16 +++----- .../shared/hooks/use-sort-by-filter.ts | 16 +++----- .../shared/hooks/use-sort-order-filter.ts | 16 +++----- 5 files changed, 58 insertions(+), 44 deletions(-) create mode 100644 src/renderer/features/shared/hooks/use-list-filter-persistence.ts diff --git a/src/renderer/features/shared/hooks/use-list-filter-persistence.ts b/src/renderer/features/shared/hooks/use-list-filter-persistence.ts new file mode 100644 index 000000000..c69f0f2ae --- /dev/null +++ b/src/renderer/features/shared/hooks/use-list-filter-persistence.ts @@ -0,0 +1,38 @@ +import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; +import { ItemListKey } from '/@/shared/types/types'; + +export interface ListFilterPersistence { + [listKey: string]: { + [filterKey: string]: string | undefined; + }; +} + +const getPersistenceKey = (serverId: string) => { + return `${serverId}-filters`; +}; + +export const useListFilterPersistence = (serverId: string, listKey: ItemListKey) => { + const [persistedFilters, setPersistedFilters] = useLocalStorage({ + defaultValue: {}, + key: getPersistenceKey(serverId), + }); + + const getFilter = (filterKey: string): string | undefined => { + return persistedFilters?.[listKey]?.[filterKey]; + }; + + const setFilter = (filterKey: string, value: string) => { + setPersistedFilters((prev) => ({ + ...prev, + [listKey]: { + ...prev[listKey], + [filterKey]: value, + }, + })); + }; + + return { + getFilter, + setFilter, + }; +}; diff --git a/src/renderer/features/shared/hooks/use-music-folder-id-filter.ts b/src/renderer/features/shared/hooks/use-music-folder-id-filter.ts index 6dbe43f31..f34504fab 100644 --- a/src/renderer/features/shared/hooks/use-music-folder-id-filter.ts +++ b/src/renderer/features/shared/hooks/use-music-folder-id-filter.ts @@ -1,17 +1,15 @@ import { parseAsString, useQueryState } from 'nuqs'; import { FILTER_KEYS } from '/@/renderer/features/shared/utils'; +import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence'; import { useCurrentServer } from '/@/renderer/store'; -import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; import { ItemListKey } from '/@/shared/types/types'; export const useMusicFolderIdFilter = (defaultValue: null | string, listKey: ItemListKey) => { const server = useCurrentServer(); + const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey); - const [persisted, setPersisted] = useLocalStorage({ - defaultValue: '', - key: getPersistenceKey(server.id, listKey), - }); + const persisted = getFilter(FILTER_KEYS.SHARED.MUSIC_FOLDER_ID); const [musicFolderId, setMusicFolderId] = useQueryState( FILTER_KEYS.SHARED.MUSIC_FOLDER_ID, @@ -20,7 +18,7 @@ export const useMusicFolderIdFilter = (defaultValue: null | string, listKey: Ite const handleSetMusicFolderId = (musicFolderId: string) => { setMusicFolderId(musicFolderId); - setPersisted(musicFolderId); + setFilter(FILTER_KEYS.SHARED.MUSIC_FOLDER_ID, musicFolderId); }; return { @@ -29,7 +27,7 @@ export const useMusicFolderIdFilter = (defaultValue: null | string, listKey: Ite }; }; -const getDefaultMusicFolderId = (defaultValue: null | string, persisted: null | string) => { +const getDefaultMusicFolderId = (defaultValue: null | string, persisted: string | undefined) => { if (persisted) { return parseAsString.withDefault(persisted); } @@ -40,7 +38,3 @@ const getDefaultMusicFolderId = (defaultValue: null | string, persisted: null | return parseAsString; }; - -const getPersistenceKey = (serverId: string, listKey: ItemListKey) => { - return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.MUSIC_FOLDER_ID}`; -}; diff --git a/src/renderer/features/shared/hooks/use-select-filter.ts b/src/renderer/features/shared/hooks/use-select-filter.ts index d85a621b2..4fa228469 100644 --- a/src/renderer/features/shared/hooks/use-select-filter.ts +++ b/src/renderer/features/shared/hooks/use-select-filter.ts @@ -1,7 +1,7 @@ import { parseAsString, useQueryState } from 'nuqs'; +import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence'; import { useCurrentServer } from '/@/renderer/store'; -import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; import { ItemListKey } from '/@/shared/types/types'; export const useSelectFilter = ( @@ -10,17 +10,15 @@ export const useSelectFilter = ( listKey: ItemListKey, ) => { const server = useCurrentServer(); + const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey); - const [persisted, setPersisted] = useLocalStorage({ - defaultValue: defaultValue || '', - key: getPersistenceKey(server.id, listKey, filterKey), - }); + const persisted = getFilter(filterKey); const [value, setValue] = useQueryState(filterKey, getDefaultValue(defaultValue, persisted)); const handleSetValue = (newValue: string) => { setValue(newValue); - setPersisted(newValue); + setFilter(filterKey, newValue); }; return { @@ -30,7 +28,7 @@ export const useSelectFilter = ( }; }; -const getDefaultValue = (defaultValue: null | string, persisted: null | string) => { +const getDefaultValue = (defaultValue: null | string, persisted: string | undefined) => { if (persisted) { return parseAsString.withDefault(persisted); } @@ -41,7 +39,3 @@ const getDefaultValue = (defaultValue: null | string, persisted: null | string) return parseAsString; }; - -const getPersistenceKey = (serverId: string, listKey: ItemListKey, filterKey: string) => { - return `${serverId}-list-${listKey}-${filterKey}`; -}; diff --git a/src/renderer/features/shared/hooks/use-sort-by-filter.ts b/src/renderer/features/shared/hooks/use-sort-by-filter.ts index c5ec6f808..593e7de52 100644 --- a/src/renderer/features/shared/hooks/use-sort-by-filter.ts +++ b/src/renderer/features/shared/hooks/use-sort-by-filter.ts @@ -1,17 +1,15 @@ import { parseAsString, useQueryState } from 'nuqs'; +import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence'; import { FILTER_KEYS } from '/@/renderer/features/shared/utils'; import { useCurrentServer } from '/@/renderer/store'; -import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; import { ItemListKey } from '/@/shared/types/types'; export const useSortByFilter = (defaultValue: null | string, listKey: ItemListKey) => { const server = useCurrentServer(); + const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey); - const [persisted, setPersisted] = useLocalStorage({ - defaultValue: defaultValue, - key: getPersistenceKey(server.id, listKey), - }); + const persisted = getFilter(FILTER_KEYS.SHARED.SORT_BY); const [sortBy, setSortBy] = useQueryState( FILTER_KEYS.SHARED.SORT_BY, @@ -20,7 +18,7 @@ export const useSortByFilter = (defaultValue: null | string, listKey: I const handleSetSortBy = (sortBy: string) => { setSortBy(sortBy); - setPersisted(sortBy); + setFilter(FILTER_KEYS.SHARED.SORT_BY, sortBy); }; return { @@ -29,7 +27,7 @@ export const useSortByFilter = (defaultValue: null | string, listKey: I }; }; -const getDefaultSortBy = (defaultValue: null | string, persisted: null | string) => { +const getDefaultSortBy = (defaultValue: null | string, persisted: string | undefined) => { if (persisted) { return parseAsString.withDefault(persisted); } @@ -40,7 +38,3 @@ const getDefaultSortBy = (defaultValue: null | string, persisted: null | string) return parseAsString; }; - -const getPersistenceKey = (serverId: string, listKey: ItemListKey) => { - return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_BY}`; -}; diff --git a/src/renderer/features/shared/hooks/use-sort-order-filter.ts b/src/renderer/features/shared/hooks/use-sort-order-filter.ts index 647646408..c114536f7 100644 --- a/src/renderer/features/shared/hooks/use-sort-order-filter.ts +++ b/src/renderer/features/shared/hooks/use-sort-order-filter.ts @@ -1,18 +1,16 @@ import { parseAsString, useQueryState } from 'nuqs'; import { FILTER_KEYS } from '/@/renderer/features/shared/utils'; +import { useListFilterPersistence } from '/@/renderer/features/shared/hooks/use-list-filter-persistence'; import { useCurrentServer } from '/@/renderer/store'; -import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; import { SortOrder } from '/@/shared/types/domain-types'; import { ItemListKey } from '/@/shared/types/types'; export const useSortOrderFilter = (defaultValue: null | string, listKey: ItemListKey) => { const server = useCurrentServer(); + const { getFilter, setFilter } = useListFilterPersistence(server.id, listKey); - const [persisted, setPersisted] = useLocalStorage({ - defaultValue: SortOrder.ASC, - key: getPersistenceKey(server.id, listKey), - }); + const persisted = getFilter(FILTER_KEYS.SHARED.SORT_ORDER); const [sortOrder, setSortOrder] = useQueryState( FILTER_KEYS.SHARED.SORT_ORDER, @@ -21,7 +19,7 @@ export const useSortOrderFilter = (defaultValue: null | string, listKey: ItemLis const handleSetSortOrder = (sortOrder: SortOrder) => { setSortOrder(sortOrder); - setPersisted(sortOrder); + setFilter(FILTER_KEYS.SHARED.SORT_ORDER, sortOrder); }; return { @@ -30,7 +28,7 @@ export const useSortOrderFilter = (defaultValue: null | string, listKey: ItemLis }; }; -const getDefaultSortOrder = (defaultValue: null | string, persisted: null | string) => { +const getDefaultSortOrder = (defaultValue: null | string, persisted: string | undefined) => { if (persisted) { return parseAsString.withDefault(persisted); } @@ -41,7 +39,3 @@ const getDefaultSortOrder = (defaultValue: null | string, persisted: null | stri return parseAsString; }; - -const getPersistenceKey = (serverId: string, listKey: ItemListKey) => { - return `${serverId}-list-${listKey}-${FILTER_KEYS.SHARED.SORT_ORDER}`; -};